@k3-universe/react-kit 0.0.28 → 0.0.30

package/src/stories/kit/components/Autocomplete.stories.tsx

@@ -1,7 +1,13 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete, type AutocompleteProps } from '../../../kit/components/autocomplete/Autocomplete';
-import type { AutocompleteOption, AutocompleteFetchResult } from '../../../kit/components/autocomplete/types';
+import {
+  Autocomplete,
+  type AutocompleteProps,
+} from '../../../kit/components/autocomplete/Autocomplete';
+import type {
+  AutocompleteOption,
+  AutocompleteFetchResult,
+} from '../../../kit/components/autocomplete/types';
 
 const meta: Meta<typeof Autocomplete> = {
   title: 'Kit/Components/Autocomplete',
@@ -49,26 +55,34 @@ export const ClientMode: Story = {
 
 // Mock server fetcher
 function makeServerFetcher(all: AutocompleteOption[], minLatency = 350) {
-  return async ({ search, page, pageSize }: {
+  return async ({
+    search,
+    page,
+    pageSize,
+  }: {
     search: string;
     page?: number;
     pageSize: number;
   }): Promise<AutocompleteFetchResult> => {
     const q = (search || '').toLowerCase();
     const resolvedPage = page ?? 1;
-    const filtered = q ? all.filter(o => o.label.toLowerCase().includes(q)) : all;
+    const filtered = q
+      ? all.filter((o) => o.label.toLowerCase().includes(q))
+      : all;
     const start = (resolvedPage - 1) * pageSize;
     const slice = filtered.slice(start, start + pageSize);
     const hasMore = start + pageSize < filtered.length;
-    await new Promise(r => setTimeout(r, minLatency));
+    await new Promise((r) => setTimeout(r, minLatency));
     return { items: slice, hasMore, nextCursor: null };
   };
 }
 
-const MANY_OPTIONS: AutocompleteOption[] = Array.from({ length: 100 }).map((_, i) => ({
-  label: `Option ${i + 1}`,
-  value: i + 1,
-}));
+const MANY_OPTIONS: AutocompleteOption[] = Array.from({ length: 100 }).map(
+  (_, i) => ({
+    label: `Option ${i + 1}`,
+    value: i + 1,
+  }),
+);
 
 export const ServerMode: Story = {
   name: 'Server mode (infinite scroll)',
@@ -89,7 +103,9 @@ export const CustomRender: Story = {
     renderOption: (option, selected) => (
       <div className="flex items-center gap-2">
         <span className="inline-block h-2 w-2 rounded-full bg-primary" />
-        <span className={selected ? 'font-medium' : undefined}>{option.label}</span>
+        <span className={selected ? 'font-medium' : undefined}>
+          {option.label}
+        </span>
       </div>
     ),
   } satisfies Partial<AutocompleteProps>,
@@ -161,10 +177,13 @@ function EditFormExample() {
     <div className="space-y-6 max-w-md">
       <div className="rounded-lg border p-4 bg-card">
         <h3 className="font-semibold mb-4">Edit User Profile</h3>
-        
+
         <div className="space-y-4">
           <div>
-            <label className="text-sm font-medium mb-2 block">
+            <label
+              htmlFor="favoriteCity"
+              className="text-sm font-medium mb-2 block"
+            >
               Favorite City (Single Select)
             </label>
             <Autocomplete
@@ -180,7 +199,10 @@ function EditFormExample() {
           </div>
 
           <div>
-            <label className="text-sm font-medium mb-2 block">
+            <label
+              htmlFor="visitedCities"
+              className="text-sm font-medium mb-2 block"
+            >
               Visited Cities (Multiple Select)
             </label>
             <Autocomplete
@@ -199,7 +221,11 @@ function EditFormExample() {
         </div>
 
         <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
-          <span role="img" aria-label="lightbulb">💡</span> Notice: Labels are automatically populated from the options array without needing <code>initialSelectedOptions</code>
+          <span role="img" aria-label="lightbulb">
+            💡
+          </span>{' '}
+          Notice: Labels are automatically populated from the options array
+          without needing <code>initialSelectedOptions</code>
         </div>
       </div>
     </div>
@@ -217,7 +243,9 @@ function ServerModeWithLoadSelectedExample() {
     selectedOptionIds: [5, 15, 25], // Only IDs, no labels
   };
 
-  const [selectedIds, setSelectedIds] = useState(userPreferences.selectedOptionIds);
+  const [selectedIds, setSelectedIds] = useState(
+    userPreferences.selectedOptionIds,
+  );
 
   // Simulate fetcher that searches/paginates
   const serverFetcher = makeServerFetcher(MANY_OPTIONS, 500);
@@ -225,11 +253,11 @@ function ServerModeWithLoadSelectedExample() {
   // Function to load labels for selected IDs
   const loadSelectedLabels = async (ids: Array<string | number>) => {
     console.log('🔍 Loading labels for IDs:', ids);
-    
+
     // Simulate API call to fetch specific items by IDs
-    await new Promise(r => setTimeout(r, 800));
-    
-    return MANY_OPTIONS.filter(opt => ids.includes(opt.value));
+    await new Promise((r) => setTimeout(r, 800));
+
+    return MANY_OPTIONS.filter((opt) => ids.includes(opt.value));
   };
 
   return (
@@ -239,7 +267,7 @@ function ServerModeWithLoadSelectedExample() {
         <p className="text-sm text-muted-foreground mb-4">
           Pre-selected IDs: {selectedIds.join(', ')}
         </p>
-        
+
         <Autocomplete
           mode="server"
           fetcher={serverFetcher}
@@ -254,11 +282,16 @@ function ServerModeWithLoadSelectedExample() {
 
         <div className="mt-4 pt-4 border-t">
           <p className="text-xs text-muted-foreground mb-2">
-            <span role="img" aria-label="info">ℹ️</span> How it works:
+            <span role="img" aria-label="info">
+              ℹ️
+            </span>{' '}
+            How it works:
           </p>
           <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside">
             <li>Component receives only IDs: [5, 15, 25]</li>
-            <li>When dropdown opens, <code>loadSelected</code> is called</li>
+            <li>
+              When dropdown opens, <code>loadSelected</code> is called
+            </li>
             <li>Fetches labels from server and displays them</li>
             <li>Perfect for edit forms with server-side data</li>
           </ul>

package/src/stories/kit/components/DatePicker.stories.tsx

@@ -24,7 +24,15 @@ export const Basic: Story = {
         <div className="p-6 space-y-4">
           <div>
             <div className="text-sm text-muted-foreground">Selected date</div>
-            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+            <div className="font-medium">
+              {value
+                ? value.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit',
+                  })
+                : '—'}
+            </div>
           </div>
           <DatePicker value={value} onChange={setValue} />
         </div>
@@ -46,9 +54,22 @@ export const WithConstraints: Story = {
         <div className="p-6 space-y-4">
           <div>
             <div className="text-sm text-muted-foreground">Selected date</div>
-            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+            <div className="font-medium">
+              {value
+                ? value.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit',
+                  })
+                : '—'}
+            </div>
           </div>
-          <DatePicker value={value} onChange={setValue} minDate={minDate} maxDate={maxDate} />
+          <DatePicker
+            value={value}
+            onChange={setValue}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
         </div>
       );
     }
@@ -62,16 +83,40 @@ export const DisabledSingleDates: Story = {
     function Demo() {
       const [value, setValue] = React.useState<Date | null>(new Date());
       const today = new Date();
-      const d1 = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      const d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-      const d3 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      const d1 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate(),
+      );
+      const d2 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 1,
+      );
+      const d3 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 7,
+      );
       return (
         <div className="p-6 space-y-4">
           <div>
             <div className="text-sm text-muted-foreground">Selected date</div>
-            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+            <div className="font-medium">
+              {value
+                ? value.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit',
+                  })
+                : '—'}
+            </div>
           </div>
-          <DatePicker value={value} onChange={setValue} disabledDates={[d1, d2, d3]} />
+          <DatePicker
+            value={value}
+            onChange={setValue}
+            disabledDates={[d1, d2, d3]}
+          />
         </div>
       );
     }
@@ -85,15 +130,33 @@ export const DisabledDateRanges: Story = {
     function Demo() {
       const [value, setValue] = React.useState<Date | null>(new Date());
       const base = new Date();
-      const range1 = { from: new Date(base.getFullYear(), base.getMonth(), 10), to: new Date(base.getFullYear(), base.getMonth(), 15) };
-      const range2 = { from: new Date(base.getFullYear(), base.getMonth(), 20), to: new Date(base.getFullYear(), base.getMonth(), 22) };
+      const range1 = {
+        from: new Date(base.getFullYear(), base.getMonth(), 10),
+        to: new Date(base.getFullYear(), base.getMonth(), 15),
+      };
+      const range2 = {
+        from: new Date(base.getFullYear(), base.getMonth(), 20),
+        to: new Date(base.getFullYear(), base.getMonth(), 22),
+      };
       return (
         <div className="p-6 space-y-4">
           <div>
             <div className="text-sm text-muted-foreground">Selected date</div>
-            <div className="font-medium">{value ? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' }) : '—'}</div>
+            <div className="font-medium">
+              {value
+                ? value.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit',
+                  })
+                : '—'}
+            </div>
           </div>
-          <DatePicker value={value} onChange={setValue} disabledDates={[range1, range2]} />
+          <DatePicker
+            value={value}
+            onChange={setValue}
+            disabledDates={[range1, range2]}
+          />
         </div>
       );
     }
@@ -109,7 +172,11 @@ export const ControlledOpen: Story = {
       const [open, setOpen] = React.useState(false);
       return (
         <div className="p-6 space-y-4">
-          <button type="button" className="underline text-sm" onClick={() => setOpen((o) => !o)}>
+          <button
+            type="button"
+            className="underline text-sm"
+            onClick={() => setOpen((o) => !o)}
+          >
             Toggle popover
           </button>
           <DatePicker

package/src/stories/kit/components/DateRangePicker.stories.tsx

@@ -47,9 +47,21 @@ export const DisabledSingleDates: Story = {
   render: () => {
     function Demo() {
       const today = new Date();
-      const d1 = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      const d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-      const d3 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      const d1 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate(),
+      );
+      const d2 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 1,
+      );
+      const d3 = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 7,
+      );
       const [value, setValue] = React.useState<DateRange | null>(null);
       return (
         <div className="p-6 space-y-4">
@@ -61,7 +73,11 @@ export const DisabledSingleDates: Story = {
                 : '—'}
             </div>
           </div>
-          <DateRangePicker value={value} onChange={setValue} disabledDates={[d1, d2, d3]} />
+          <DateRangePicker
+            value={value}
+            onChange={setValue}
+            disabledDates={[d1, d2, d3]}
+          />
         </div>
       );
     }
@@ -74,9 +90,18 @@ export const DisabledDateRanges: Story = {
   render: () => {
     function Demo() {
       const base = new Date();
-      const range1 = { from: new Date(base.getFullYear(), base.getMonth(), 10), to: new Date(base.getFullYear(), base.getMonth(), 15) };
-      const range2 = { from: new Date(base.getFullYear(), base.getMonth(), 20), to: new Date(base.getFullYear(), base.getMonth(), 22) };
-      const [value, setValue] = React.useState<DateRange | null>({ from: range1.from, to: range1.from });
+      const range1 = {
+        from: new Date(base.getFullYear(), base.getMonth(), 10),
+        to: new Date(base.getFullYear(), base.getMonth(), 15),
+      };
+      const range2 = {
+        from: new Date(base.getFullYear(), base.getMonth(), 20),
+        to: new Date(base.getFullYear(), base.getMonth(), 22),
+      };
+      const [value, setValue] = React.useState<DateRange | null>({
+        from: range1.from,
+        to: range1.from,
+      });
       return (
         <div className="p-6 space-y-4">
           <div>
@@ -87,7 +112,11 @@ export const DisabledDateRanges: Story = {
                 : '—'}
             </div>
           </div>
-          <DateRangePicker value={value} onChange={setValue} disabledDates={[range1, range2]} />
+          <DateRangePicker
+            value={value}
+            onChange={setValue}
+            disabledDates={[range1, range2]}
+          />
         </div>
       );
     }
@@ -102,7 +131,10 @@ export const WithConstraints: Story = {
       const now = new Date();
       const minDate = new Date(now.getFullYear(), now.getMonth(), 1);
       const maxDate = new Date(now.getFullYear(), now.getMonth(), 28);
-      const [value, setValue] = React.useState<DateRange | null>({ from: minDate, to: maxDate });
+      const [value, setValue] = React.useState<DateRange | null>({
+        from: minDate,
+        to: maxDate,
+      });
       return (
         <div className="p-6 space-y-4">
           <div>
@@ -113,7 +145,12 @@ export const WithConstraints: Story = {
                 : '—'}
             </div>
           </div>
-          <DateRangePicker value={value} onChange={setValue} minDate={minDate} maxDate={maxDate} />
+          <DateRangePicker
+            value={value}
+            onChange={setValue}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
         </div>
       );
     }
@@ -133,7 +170,11 @@ export const PresetsPanelApplyMode: Story = {
       const [open, setOpen] = React.useState<boolean>(false);
       return (
         <div className="p-6 space-y-4">
-          <button type="button" className="underline text-sm" onClick={() => setOpen((o) => !o)}>
+          <button
+            type="button"
+            className="underline text-sm"
+            onClick={() => setOpen((o) => !o)}
+          >
             Toggle popover
           </button>
           <DateRangePicker

package/src/stories/kit/components/Login.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Login } from '../../../kit/components/login/Login';
-import { FormBuilder, type FormBuilderSectionConfig } from '../../../kit/builder/form/components';
+import { FormBuilder } from '../../../kit/builder/form/components';
 import { z } from 'zod';
 import { Button } from '../../../shadcn/ui/button';
+import type { FormBuilderSectionConfig } from '@/kit/builder/form';
 
 const meta: Meta<typeof Login> = {
   title: 'Kit/Components/Login',
@@ -44,7 +45,11 @@ const handleSubmit = async (data: Record<string, unknown>) => {
 function GoogleIcon() {
   return (
     <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden>
-      <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.2 1.3-1.7 3.9-5.5 3.9-3.3 0-6-2.7-6-6s2.7-6 6-6c1.9 0 3.2.8 3.9 1.5l2.7-2.6C16.9 3 14.7 2 12 2 6.9 2 2.7 6.2 2.7 11.3S6.9 20.7 12 20.7c6 0 9.9-4.2 9.9-10.1 0-.7-.1-1.2-.2-1.7H12z" />
+      <title>Google</title>
+      <path
+        fill="#EA4335"
+        d="M12 10.2v3.9h5.5c-.2 1.3-1.7 3.9-5.5 3.9-3.3 0-6-2.7-6-6s2.7-6 6-6c1.9 0 3.2.8 3.9 1.5l2.7-2.6C16.9 3 14.7 2 12 2 6.9 2 2.7 6.2 2.7 11.3S6.9 20.7 12 20.7c6 0 9.9-4.2 9.9-10.1 0-.7-.1-1.2-.2-1.7H12z"
+      />
     </svg>
   );
 }
@@ -52,6 +57,7 @@ function GoogleIcon() {
 function MicrosoftIcon() {
   return (
     <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden>
+      <title>Microsoft</title>
       <path fill="#F25022" d="M11.5 11.5H2.5V2.5h9z" />
       <path fill="#7FBA00" d="M21.5 11.5h-9V2.5h9z" />
       <path fill="#00A4EF" d="M11.5 21.5H2.5v-9h9z" />

package/src/stories/kit/components/MonthPicker.stories.tsx

@@ -18,13 +18,20 @@ type Story = StoryObj<typeof MonthPicker>;
 export const Basic: Story = {
   name: 'Basic',
   render: () => {
-    const [selected, setSelected] = React.useState<Date | undefined>(new Date());
+    const [selected, setSelected] = React.useState<Date | undefined>(
+      new Date(),
+    );
 
     return (
       <div className="p-6">
         <div className="mb-4">
           <div className="text-sm text-muted-foreground">Selected month</div>
-          <div className="font-medium">{selected?.toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
+          <div className="font-medium">
+            {selected?.toLocaleString(undefined, {
+              month: 'long',
+              year: 'numeric',
+            })}
+          </div>
         </div>
         <MonthPicker
           selectedMonth={selected}
@@ -46,7 +53,9 @@ export const Basic: Story = {
 export const WithConstraints: Story = {
   name: 'With constraints',
   render: () => {
-    const [selected, setSelected] = React.useState<Date | undefined>(new Date());
+    const [selected, setSelected] = React.useState<Date | undefined>(
+      new Date(),
+    );
 
     const now = new Date();
     const minDate = new Date(now.getFullYear(), 2); // Mar this year
@@ -60,7 +69,12 @@ export const WithConstraints: Story = {
       <div className="p-6 space-y-4">
         <div>
           <div className="text-sm text-muted-foreground">Selected month</div>
-          <div className="font-medium">{selected?.toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
+          <div className="font-medium">
+            {selected?.toLocaleString(undefined, {
+              month: 'long',
+              year: 'numeric',
+            })}
+          </div>
         </div>
         <MonthPicker
           selectedMonth={selected}
@@ -69,10 +83,16 @@ export const WithConstraints: Story = {
           maxDate={maxDate}
           disabledDates={disabledDates}
           callbacks={{ yearLabel: (y) => `FY ${y}`, monthLabel: (m) => m.name }}
-          variant={{ calendar: { main: 'ghost', selected: 'default' }, chevrons: 'outline' }}
+          variant={{
+            calendar: { main: 'ghost', selected: 'default' },
+            chevrons: 'outline',
+          }}
         />
         <div className="text-xs text-muted-foreground">
-          Allowed months: {minDate.toLocaleString(undefined, { month: 'short' })} - {maxDate.toLocaleString(undefined, { month: 'short' })} ({minDate.getFullYear()})
+          Allowed months:{' '}
+          {minDate.toLocaleString(undefined, { month: 'short' })} -{' '}
+          {maxDate.toLocaleString(undefined, { month: 'short' })} (
+          {minDate.getFullYear()})
         </div>
       </div>
     );

package/src/stories/kit/components/MonthRangePicker.stories.tsx

@@ -18,7 +18,9 @@ type Story = StoryObj<typeof MonthRangePicker>;
 export const Basic: Story = {
   name: 'Basic',
   render: () => {
-    const [range, setRange] = React.useState<{ start: Date; end: Date } | undefined>({
+    const [range, setRange] = React.useState<
+      { start: Date; end: Date } | undefined
+    >({
       start: new Date(new Date().getFullYear(), 0),
       end: new Date(new Date().getFullYear(), 11),
     });
@@ -45,7 +47,9 @@ export const Basic: Story = {
 export const WithQuickSelectorsAndConstraints: Story = {
   name: 'With quick selectors + constraints',
   render: () => {
-    const [range, setRange] = React.useState<{ start: Date; end: Date } | undefined>();
+    const [range, setRange] = React.useState<
+      { start: Date; end: Date } | undefined
+    >();
 
     const now = new Date();
     const minDate = new Date(now.getFullYear() - 1, 0); // Jan last year
@@ -64,7 +68,10 @@ export const WithQuickSelectorsAndConstraints: Story = {
       },
       {
         label: 'Last 6 months',
-        startMonth: new Date(now.getFullYear(), Math.max(0, now.getMonth() - 5)),
+        startMonth: new Date(
+          now.getFullYear(),
+          Math.max(0, now.getMonth() - 5),
+        ),
         endMonth: new Date(now.getFullYear(), now.getMonth()),
       },
     ];
@@ -87,10 +94,22 @@ export const WithQuickSelectorsAndConstraints: Story = {
           quickSelectors={customSelectors}
           showQuickSelectors
           callbacks={{ yearLabel: (y) => `${y}` }}
-          variant={{ calendar: { main: 'ghost', selected: 'default' }, chevrons: 'outline' }}
+          variant={{
+            calendar: { main: 'ghost', selected: 'default' },
+            chevrons: 'outline',
+          }}
         />
         <div className="text-xs text-muted-foreground">
-          Allowed: {minDate.toLocaleString(undefined, { month: 'short', year: 'numeric' })} → {maxDate.toLocaleString(undefined, { month: 'short', year: 'numeric' })}
+          Allowed:{' '}
+          {minDate.toLocaleString(undefined, {
+            month: 'short',
+            year: 'numeric',
+          })}{' '}
+          →{' '}
+          {maxDate.toLocaleString(undefined, {
+            month: 'short',
+            year: 'numeric',
+          })}
         </div>
       </div>
     );

package/src/stories/kit/components/TimePicker.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import * as React from 'react'
-import { TimePicker } from '../../../kit/components/timepicker/TimePicker'
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { TimePicker } from '../../../kit/components/timepicker/TimePicker';
 
 const meta: Meta<typeof TimePicker> = {
   title: 'Kit/Components/TimePicker',
@@ -9,11 +9,11 @@ const meta: Meta<typeof TimePicker> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof TimePicker>
+type Story = StoryObj<typeof TimePicker>;
 
 export const Basic: Story = {
   name: 'Basic (HH:mm, 24h)',
@@ -22,19 +22,21 @@ export const Basic: Story = {
     hourCycle: 24,
   },
   render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date())
+    const [value, setValue] = React.useState<Date | null>(new Date());
 
     return (
       <div className="p-6 space-y-4">
         <div>
           <div className="text-sm text-muted-foreground">Selected</div>
-          <div className="font-medium">{value?.toLocaleTimeString?.() ?? '—'}</div>
+          <div className="font-medium">
+            {value?.toLocaleTimeString?.() ?? '—'}
+          </div>
         </div>
         <TimePicker {...args} value={value} onChange={setValue} />
       </div>
-    )
+    );
   },
-}
+};
 
 export const HourOnly12h: Story = {
   name: 'Hour only (12h)',
@@ -43,14 +45,14 @@ export const HourOnly12h: Story = {
     hourCycle: 12,
   },
   render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date())
+    const [value, setValue] = React.useState<Date | null>(new Date());
     return (
       <div className="p-6 space-y-4">
         <TimePicker {...args} value={value} onChange={setValue} />
       </div>
-    )
+    );
   },
-}
+};
 
 export const WithSeconds: Story = {
   name: 'With seconds (HH:mm:ss, 24h)',
@@ -59,11 +61,11 @@ export const WithSeconds: Story = {
     hourCycle: 24,
   },
   render: (args) => {
-    const [value, setValue] = React.useState<Date | null>(new Date())
+    const [value, setValue] = React.useState<Date | null>(new Date());
     return (
       <div className="p-6 space-y-4">
         <TimePicker {...args} value={value} onChange={setValue} />
       </div>
-    )
+    );
   },
-}
+};