@refraction-ui/astro 0.14.0 → 0.15.1

package/dist/astro-radio/RadioGroup.stories.ts

@@ -0,0 +1,25 @@
+import Component from './RadioGroup.astro'
+
+const meta = {
+  title: 'Astro/RadioGroup',
+  component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' },
+    disabled: { control: 'boolean' },
+    orientation: { control: 'text' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: '',
+    name: '',
+    disabled: false,
+    orientation: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-radio/RadioItem.stories.ts

@@ -0,0 +1,23 @@
+import Component from './RadioItem.astro'
+
+const meta = {
+  title: 'Astro/RadioItem',
+  component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: '',
+    disabled: false,
+    checked: false,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-reaction-bar/ReactionBar.astro

@@ -35,7 +35,7 @@ const api = createReactionBar({ reactions })
   aria-label="Reactions"
   {...props}
 >
-  {api.reactions.map((reaction) => (
+  {(api.reactions || []).map((reaction) => (
     <button
       type="button"
       data-rfr-rb-emoji={reaction.emoji}

package/dist/astro-reaction-bar/ReactionBar.stories.ts

@@ -1,12 +1,19 @@
 import Component from './ReactionBar.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/ReactionBar',
   component: Component,
+  argTypes: {
+    reactions: { control: 'text' },
+    showAddButton: { control: 'boolean' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    reactions: '',
+    showAddButton: false,
+  },
+}

package/dist/astro-resizable-layout/ResizableDivider.stories.ts

@@ -0,0 +1,19 @@
+import Component from './ResizableDivider.astro'
+
+const meta = {
+  title: 'Astro/ResizableDivider',
+  component: Component,
+  argTypes: {
+    index: { control: 'number' },
+    orientation: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    index: 0,
+    orientation: '',
+  },
+}

package/dist/astro-resizable-layout/ResizableLayout.stories.ts

@@ -1,12 +1,27 @@
 import Component from './ResizableLayout.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/ResizableLayout',
   component: Component,
+  argTypes: {
+    orientation: { control: 'text' },
+    defaultSizes: { control: 'number' },
+    minSizes: { control: 'number' },
+    maxSizes: { control: 'number' },
+    persistKey: { control: 'text' },
+    default: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    orientation: '',
+    defaultSizes: 0,
+    minSizes: 0,
+    maxSizes: 0,
+    persistKey: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-resizable-layout/ResizablePane.stories.ts

@@ -0,0 +1,21 @@
+import Component from './ResizablePane.astro'
+
+const meta = {
+  title: 'Astro/ResizablePane',
+  component: Component,
+  argTypes: {
+    index: { control: 'number' },
+    orientation: { control: 'text' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    index: 0,
+    orientation: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-rich-editor/RichEditor.stories.ts

@@ -1,12 +1,29 @@
 import Component from './RichEditor.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/RichEditor',
   component: Component,
+  argTypes: {
+    content: { control: 'text' },
+    placeholder: { control: 'text' },
+    readOnly: { control: 'boolean' },
+    maxLength: { control: 'number' },
+    showToolbar: { control: 'boolean' },
+    showCount: { control: 'boolean' },
+    name: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    content: '',
+    placeholder: '',
+    readOnly: false,
+    maxLength: 0,
+    showToolbar: false,
+    showCount: false,
+    name: '',
+  },
+}

package/dist/astro-search-bar/SearchBar.stories.ts

@@ -1,12 +1,23 @@
 import Component from './SearchBar.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/SearchBar',
   component: Component,
+  argTypes: {
+    placeholder: { control: 'text' },
+    loading: { control: 'boolean' },
+    debounceMs: { control: 'number' },
+    default: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    placeholder: '',
+    loading: false,
+    debounceMs: 0,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-search-bar/SearchResultItem.stories.ts

@@ -0,0 +1,17 @@
+import Component from './SearchResultItem.astro'
+
+const meta = {
+  title: 'Astro/SearchResultItem',
+  component: Component,
+  argTypes: {
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-search-bar/SearchResults.stories.ts

@@ -0,0 +1,17 @@
+import Component from './SearchResults.astro'
+
+const meta = {
+  title: 'Astro/SearchResults',
+  component: Component,
+  argTypes: {
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-segmented-control/SegmentedControl.stories.ts

@@ -0,0 +1,23 @@
+import Component from './SegmentedControl.astro'
+
+const meta = {
+  title: 'Astro/SegmentedControl',
+  component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'default', 'lg', 'icon'] },
+    name: { control: 'text' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: '',
+    size: 'default',
+    name: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-segmented-control/SegmentedControlItem.stories.ts

@@ -0,0 +1,25 @@
+import Component from './SegmentedControlItem.astro'
+
+const meta = {
+  title: 'Astro/SegmentedControlItem',
+  component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'default', 'lg', 'icon'] },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: '',
+    size: 'default',
+    checked: false,
+    disabled: false,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-select/Select.stories.ts

@@ -1,12 +1,25 @@
 import Component from './Select.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/Select',
   component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    name: { control: 'text' },
+    default: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    value: '',
+    placeholder: '',
+    disabled: false,
+    name: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-select/SelectContent.stories.ts

@@ -0,0 +1,17 @@
+import Component from './SelectContent.astro'
+
+const meta = {
+  title: 'Astro/SelectContent',
+  component: Component,
+  argTypes: {
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-select/SelectItem.stories.ts

@@ -0,0 +1,23 @@
+import Component from './SelectItem.astro'
+
+const meta = {
+  title: 'Astro/SelectItem',
+  component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    disabled: { control: 'boolean' },
+    selected: { control: 'boolean' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: '',
+    disabled: false,
+    selected: false,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-select/SelectTrigger.stories.ts

@@ -0,0 +1,21 @@
+import Component from './SelectTrigger.astro'
+
+const meta = {
+  title: 'Astro/SelectTrigger',
+  component: Component,
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'default', 'lg', 'icon'] },
+    placeholder: { control: 'text' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    size: 'default',
+    placeholder: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-separator/Separator.stories.ts

@@ -0,0 +1,23 @@
+import Component from './Separator.astro'
+
+const meta = {
+  title: 'Astro/Separator',
+  component: Component,
+  argTypes: {
+    orientation: { control: 'text' },
+    label: { control: 'text' },
+    decorative: { control: 'boolean' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    orientation: '',
+    label: '',
+    decorative: false,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-sidebar/Sidebar.astro

@@ -32,7 +32,7 @@ const classes = cn(
 
 <aside class={classes} {...api.ariaProps} {...props}>
   <div class="flex flex-col gap-4 p-4">
-    {api.visibleSections.map((section, sIdx) => (
+    {(api.visibleSections || []).map((section, sIdx) => (
       <div>
         {section.title && !collapsed && (
           <h3 class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">

package/dist/astro-sidebar/Sidebar.stories.ts

@@ -1,12 +1,23 @@
 import Component from './Sidebar.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/Sidebar',
   component: Component,
+  argTypes: {
+    sections: { control: 'text' },
+    currentPath: { control: 'text' },
+    collapsed: { control: 'boolean' },
+    userRoles: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    sections: '',
+    currentPath: '',
+    collapsed: false,
+    userRoles: '',
+  },
+}

package/dist/astro-skeleton/Skeleton.stories.ts

@@ -1,12 +1,23 @@
 import Component from './Skeleton.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/Skeleton',
   component: Component,
+  argTypes: {
+    shape: { control: 'text' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+    animate: { control: 'boolean' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    shape: '',
+    width: 0,
+    height: 0,
+    animate: false,
+  },
+}

package/dist/astro-skeleton/SkeletonText.stories.ts

@@ -0,0 +1,19 @@
+import Component from './SkeletonText.astro'
+
+const meta = {
+  title: 'Astro/SkeletonText',
+  component: Component,
+  argTypes: {
+    lines: { control: 'number' },
+    animate: { control: 'boolean' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    lines: 0,
+    animate: false,
+  },
+}

package/dist/astro-skip-to-content/SkipToContent.stories.ts

@@ -1,7 +1,5 @@
 import Component from './SkipToContent.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/SkipToContent',
   component: Component,
@@ -9,4 +7,6 @@ const meta = {
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {},
+}

package/dist/astro-slide-viewer/SlideViewer.stories.ts

@@ -1,12 +1,23 @@
 import Component from './SlideViewer.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/SlideViewer',
   component: Component,
+  argTypes: {
+    slides: { control: 'text' },
+    initialSlide: { control: 'number' },
+    size: { control: 'select', options: ['sm', 'default', 'lg', 'icon'] },
+    default: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    slides: '',
+    initialSlide: 0,
+    size: 'default',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-slot-picker/SlotPicker.astro

@@ -0,0 +1,105 @@
+---
+import {
+  createSlotPicker,
+  slotsForDay,
+  isSlotSelected,
+  slotPickerVariants,
+  slotPickerDayRowClass,
+  slotPickerDayVariants,
+  slotPickerGridClass,
+  slotPickerSlotVariants,
+  slotPickerSectionLabelClass,
+  slotPickerTimezoneClass,
+  type SlotDay,
+  type SlotSelection,
+} from '../slot-picker/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The list of days to show as chips. */
+  days: SlotDay[]
+  /** Map of dayId → available time slot strings. */
+  slotsByDay: Record<string, string[]>
+  /** The currently-selected day (determines which slots are shown). */
+  selectedDayId?: string
+  /** The full selection (day + slot) used to highlight the selected slot. */
+  value?: SlotSelection
+  /** Label shown beside the "Pick a time" heading (e.g. "Eastern Time"). */
+  timezoneLabel?: string
+  /** Slot strings that should be rendered as disabled. */
+  disabledSlots?: string[]
+}
+
+const {
+  days,
+  slotsByDay,
+  selectedDayId,
+  value,
+  timezoneLabel,
+  disabledSlots = [],
+  class: className,
+  ...rest
+} = Astro.props
+
+const currentSlots = selectedDayId ? slotsForDay(slotsByDay, selectedDayId) : []
+const { ariaProps, dataAttributes } = createSlotPicker()
+---
+
+<div class={cn(slotPickerVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Day row -->
+  <div>
+    <p class={slotPickerSectionLabelClass}>Pick a day</p>
+    <div role="radiogroup" aria-label="Pick a day" class={`${slotPickerDayRowClass} mt-2`}>
+      {
+        days.map((day) => {
+          const isSelected = selectedDayId === day.id
+          return (
+            <button
+              type="button"
+              role="radio"
+              aria-checked={isSelected}
+              data-state={isSelected ? 'checked' : 'unchecked'}
+              class={slotPickerDayVariants({ selected: isSelected ? 'true' : 'false' })}
+            >
+              <span class="text-xs">{day.weekday}</span>
+              <span class="text-base font-bold leading-none">{day.dayNum}</span>
+            </button>
+          )
+        })
+      }
+    </div>
+  </div>
+
+  <!-- Slot grid (only when a day is selected) -->
+  {selectedDayId && currentSlots.length > 0 && (
+    <div>
+      <p class={slotPickerSectionLabelClass}>
+        Pick a time
+        {timezoneLabel && <span class={slotPickerTimezoneClass}>{timezoneLabel}</span>}
+      </p>
+      <div role="radiogroup" aria-label="Pick a time" class={`${slotPickerGridClass} mt-2`}>
+        {
+          currentSlots.map((slot) => {
+            const isSlotActive = isSlotSelected(value, selectedDayId, slot)
+            const isDisabled = disabledSlots.includes(slot)
+            return (
+              <button
+                type="button"
+                role="radio"
+                aria-checked={isSlotActive}
+                aria-disabled={isDisabled || undefined}
+                data-state={isSlotActive ? 'checked' : 'unchecked'}
+                class={slotPickerSlotVariants({
+                  selected: isSlotActive ? 'true' : 'false',
+                  disabled: isDisabled ? 'true' : 'false',
+                })}
+              >
+                {slot}
+              </button>
+            )
+          })
+        }
+      </div>
+    </div>
+  )}
+</div>

package/dist/astro-slot-picker/index.ts

@@ -0,0 +1 @@
+export {}