@sovereignfs/ui 0.21.0

package/src/stories/EmptyState.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EmptyState } from '../components/EmptyState/EmptyState';
+import { Button } from '../components/Button/Button';
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { heading: 'No results found' },
+};
+
+export const WithIcon: Story = {
+  args: {
+    icon: 'search',
+    heading: 'No results found',
+    description: 'Try adjusting your search or filters.',
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    icon: 'plus',
+    heading: 'No plugins installed',
+    description: 'Add your first plugin to get started.',
+    action: <Button>Browse plugins</Button>,
+  },
+};

package/src/stories/FormField.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormField } from '../components/FormField/FormField';
+import { Input } from '../components/Input/Input';
+
+const meta = {
+  title: 'Components/FormField',
+  component: FormField,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof FormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Email address',
+    htmlFor: 'email',
+    children: <Input id="email" type="email" placeholder="you@example.com" />,
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: 'Username',
+    hint: 'Letters, numbers, and underscores only.',
+    htmlFor: 'username',
+    children: <Input id="username" placeholder="your_username" />,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Password',
+    error: 'Password must be at least 8 characters.',
+    htmlFor: 'password',
+    children: <Input id="password" type="password" />,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Full name',
+    required: true,
+    htmlFor: 'name',
+    children: <Input id="name" placeholder="Jane Smith" />,
+  },
+};