@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-slide-viewer.js

@@ -0,0 +1,264 @@
+import {
+  Keys,
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-slide-viewer/dist/index.js
+import * as React from "react";
+
+// ../slide-viewer/dist/index.js
+function createSlideViewer(props) {
+  const { slides, initialSlide = 0, onSlideChange, onComplete } = props;
+  const totalSlides = slides.length;
+  const bookmarks = /* @__PURE__ */ new Map();
+  const state = {
+    currentSlide: Math.max(0, Math.min(initialSlide, totalSlides - 1)),
+    totalSlides,
+    bookmarks
+  };
+  function updateProgress() {
+    if (totalSlides <= 1) return 1;
+    return state.currentSlide / (totalSlides - 1);
+  }
+  function next() {
+    if (state.currentSlide < totalSlides - 1) {
+      state.currentSlide++;
+      api.progress = updateProgress();
+      onSlideChange?.(state.currentSlide);
+    } else {
+      onComplete?.();
+    }
+  }
+  function prev() {
+    if (state.currentSlide > 0) {
+      state.currentSlide--;
+      api.progress = updateProgress();
+      onSlideChange?.(state.currentSlide);
+    }
+  }
+  function goTo(index) {
+    if (index >= 0 && index < totalSlides) {
+      state.currentSlide = index;
+      api.progress = updateProgress();
+      onSlideChange?.(state.currentSlide);
+    }
+  }
+  function toggleBookmark(type) {
+    const current = state.currentSlide;
+    if (bookmarks.has(current) && bookmarks.get(current) === type) {
+      bookmarks.delete(current);
+    } else {
+      bookmarks.set(current, type);
+    }
+  }
+  function getBookmarks() {
+    const result = [];
+    for (const [slide, type] of bookmarks.entries()) {
+      result.push({ slide, type });
+    }
+    return result.sort((a, b) => a.slide - b.slide);
+  }
+  const keyboardHandlers = {
+    [Keys.ArrowRight]: (e) => {
+      e.preventDefault();
+      next();
+    },
+    [Keys.ArrowLeft]: (e) => {
+      e.preventDefault();
+      prev();
+    },
+    [Keys.Escape]: (e) => {
+      e.preventDefault();
+    }
+  };
+  function getSlideAriaProps() {
+    const slide = slides[state.currentSlide];
+    return {
+      role: "region",
+      "aria-roledescription": "slide",
+      "aria-label": `Slide ${state.currentSlide + 1} of ${totalSlides}: ${slide?.type ?? "unknown"} slide`,
+      "aria-live": "polite"
+    };
+  }
+  const api = {
+    state,
+    next,
+    prev,
+    goTo,
+    toggleBookmark,
+    getBookmarks,
+    progress: updateProgress(),
+    keyboardHandlers,
+    getSlideAriaProps
+  };
+  return api;
+}
+var slideViewerTokens = {
+  name: "slide-viewer",
+  tokens: {
+    bg: { variable: "--rfr-slide-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-slide-fg", fallback: "hsl(var(--foreground))" },
+    progressBg: { variable: "--rfr-slide-progress-bg", fallback: "hsl(var(--primary))" },
+    progressTrack: { variable: "--rfr-slide-progress-track", fallback: "hsl(var(--muted))" },
+    badgeBg: { variable: "--rfr-slide-badge-bg", fallback: "hsl(var(--secondary))" }
+  }
+};
+var slideViewerVariants = cva({
+  base: "flex flex-col h-full w-full relative overflow-hidden",
+  variants: {
+    size: {
+      compact: "max-w-2xl",
+      default: "max-w-4xl",
+      full: "max-w-none"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var slideViewerProgressBarVariants = cva({
+  base: "h-1 w-full bg-muted rounded-full overflow-hidden",
+  variants: {
+    position: {
+      top: "rounded-none",
+      bottom: "rounded-none",
+      inline: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    position: "top"
+  }
+});
+var slideTypeBadgeVariants = cva({
+  base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+  variants: {
+    type: {
+      lesson: "bg-blue-100 text-blue-800",
+      quiz: "bg-purple-100 text-purple-800",
+      exercise: "bg-green-100 text-green-800",
+      intro: "bg-gray-100 text-gray-800",
+      summary: "bg-orange-100 text-orange-800"
+    }
+  },
+  defaultVariants: {
+    type: "lesson"
+  }
+});
+
+// ../react-slide-viewer/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var SlideViewer = React.forwardRef(
+  function SlideViewer2({
+    slides,
+    initialSlide,
+    onSlideChange,
+    onComplete,
+    className,
+    size,
+    renderSlide
+  }, ref) {
+    const [, setTick] = React.useState(0);
+    const rerender = () => setTick((t) => t + 1);
+    const apiRef = React.useRef(
+      createSlideViewer({ slides, initialSlide, onSlideChange, onComplete })
+    );
+    const api = apiRef.current;
+    const containerClasses = cn(slideViewerVariants({ size }), className);
+    const currentSlide = slides[api.state.currentSlide];
+    const slideAriaProps = api.getSlideAriaProps();
+    function handleKeyDown(event) {
+      const handler = api.keyboardHandlers[event.key];
+      if (!handler) return;
+      handler(event);
+      rerender();
+    }
+    function handlePrev() {
+      api.prev();
+      rerender();
+    }
+    function handleNext() {
+      api.next();
+      rerender();
+    }
+    function handleBookmark(type) {
+      api.toggleBookmark(type);
+      rerender();
+    }
+    const isBookmarked = api.state.bookmarks.has(api.state.currentSlide);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: containerClasses,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: slideViewerProgressBarVariants({ position: "top" }), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-primary transition-all duration-300",
+              style: { width: `${api.progress * 100}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              currentSlide && /* @__PURE__ */ jsx("span", { className: slideTypeBadgeVariants({ type: currentSlide.type }), children: currentSlide.type }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                api.state.currentSlide + 1,
+                " / ",
+                api.state.totalSlides
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleBookmark("important"),
+                className: cn(
+                  "px-2 py-1 rounded text-xs transition-colors",
+                  isBookmarked ? "bg-yellow-100 text-yellow-800" : "hover:bg-muted text-muted-foreground"
+                ),
+                "aria-pressed": isBookmarked,
+                "aria-label": "Toggle bookmark",
+                children: isBookmarked ? "Bookmarked" : "Bookmark"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-6", ...slideAriaProps, children: currentSlide && (renderSlide ? renderSlide(currentSlide, api.state.currentSlide) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: currentSlide.content } })) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handlePrev,
+                disabled: api.state.currentSlide === 0,
+                className: "px-4 py-2 rounded text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+                "aria-label": "Previous slide",
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleNext,
+                className: "px-4 py-2 rounded text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+                "aria-label": api.state.currentSlide === api.state.totalSlides - 1 ? "Complete" : "Next slide",
+                children: api.state.currentSlide === api.state.totalSlides - 1 ? "Complete" : "Next"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  SlideViewer,
+  slideViewerProgressBarVariants as progressBarVariants,
+  slideTypeBadgeVariants,
+  slideViewerTokens,
+  slideViewerVariants
+};
+//# sourceMappingURL=react-slide-viewer.js.map

package/dist/react-slide-viewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../slide-viewer/src/slide-viewer.ts", "../../slide-viewer/src/slide-viewer.styles.ts", "../../react-slide-viewer/src/SlideViewer.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys } from '@refraction-ui/shared'\n\nexport type SlideType = 'lesson' | 'quiz' | 'exercise' | 'intro' | 'summary'\n\nexport type BookmarkType = 'important' | 'difficult' | 'to-revise'\n\nexport interface SlideData {\n  id: string\n  type: SlideType\n  content: string\n}\n\nexport interface SlideViewerProps {\n  slides: SlideData[]\n  initialSlide?: number\n  onSlideChange?: (index: number) => void\n  onComplete?: () => void\n}\n\nexport interface SlideViewerState {\n  currentSlide: number\n  totalSlides: number\n  bookmarks: Map<number, BookmarkType>\n}\n\nexport interface SlideViewerAPI {\n  /** Current viewer state */\n  state: SlideViewerState\n  /** Navigate to the next slide */\n  next: () => void\n  /** Navigate to the previous slide */\n  prev: () => void\n  /** Navigate to a specific slide index */\n  goTo: (index: number) => void\n  /** Toggle a bookmark on the current slide */\n  toggleBookmark: (type: BookmarkType) => void\n  /** Get all bookmarks as an array of entries */\n  getBookmarks: () => Array<{ slide: number; type: BookmarkType }>\n  /** Current progress as a number between 0 and 1 */\n  progress: number\n  /** Keyboard handlers for slide navigation */\n  keyboardHandlers: KeyboardHandlerMap\n  /** ARIA props for the current slide */\n  getSlideAriaProps: () => Partial<AccessibilityProps> & { 'aria-roledescription'?: string }\n}\n\n/**\n * Create a headless slide viewer.\n *\n * Manages slide navigation state, bookmarks, progress tracking,\n * and keyboard navigation. Framework wrappers handle rendering.\n */\nexport function createSlideViewer(props: SlideViewerProps): SlideViewerAPI {\n  const { slides, initialSlide = 0, onSlideChange, onComplete } = props\n\n  const totalSlides = slides.length\n  const bookmarks = new Map<number, BookmarkType>()\n\n  const state: SlideViewerState = {\n    currentSlide: Math.max(0, Math.min(initialSlide, totalSlides - 1)),\n    totalSlides,\n    bookmarks,\n  }\n\n  function updateProgress(): number {\n    if (totalSlides <= 1) return 1\n    return state.currentSlide / (totalSlides - 1)\n  }\n\n  function next() {\n    if (state.currentSlide < totalSlides - 1) {\n      state.currentSlide++\n      api.progress = updateProgress()\n      onSlideChange?.(state.currentSlide)\n    } else {\n      // Already on the last slide — trigger complete\n      onComplete?.()\n    }\n  }\n\n  function prev() {\n    if (state.currentSlide > 0) {\n      state.currentSlide--\n      api.progress = updateProgress()\n      onSlideChange?.(state.currentSlide)\n    }\n  }\n\n  function goTo(index: number) {\n    if (index >= 0 && index < totalSlides) {\n      state.currentSlide = index\n      api.progress = updateProgress()\n      onSlideChange?.(state.currentSlide)\n    }\n  }\n\n  function toggleBookmark(type: BookmarkType) {\n    const current = state.currentSlide\n    if (bookmarks.has(current) && bookmarks.get(current) === type) {\n      bookmarks.delete(current)\n    } else {\n      bookmarks.set(current, type)\n    }\n  }\n\n  function getBookmarks(): Array<{ slide: number; type: BookmarkType }> {\n    const result: Array<{ slide: number; type: BookmarkType }> = []\n    for (const [slide, type] of bookmarks.entries()) {\n      result.push({ slide, type })\n    }\n    return result.sort((a, b) => a.slide - b.slide)\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.ArrowRight]: (e) => {\n      e.preventDefault()\n      next()\n    },\n    [Keys.ArrowLeft]: (e) => {\n      e.preventDefault()\n      prev()\n    },\n    [Keys.Escape]: (e) => {\n      e.preventDefault()\n    },\n  }\n\n  function getSlideAriaProps(): Partial<AccessibilityProps> & { 'aria-roledescription'?: string } {\n    const slide = slides[state.currentSlide]\n    return {\n      role: 'region',\n      'aria-roledescription': 'slide',\n      'aria-label': `Slide ${state.currentSlide + 1} of ${totalSlides}: ${slide?.type ?? 'unknown'} slide`,\n      'aria-live': 'polite',\n    }\n  }\n\n  const api: SlideViewerAPI = {\n    state,\n    next,\n    prev,\n    goTo,\n    toggleBookmark,\n    getBookmarks,\n    progress: updateProgress(),\n    keyboardHandlers,\n    getSlideAriaProps,\n  }\n\n  return api\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const slideViewerTokens: TokenContract = {\n  name: 'slide-viewer',\n  tokens: {\n    bg: { variable: '--rfr-slide-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-slide-fg', fallback: 'hsl(var(--foreground))' },\n    progressBg: { variable: '--rfr-slide-progress-bg', fallback: 'hsl(var(--primary))' },\n    progressTrack: { variable: '--rfr-slide-progress-track', fallback: 'hsl(var(--muted))' },\n    badgeBg: { variable: '--rfr-slide-badge-bg', fallback: 'hsl(var(--secondary))' },\n  },\n}\n\nexport const slideViewerVariants = cva({\n  base: 'flex flex-col h-full w-full relative overflow-hidden',\n  variants: {\n    size: {\n      compact: 'max-w-2xl',\n      default: 'max-w-4xl',\n      full: 'max-w-none',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nconst slideViewerProgressBarVariants = cva({\n  base: 'h-1 w-full bg-muted rounded-full overflow-hidden',\n  variants: {\n    position: {\n      top: 'rounded-none',\n      bottom: 'rounded-none',\n      inline: 'rounded-full',\n    },\n  },\n  defaultVariants: {\n    position: 'top',\n  },\n})\n\nexport { slideViewerProgressBarVariants as progressBarVariants }\n\nexport const slideTypeBadgeVariants = cva({\n  base: 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',\n  variants: {\n    type: {\n      lesson: 'bg-blue-100 text-blue-800',\n      quiz: 'bg-purple-100 text-purple-800',\n      exercise: 'bg-green-100 text-green-800',\n      intro: 'bg-gray-100 text-gray-800',\n      summary: 'bg-orange-100 text-orange-800',\n    },\n  },\n  defaultVariants: {\n    type: 'lesson',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSlideViewer,\n  slideViewerVariants,\n  progressBarVariants,\n  slideTypeBadgeVariants,\n  type SlideData,\n  type BookmarkType,\n  type SlideType,\n} from '@refraction-ui/slide-viewer'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { SlideData, BookmarkType, SlideType }\n\nexport interface SlideViewerProps {\n  slides: SlideData[]\n  initialSlide?: number\n  onSlideChange?: (index: number) => void\n  onComplete?: () => void\n  className?: string\n  size?: 'compact' | 'default' | 'full'\n  /** Render function for custom slide content */\n  renderSlide?: (slide: SlideData, index: number) => React.ReactNode\n}\n\n/**\n * SlideViewer component — slide-based content viewer with navigation,\n * progress bar, type badges, and bookmark support.\n *\n * Uses the headless @refraction-ui/slide-viewer core for state and navigation.\n */\nexport const SlideViewer = React.forwardRef<HTMLDivElement, SlideViewerProps>(\n  function SlideViewer(\n    {\n      slides,\n      initialSlide,\n      onSlideChange,\n      onComplete,\n      className,\n      size,\n      renderSlide,\n    },\n    ref,\n  ) {\n    const [, setTick] = React.useState(0)\n    const rerender = () => setTick((t) => t + 1)\n\n    const apiRef = React.useRef(\n      createSlideViewer({ slides, initialSlide, onSlideChange, onComplete }),\n    )\n    const api = apiRef.current\n\n    const containerClasses = cn(slideViewerVariants({ size }), className)\n    const currentSlide = slides[api.state.currentSlide]\n    const slideAriaProps = api.getSlideAriaProps()\n    // The core's keyboard handlers mutate state in place; re-render after a\n    // handled key so the counter, progress bar, and buttons stay in sync.\n    function handleKeyDown(event: KeyboardEvent) {\n      const handler =\n        api.keyboardHandlers[event.key as keyof typeof api.keyboardHandlers]\n      if (!handler) return\n      handler(event)\n      rerender()\n    }\n\n    function handlePrev() {\n      api.prev()\n      rerender()\n    }\n\n    function handleNext() {\n      api.next()\n      rerender()\n    }\n\n    function handleBookmark(type: BookmarkType) {\n      api.toggleBookmark(type)\n      rerender()\n    }\n\n    const isBookmarked = api.state.bookmarks.has(api.state.currentSlide)\n\n    return (\n      <div\n        ref={ref}\n        className={containerClasses}\n        onKeyDown={handleKeyDown as unknown as React.KeyboardEventHandler}\n        tabIndex={0}\n      >\n        {/* Progress bar */}\n        <div className={progressBarVariants({ position: 'top' })}>\n          <div\n            className=\"h-full bg-primary transition-all duration-300\"\n            style={{ width: `${api.progress * 100}%` }}\n          />\n        </div>\n\n        {/* Header with type badge and bookmark */}\n        <div className=\"flex items-center justify-between px-4 py-2 border-b\">\n          <div className=\"flex items-center gap-2\">\n            {currentSlide && (\n              <span className={slideTypeBadgeVariants({ type: currentSlide.type })}>\n                {currentSlide.type}\n              </span>\n            )}\n            <span className=\"text-sm text-muted-foreground\">\n              {api.state.currentSlide + 1} / {api.state.totalSlides}\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => handleBookmark('important')}\n            className={cn(\n              'px-2 py-1 rounded text-xs transition-colors',\n              isBookmarked\n                ? 'bg-yellow-100 text-yellow-800'\n                : 'hover:bg-muted text-muted-foreground',\n            )}\n            aria-pressed={isBookmarked}\n            aria-label=\"Toggle bookmark\"\n          >\n            {isBookmarked ? 'Bookmarked' : 'Bookmark'}\n          </button>\n        </div>\n\n        {/* Slide content */}\n        <div className=\"flex-1 overflow-auto p-6\" {...slideAriaProps}>\n          {currentSlide &&\n            (renderSlide\n              ? renderSlide(currentSlide, api.state.currentSlide)\n              : <div dangerouslySetInnerHTML={{ __html: currentSlide.content }} />)}\n        </div>\n\n        {/* Navigation buttons */}\n        <div className=\"flex items-center justify-between px-4 py-3 border-t\">\n          <button\n            type=\"button\"\n            onClick={handlePrev}\n            disabled={api.state.currentSlide === 0}\n            className=\"px-4 py-2 rounded text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n            aria-label=\"Previous slide\"\n          >\n            Previous\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleNext}\n            className=\"px-4 py-2 rounded text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors\"\n            aria-label={\n              api.state.currentSlide === api.state.totalSlides - 1\n                ? 'Complete'\n                : 'Next slide'\n            }\n          >\n            {api.state.currentSlide === api.state.totalSlides - 1 ? 'Complete' : 'Next'}\n          </button>\n        </div>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SlideViewer"]
+}

package/dist/react-slider.js

@@ -0,0 +1,105 @@
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-slider/dist/index.js
+import * as React from "react";
+
+// ../slider/dist/index.js
+function clampSliderValue(value, min = 0, max = 100) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function roundToStep(value, min = 0, step = 1) {
+  if (!step || step <= 0 || Number.isNaN(value)) return value;
+  const snapped = min + Math.round((value - min) / step) * step;
+  const decimals = (String(step).split(".")[1] ?? "").length;
+  return Number(snapped.toFixed(decimals));
+}
+function createSlider(props = {}) {
+  const min = props.min ?? 0;
+  const max = props.max ?? 100;
+  const step = props.step ?? 1;
+  const value = clampSliderValue(roundToStep(props.value ?? min, min, step), min, max);
+  const percentage = max === min ? 0 : (value - min) / (max - min) * 100;
+  const ariaProps = {
+    role: "slider",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-orientation": "horizontal"
+  };
+  if (props.disabled) ariaProps["aria-disabled"] = true;
+  if (props["aria-label"]) ariaProps["aria-label"] = props["aria-label"];
+  return {
+    value,
+    min,
+    max,
+    step,
+    percentage,
+    ariaProps,
+    dataAttributes: {
+      "data-value": String(value),
+      "data-min": String(min),
+      "data-max": String(max)
+    }
+  };
+}
+
+// ../react-slider/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Slider = React.forwardRef(
+  function Slider2({
+    className,
+    variant: _variant,
+    value: controlledValue,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled,
+    onChange,
+    onValueChange,
+    ...props
+  }, ref) {
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React.useState(
+      () => clampSliderValue(roundToStep(defaultValue ?? min, min, step), min, max)
+    );
+    const api = createSlider({
+      value: isControlled ? controlledValue : internalValue,
+      min,
+      max,
+      step,
+      disabled,
+      "aria-label": props["aria-label"]
+    });
+    const handleChange = (event) => {
+      const next = clampSliderValue(roundToStep(Number(event.target.value), min, step), min, max);
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        ref,
+        min,
+        max,
+        step,
+        value: api.value,
+        disabled,
+        className: cn("w-full", className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        onChange: handleChange,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Slider
+};
+//# sourceMappingURL=react-slider.js.map

package/dist/react-slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../slider/src/slider.ts", "../../react-slider/src/slider.tsx"],
+  "sourcesContent": ["/**\n * @refraction-ui/slider — headless slider.\n *\n * Owns the *behavior* of a single-value range slider: min/max clamping,\n * step rounding, and keyboard increment/decrement semantics. It has NO UI\n * opinion — adapters render the control (a native `<input type=\"range\">` in\n * React, which already applies these same keyboard rules natively) and spread\n * the ARIA object.\n */\n\n/** Options for {@link createSlider}. */\nexport interface SliderProps {\n  /** Current value. Clamped into `[min, max]` and rounded to `step`. */\n  value?: number\n  /** Minimum selectable value (default 0). */\n  min?: number\n  /** Maximum selectable value (default 100). */\n  max?: number\n  /** Granularity between selectable values (default 1). */\n  step?: number\n  /** Disables the control. */\n  disabled?: boolean\n  /** Accessible label attached to the slider, when provided. */\n  'aria-label'?: string\n}\n\n/** The computed view of a slider control. */\nexport interface SliderAPI {\n  /** Normalized value (clamped + step-rounded). */\n  value: number\n  min: number\n  max: number\n  step: number\n  /** Value position within the range, 0–100. */\n  percentage: number\n  /** ARIA attributes for the slider element (`role=\"slider\"` + value attrs). */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/** Clamp a value into `[min, max]`. */\nexport function clampSliderValue(value: number, min = 0, max = 100): number {\n  if (Number.isNaN(value)) return min\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Round a value to the nearest multiple of `step`, offset from `min`.\n * Non-positive steps leave the value unchanged. The result is re-rounded to\n * the step's decimal precision to avoid float noise (e.g. 0.30000000000000004).\n */\nexport function roundToStep(value: number, min = 0, step = 1): number {\n  if (!step || step <= 0 || Number.isNaN(value)) return value\n  const snapped = min + Math.round((value - min) / step) * step\n  const decimals = (String(step).split('.')[1] ?? '').length\n  return Number(snapped.toFixed(decimals))\n}\n\n/**\n * Pure keyboard rule for a slider (WAI-ARIA slider pattern), shared by every\n * adapter that does NOT render a native range input (native inputs already\n * implement these keys):\n *\n * - ArrowRight / ArrowUp   → +step\n * - ArrowLeft  / ArrowDown → -step\n * - PageUp   / PageDown    → ±10×step\n * - Home / End             → min / max\n *\n * The result is clamped; unhandled keys return `current` unchanged.\n */\nexport function getSliderValueFromKey(\n  current: number,\n  key: string,\n  options: { min?: number; max?: number; step?: number } = {},\n): number {\n  const { min = 0, max = 100, step = 1 } = options\n  switch (key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      return clampSliderValue(current + step, min, max)\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      return clampSliderValue(current - step, min, max)\n    case 'PageUp':\n      return clampSliderValue(current + step * 10, min, max)\n    case 'PageDown':\n      return clampSliderValue(current - step * 10, min, max)\n    case 'Home':\n      return min\n    case 'End':\n      return max\n    default:\n      return current\n  }\n}\n\n/**\n * createSlider — the framework-agnostic view of a slider: normalized value,\n * percentage position, and the ARIA object (`role=\"slider\"`,\n * `aria-valuemin/max/now`). Adapters own the value state\n * (controlled/uncontrolled) and call this per render.\n */\nexport function createSlider(props: SliderProps = {}): SliderAPI {\n  const min = props.min ?? 0\n  const max = props.max ?? 100\n  const step = props.step ?? 1\n  const value = clampSliderValue(roundToStep(props.value ?? min, min, step), min, max)\n  const percentage = max === min ? 0 : ((value - min) / (max - min)) * 100\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'slider',\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': value,\n    'aria-orientation': 'horizontal',\n  }\n  if (props.disabled) ariaProps['aria-disabled'] = true\n  if (props['aria-label']) ariaProps['aria-label'] = props['aria-label']\n\n  return {\n    value,\n    min,\n    max,\n    step,\n    percentage,\n    ariaProps,\n    dataAttributes: {\n      'data-value': String(value),\n      'data-min': String(min),\n      'data-max': String(max),\n    },\n  }\n}\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport { createSlider, clampSliderValue, roundToStep } from '@refraction-ui/slider'\n\nexport interface SliderProps\n  extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'\n  > {\n  /** Current value (controlled). Pair with `onChange`/`onValueChange`. */\n  value?: number\n  /** Initial value for uncontrolled usage (defaults to `min`). */\n  defaultValue?: number\n  /** Minimum selectable value (default 0). */\n  min?: number\n  /** Maximum selectable value (default 100). */\n  max?: number\n  /** Granularity between selectable values (default 1). */\n  step?: number\n  /** Called with the new numeric value as the user moves the thumb. */\n  onChange?: (value: number) => void\n  /** Alias of `onChange`, matching the library-wide naming convention. */\n  onValueChange?: (value: number) => void\n  variant?: 'default'\n}\n\n/**\n * Slider — a single-value range control over a native\n * `<input type=\"range\">`. Value clamping, step rounding, and ARIA come from\n * the headless `@refraction-ui/slider` core; keyboard interaction is native\n * to the input (the core's `getSliderValueFromKey` pins the same rules for\n * non-native adapters).\n */\nexport const Slider = React.forwardRef<HTMLInputElement, SliderProps>(\n  function Slider(\n    {\n      className,\n      variant: _variant,\n      value: controlledValue,\n      defaultValue,\n      min = 0,\n      max = 100,\n      step = 1,\n      disabled,\n      onChange,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = controlledValue !== undefined\n    const [internalValue, setInternalValue] = React.useState(() =>\n      clampSliderValue(roundToStep(defaultValue ?? min, min, step), min, max),\n    )\n\n    const api = createSlider({\n      value: isControlled ? controlledValue : internalValue,\n      min,\n      max,\n      step,\n      disabled,\n      'aria-label': props['aria-label'],\n    })\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const next = clampSliderValue(roundToStep(Number(event.target.value), min, step), min, max)\n      if (!isControlled) setInternalValue(next)\n      onChange?.(next)\n      onValueChange?.(next)\n    }\n\n    return (\n      <input\n        type=\"range\"\n        ref={ref}\n        min={min}\n        max={max}\n        step={step}\n        value={api.value}\n        disabled={disabled}\n        className={cn('w-full', className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        onChange={handleChange}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;AA0CO,SAAS,iBAAiB,OAAe,MAAM,GAAG,MAAM,KAAa;AAC1E,MAAI,OAAO,MAAM,KAAK,EAAG,QAAO;AAChC,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAOO,SAAS,YAAY,OAAe,MAAM,GAAG,OAAO,GAAW;AACpE,MAAI,CAAC,QAAQ,QAAQ,KAAK,OAAO,MAAM,KAAK,EAAG,QAAO;AACtD,QAAM,UAAU,MAAM,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI;AACzD,QAAM,YAAY,OAAO,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC,KAAK,IAAI;AACpD,SAAO,OAAO,QAAQ,QAAQ,QAAQ,CAAC;AACzC;AA8CO,SAAS,aAAa,QAAqB,CAAA,GAAe;AAC/D,QAAM,MAAM,MAAM,OAAO;AACzB,QAAM,MAAM,MAAM,OAAO;AACzB,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,QAAQ,iBAAiB,YAAY,MAAM,SAAS,KAAK,KAAK,IAAI,GAAG,KAAK,GAAG;AACnF,QAAM,aAAa,QAAQ,MAAM,KAAM,QAAQ,QAAQ,MAAM,OAAQ;AAErE,QAAM,YAAuD;IAC3D,MAAM;IACN,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,oBAAoB;EAAA;AAEtB,MAAI,MAAM,SAAU,WAAU,eAAe,IAAI;AACjD,MAAI,MAAM,YAAY,EAAA,WAAa,YAAY,IAAI,MAAM,YAAY;AAErE,SAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA,gBAAgB;MACd,cAAc,OAAO,KAAK;MAC1B,YAAY,OAAO,GAAG;MACtB,YAAY,OAAO,GAAG;IAAA;EACxB;AAEJ;;;;ACpGO,IAAM,SAAe;EAC1B,SAASA,QACP;IACE;IACA,SAAS;IACT,OAAO;IACP;IACA,MAAM;IACN,MAAM;IACN,OAAO;IACP;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,eAAe,oBAAoB;AACzC,UAAM,CAAC,eAAe,gBAAgB,IAAU;MAAS,MACvD,iBAAiB,YAAY,gBAAgB,KAAK,KAAK,IAAI,GAAG,KAAK,GAAG;IAAA;AAGxE,UAAM,MAAM,aAAa;MACvB,OAAO,eAAe,kBAAkB;MACxC;MACA;MACA;MACA;MACA,cAAc,MAAM,YAAY;IAAA,CACjC;AAED,UAAM,eAAe,CAAC,UAA+C;AACnE,YAAM,OAAO,iBAAiB,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,KAAK,GAAG;AAC1F,UAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,iBAAW,IAAI;AACf,sBAAgB,IAAI;IACtB;AAEA,WACE;MAAC;MAAA;QACC,MAAK;QACL;QACA;QACA;QACA;QACA,OAAO,IAAI;QACX;QACA,WAAW,GAAG,UAAU,SAAS;QAChC,GAAG,IAAI;QACP,GAAG,IAAI;QACR,UAAU;QACT,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["Slider"]
+}

package/dist/react-slot-picker.js

@@ -0,0 +1,184 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-slot-picker/dist/index.js
+import * as React from "react";
+
+// ../slot-picker/dist/index.js
+function slotsForDay(slotsByDay, dayId) {
+  return slotsByDay[dayId] ?? [];
+}
+function isSlotSelected(value, dayId, slot) {
+  return value?.dayId === dayId && value?.slot === slot;
+}
+function createSlotPicker() {
+  return {
+    ariaProps: {
+      role: "group",
+      "aria-label": "Pick a time"
+    },
+    dataAttributes: {
+      "data-component": "slot-picker"
+    }
+  };
+}
+var slotPickerVariants = cva({
+  base: "flex flex-col gap-4",
+  variants: {},
+  defaultVariants: {}
+});
+var slotPickerDayRowClass = "flex items-center gap-2 overflow-x-auto pb-1";
+var slotPickerDayVariants = cva({
+  base: [
+    "inline-flex flex-col items-center justify-center rounded-lg px-3 py-2 min-w-[3.5rem]",
+    "text-sm font-medium cursor-pointer transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    selected: {
+      true: "bg-primary text-primary-foreground",
+      false: "bg-card border border-input text-foreground hover:bg-muted"
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+var slotPickerGridClass = "grid grid-cols-3 gap-2 sm:grid-cols-4";
+var slotPickerSlotVariants = cva({
+  base: [
+    "inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium",
+    "transition-colors cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+  ].join(" "),
+  variants: {
+    selected: {
+      true: "bg-primary text-primary-foreground border-primary",
+      false: "bg-card border-input text-foreground hover:bg-muted"
+    },
+    disabled: {
+      true: "opacity-40 pointer-events-none",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false",
+    disabled: "false"
+  }
+});
+var slotPickerSectionLabelClass = "text-sm font-semibold text-foreground";
+var slotPickerTimezoneClass = "text-xs text-muted-foreground ml-2";
+
+// ../react-slot-picker/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var SlotPicker = React.forwardRef(
+  function SlotPicker2({
+    days,
+    slotsByDay,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    timezoneLabel,
+    disabledSlots = [],
+    className,
+    ...props
+  }, ref) {
+    const isControlled = valueProp !== void 0;
+    const [internal, setInternal] = React.useState(
+      defaultValue
+    );
+    const value = isControlled ? valueProp : internal;
+    const selectedDayId = value?.dayId;
+    const handleDaySelect = React.useCallback(
+      (dayId) => {
+        const slots = slotsForDay(slotsByDay, dayId);
+        const keepSlot = value?.slot && slots.includes(value.slot) ? value.slot : void 0;
+        const next = keepSlot ? { dayId, slot: keepSlot } : void 0;
+        if (!isControlled) setInternal(next);
+        if (next) onChange?.(next);
+      },
+      [isControlled, onChange, slotsByDay, value]
+    );
+    const handleSlotSelect = React.useCallback(
+      (slot) => {
+        if (!selectedDayId) return;
+        const next = { dayId: selectedDayId, slot };
+        if (!isControlled) setInternal(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange, selectedDayId]
+    );
+    const api = createSlotPicker();
+    const currentSlots = selectedDayId ? slotsForDay(slotsByDay, selectedDayId) : [];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(slotPickerVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: slotPickerSectionLabelClass, children: "Pick a day" }),
+            /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Pick a day", className: cn(slotPickerDayRowClass, "mt-2"), children: days.map((day) => {
+              const isSelected = selectedDayId === day.id;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": isSelected,
+                  "data-state": isSelected ? "checked" : "unchecked",
+                  className: slotPickerDayVariants({
+                    selected: isSelected ? "true" : "false"
+                  }),
+                  onClick: () => handleDaySelect(day.id),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs", children: day.weekday }),
+                    /* @__PURE__ */ jsx("span", { className: "text-base font-bold leading-none", children: day.dayNum })
+                  ]
+                },
+                day.id
+              );
+            }) })
+          ] }),
+          selectedDayId && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("p", { className: slotPickerSectionLabelClass, children: [
+              "Pick a time",
+              timezoneLabel && /* @__PURE__ */ jsx("span", { className: slotPickerTimezoneClass, children: timezoneLabel })
+            ] }),
+            /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Pick a time", className: cn(slotPickerGridClass, "mt-2"), children: currentSlots.map((slot) => {
+              const isSelected = isSlotSelected(value, selectedDayId, slot);
+              const isDisabled = disabledSlots.includes(slot);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": isSelected,
+                  "aria-disabled": isDisabled || void 0,
+                  "data-state": isSelected ? "checked" : "unchecked",
+                  className: slotPickerSlotVariants({
+                    selected: isSelected ? "true" : "false",
+                    disabled: isDisabled ? "true" : "false"
+                  }),
+                  onClick: () => !isDisabled && handleSlotSelect(slot),
+                  children: slot
+                },
+                slot
+              );
+            }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  SlotPicker
+};
+//# sourceMappingURL=react-slot-picker.js.map

package/dist/react-slot-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../slot-picker/src/slot-picker.ts", "../../slot-picker/src/slot-picker.styles.ts", "../../react-slot-picker/src/slot-picker.tsx"],
+  "sourcesContent": ["/** A single day chip shown in the day-selector row. */\nexport type SlotDay = {\n  /** Unique identifier for the day (e.g. \"2024-06-14\"). */\n  id: string\n  /** Short weekday label (e.g. \"Fri\"). */\n  weekday: string\n  /** Day-of-month label (e.g. \"14\" or 14). */\n  dayNum: string | number\n}\n\n/** The currently-selected day + time slot pair. */\nexport type SlotSelection = {\n  /** The `id` of the selected day. */\n  dayId: string\n  /** The selected time slot string (e.g. \"10:00 AM\"). */\n  slot: string\n}\n\n/**\n * Return the list of available time slots for a given day.\n * Returns an empty array when `dayId` has no entry in `slotsByDay`.\n */\nexport function slotsForDay(\n  slotsByDay: Record<string, string[]>,\n  dayId: string,\n): string[] {\n  return slotsByDay[dayId] ?? []\n}\n\n/**\n * Check whether a specific slot in a specific day is currently selected.\n */\nexport function isSlotSelected(\n  value: SlotSelection | undefined,\n  dayId: string,\n  slot: string,\n): boolean {\n  return value?.dayId === dayId && value?.slot === slot\n}\n\nexport interface SlotPickerAPI {\n  /** ARIA attributes to spread on the root group element. */\n  ariaProps: { role: 'group'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic root props for a slot picker.\n *\n * Returns `role=\"group\"` with an accessible label and data attributes.\n * Adapters spread these onto their container element.\n */\nexport function createSlotPicker(): SlotPickerAPI {\n  return {\n    ariaProps: {\n      role: 'group',\n      'aria-label': 'Pick a time',\n    },\n    dataAttributes: {\n      'data-component': 'slot-picker',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Root wrapper for the entire slot picker (day row + slots grid). */\nexport const slotPickerVariants = cva({\n  base: 'flex flex-col gap-4',\n  variants: {},\n  defaultVariants: {},\n})\n\n/** Scrollable row of day chips. */\nexport const slotPickerDayRowClass = 'flex items-center gap-2 overflow-x-auto pb-1'\n\n/**\n * Individual day chip.\n *\n * `selected` → primary treatment; `unselected` → card with border.\n */\nexport const slotPickerDayVariants = cva({\n  base: [\n    'inline-flex flex-col items-center justify-center rounded-lg px-3 py-2 min-w-[3.5rem]',\n    'text-sm font-medium cursor-pointer transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  variants: {\n    selected: {\n      true: 'bg-primary text-primary-foreground',\n      false: 'bg-card border border-input text-foreground hover:bg-muted',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n\n/** Grid that holds the time-slot buttons. */\nexport const slotPickerGridClass = 'grid grid-cols-3 gap-2 sm:grid-cols-4'\n\n/**\n * Individual time-slot button.\n *\n * `selected` → primary; `disabled` → dimmed regardless of selection.\n */\nexport const slotPickerSlotVariants = cva({\n  base: [\n    'inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium',\n    'transition-colors cursor-pointer',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  ].join(' '),\n  variants: {\n    selected: {\n      true: 'bg-primary text-primary-foreground border-primary',\n      false: 'bg-card border-input text-foreground hover:bg-muted',\n    },\n    disabled: {\n      true: 'opacity-40 pointer-events-none',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n    disabled: 'false',\n  },\n})\n\n/** Section label above the day row or slot grid (e.g. \"Pick a day\"). */\nexport const slotPickerSectionLabelClass = 'text-sm font-semibold text-foreground'\n\n/** Timezone label rendered beside the \"Pick a time\" heading. */\nexport const slotPickerTimezoneClass = 'text-xs text-muted-foreground ml-2'\n", "import * as React from 'react'\nimport {\n  createSlotPicker,\n  slotsForDay,\n  isSlotSelected,\n  slotPickerVariants,\n  slotPickerDayRowClass,\n  slotPickerDayVariants,\n  slotPickerGridClass,\n  slotPickerSlotVariants,\n  slotPickerSectionLabelClass,\n  slotPickerTimezoneClass,\n  type SlotDay,\n  type SlotSelection,\n} from '@refraction-ui/slot-picker'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { SlotDay, SlotSelection }\n\nexport interface SlotPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content' | 'defaultValue' | 'onChange'> {\n  /** The list of days to show as chips. */\n  days: SlotDay[]\n  /** Map of dayId → available time slot strings. */\n  slotsByDay: Record<string, string[]>\n  /** Controlled selection value. */\n  value?: SlotSelection\n  /** Initial selection for uncontrolled usage. */\n  defaultValue?: SlotSelection\n  /** Called when the user picks a day + slot. */\n  onChange?: (selection: SlotSelection) => void\n  /** Label shown beside the \"Pick a time\" heading (e.g. \"Eastern Time\"). */\n  timezoneLabel?: string\n  /** Slot strings that should be rendered as disabled. */\n  disabledSlots?: string[]\n}\n\n/**\n * SlotPicker — a Calendly-style day + time-slot booking picker.\n *\n * Renders a row of day chips (radiogroup) and a grid of time-slot buttons\n * (radiogroup) for the currently-selected day. Supports controlled (`value`)\n * and uncontrolled (`defaultValue`) usage. Selecting a day clears the slot\n * when the previously-chosen slot is not available on the new day.\n */\nexport const SlotPicker = React.forwardRef<HTMLDivElement, SlotPickerProps>(\n  function SlotPicker(\n    {\n      days,\n      slotsByDay,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezoneLabel,\n      disabledSlots = [],\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = valueProp !== undefined\n    const [internal, setInternal] = React.useState<SlotSelection | undefined>(\n      defaultValue,\n    )\n    const value = isControlled ? valueProp : internal\n\n    const selectedDayId = value?.dayId\n\n    const handleDaySelect = React.useCallback(\n      (dayId: string) => {\n        const slots = slotsForDay(slotsByDay, dayId)\n        // Keep the slot only if it's still available on the new day.\n        const keepSlot =\n          value?.slot && slots.includes(value.slot) ? value.slot : undefined\n        const next: SlotSelection | undefined = keepSlot\n          ? { dayId, slot: keepSlot }\n          : undefined\n\n        if (!isControlled) setInternal(next)\n        if (next) onChange?.(next)\n      },\n      [isControlled, onChange, slotsByDay, value],\n    )\n\n    const handleSlotSelect = React.useCallback(\n      (slot: string) => {\n        if (!selectedDayId) return\n        const next: SlotSelection = { dayId: selectedDayId, slot }\n        if (!isControlled) setInternal(next)\n        onChange?.(next)\n      },\n      [isControlled, onChange, selectedDayId],\n    )\n\n    const api = createSlotPicker()\n    const currentSlots = selectedDayId ? slotsForDay(slotsByDay, selectedDayId) : []\n\n    return (\n      <div\n        ref={ref}\n        className={cn(slotPickerVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {/* Day row */}\n        <div>\n          <p className={slotPickerSectionLabelClass}>Pick a day</p>\n          <div role=\"radiogroup\" aria-label=\"Pick a day\" className={cn(slotPickerDayRowClass, 'mt-2')}>\n            {days.map((day) => {\n              const isSelected = selectedDayId === day.id\n              return (\n                <button\n                  key={day.id}\n                  type=\"button\"\n                  role=\"radio\"\n                  aria-checked={isSelected}\n                  data-state={isSelected ? 'checked' : 'unchecked'}\n                  className={slotPickerDayVariants({\n                    selected: isSelected ? 'true' : 'false',\n                  })}\n                  onClick={() => handleDaySelect(day.id)}\n                >\n                  <span className=\"text-xs\">{day.weekday}</span>\n                  <span className=\"text-base font-bold leading-none\">{day.dayNum}</span>\n                </button>\n              )\n            })}\n          </div>\n        </div>\n\n        {/* Slot grid */}\n        {selectedDayId && (\n          <div>\n            <p className={slotPickerSectionLabelClass}>\n              Pick a time\n              {timezoneLabel && (\n                <span className={slotPickerTimezoneClass}>{timezoneLabel}</span>\n              )}\n            </p>\n            <div role=\"radiogroup\" aria-label=\"Pick a time\" className={cn(slotPickerGridClass, 'mt-2')}>\n              {currentSlots.map((slot) => {\n                const isSelected = isSlotSelected(value, selectedDayId, slot)\n                const isDisabled = disabledSlots.includes(slot)\n                return (\n                  <button\n                    key={slot}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={isSelected}\n                    aria-disabled={isDisabled || undefined}\n                    data-state={isSelected ? 'checked' : 'unchecked'}\n                    className={slotPickerSlotVariants({\n                      selected: isSelected ? 'true' : 'false',\n                      disabled: isDisabled ? 'true' : 'false',\n                    })}\n                    onClick={() => !isDisabled && handleSlotSelect(slot)}\n                  >\n                    {slot}\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SlotPicker"]
+}

package/dist/react-slot.js

@@ -0,0 +1,7 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+export {
+  Slot
+};
+//# sourceMappingURL=react-slot.js.map