;
+
+function ProgressDemo() {
+ const [v, setV] = useState(40);
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};
+
+export const Callouts: Story = {
+ render: () => (
+
+ }>Sync runs in the background.
+ }>All changes saved.
+ }>Storage is almost full.
+ }>Failed to reach the server.
+
+ ),
+};
+
+export const Badges: Story = {
+ render: () => (
+
+ Lime
+ Ember
+ Neutral
+ Outline
+ Online
+
+ ),
+};
+
+export const Chips: Story = {
+ render: () => (
+
+ Design
+ {}}>Removable
+
+ ),
+};
diff --git a/src/stories/IconButton.stories.tsx b/src/stories/IconButton.stories.tsx
new file mode 100644
index 0000000..8fd4ac1
--- /dev/null
+++ b/src/stories/IconButton.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Gear, Plus, Trash } from '@phosphor-icons/react';
+import { IconButton } from '../components/ui';
+
+const meta = {
+ title: 'Inputs/IconButton',
+ component: IconButton,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Square button for a single icon. Shares the Button variants; sizes are `sm` / default / `lg`.',
+ },
+ },
+ },
+ argTypes: {
+ variant: { control: 'inline-radio', options: ['key', 'primary', 'ember', 'ghost'] },
+ size: { control: 'inline-radio', options: ['sm', undefined, 'lg'] },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Playground: Story = {
+ args: { variant: 'key', children: },
+};
+
+export const Variants: Story = {
+ render: () => (
+
+ ),
+};
+
+export const Sizes: Story = {
+ render: () => (
+
+ ),
+};
diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx
new file mode 100644
index 0000000..c13604f
--- /dev/null
+++ b/src/stories/Introduction.mdx
@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# ModernSK
+
+Tactile, dark-first React components built on [Radix](https://www.radix-ui.com/) primitives.
+Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
+
+This Storybook is the **development playground** — it is never published with the
+package. Use it to browse every component, read its prop table (the **Docs** tab on
+each story), and try props live in the **Controls** panel.
+
+## Using the library in an app
+
+```tsx
+import 'modern-sk/styles.css'; // required — tokens + components
+import 'modern-sk/fonts.css'; // optional — branded faces
+import { ThemeProvider, TooltipProvider, Button } from 'modern-sk';
+
+export function App() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+## Theme
+
+Use the **Theme** toggle in the toolbar above to flip every story between dark and
+light. In an app the same lever is `data-theme` on ``, managed by
+`ThemeProvider` / `useTheme()`.
+
+## Fonts
+
+Components read the `--font-display`, `--font-sans` and `--font-mono` tokens. Import
+`modern-sk/fonts.css` for the branded faces, or override those tokens to map the
+components onto fonts your app already loads.
diff --git a/src/stories/Overlays.stories.tsx b/src/stories/Overlays.stories.tsx
new file mode 100644
index 0000000..4511122
--- /dev/null
+++ b/src/stories/Overlays.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Copy, Scissors, Trash, ArrowCounterClockwise } from '@phosphor-icons/react';
+import {
+ Tooltip,
+ Menu,
+ MenuTrigger,
+ MenuContent,
+ MenuItem,
+ MenuSeparator,
+ Dialog,
+ AlertDialog,
+ Button,
+} from '../components/ui';
+
+const meta = {
+ title: 'Overlays/Floating',
+ component: Tooltip,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Floating surfaces — Tooltip, dropdown Menu, Dialog and AlertDialog. All are Radix-backed and portal-rendered.',
+ },
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const TooltipStory: Story = {
+ name: 'Tooltip',
+ render: () => (
+
+
+
+ ),
+};
+
+export const DropdownMenu: Story = {
+ render: () => (
+
+ ),
+};
+
+export const ModalDialog: Story = {
+ render: () => (
+