@codefast/ui 0.0.8 → 0.0.10

package/dist/carousel.js

@@ -1,7 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkU2WDUCW3js = require('./chunk-U2WDUCW3.js');
+var _chunkNEP3JDVQjs = require('./chunk-NEP3JDVQ.js');
+require('./chunk-J6COVJTP.js');
 
 
 var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
@@ -10,17 +11,13 @@ var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
 var _react = require('react'); var React = _interopRequireWildcard(_react);
 var _emblacarouselreact = require('embla-carousel-react'); var _emblacarouselreact2 = _interopRequireDefault(_emblacarouselreact);
 var _reacticons = require('@radix-ui/react-icons');
+var _reactcontext = require('@radix-ui/react-context');
 var _jsxruntime = require('react/jsx-runtime');
-var CarouselContext = React.createContext(null);
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
+var CAROUSEL_NAME = "Carousel";
+var [createCarouselContext] = _reactcontext.createContextScope.call(void 0, CAROUSEL_NAME);
+var [CarouselProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
 var Carousel = React.forwardRef(
-  ({ orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
+  ({ __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = _emblacarouselreact2.default.call(void 0, 
       {
         ...opts,
@@ -73,18 +70,17 @@ var Carousel = React.forwardRef(
       };
     }, [api, onSelect]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      CarouselContext.Provider,
+      CarouselProvider,
       {
-        value: {
-          carouselRef,
-          api,
-          opts,
-          orientation: _nullishCoalesce(orientation, () => ( (_optionalChain([opts, 'optionalAccess', _5 => _5.axis]) === "y" ? "vertical" : "horizontal"))),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext
-        },
+        scope: __scopeCarousel,
+        carouselRef,
+        api,
+        opts,
+        orientation: _nullishCoalesce(orientation, () => ( (_optionalChain([opts, 'optionalAccess', _5 => _5.axis]) === "y" ? "vertical" : "horizontal"))),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
@@ -101,89 +97,93 @@ var Carousel = React.forwardRef(
     );
   }
 );
-Carousel.displayName = "Carousel";
-var CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      ref,
-      className: _chunkG3NP7M2Njs.cn.call(void 0, 
-        "flex",
-        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-        className
-      ),
-      ...props
-    }
-  ) });
-});
-CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      ref,
-      role: "group",
-      "aria-roledescription": "slide",
-      className: _chunkG3NP7M2Njs.cn.call(void 0, 
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      ),
-      ...props
-    }
-  );
-});
-CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkU2WDUCW3js.Button,
-    {
-      ref,
-      variant,
-      size,
-      className: _chunkG3NP7M2Njs.cn.call(void 0, 
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      ...props,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowLeftIcon, { className: "size-4" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkU2WDUCW3js.Button,
-    {
-      ref,
-      variant,
-      size,
-      className: _chunkG3NP7M2Njs.cn.call(void 0, 
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      ...props,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowRightIcon, { className: "size-4" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
-});
-CarouselNext.displayName = "CarouselNext";
+Carousel.displayName = CAROUSEL_NAME;
+var CAROUSEL_CONTENT_NAME = "CarouselContent";
+var CarouselContent = React.forwardRef(
+  ({ __scopeCarousel, className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunkG3NP7M2Njs.cn.call(void 0, "flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
+var CAROUSEL_ITEM_NAME = "CarouselItem";
+var CarouselItem = React.forwardRef(
+  ({ __scopeCarousel, className, ...props }, ref) => {
+    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: _chunkG3NP7M2Njs.cn.call(void 0, "min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+        ...props
+      }
+    );
+  }
+);
+CarouselItem.displayName = CAROUSEL_ITEM_NAME;
+var CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+var CarouselPrevious = React.forwardRef(
+  ({ __scopeCarousel, className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkNEP3JDVQjs.Button,
+      {
+        ref,
+        variant,
+        size,
+        className: _chunkG3NP7M2Njs.cn.call(void 0, 
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowLeftIcon, { className: "size-4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Previous slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
+var CAROUSEL_NEXT_NAME = "CarouselNext";
+var CarouselNext = React.forwardRef(
+  ({ __scopeCarousel, className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkNEP3JDVQjs.Button,
+      {
+        ref,
+        variant,
+        size,
+        className: _chunkG3NP7M2Njs.cn.call(void 0, 
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowRightIcon, { className: "size-4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Next slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselNext.displayName = CAROUSEL_NEXT_NAME;
 
 
 

package/dist/carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"./utils\";\nimport { Button } from \"./button\";\n\n/* -----------------------------------------------------------------------------\n * Context: Carousel\n * -------------------------------------------------------------------------- */\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface CarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel(): CarouselContextProps {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: Carousel\n * -------------------------------------------------------------------------- */\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    { orientation, opts, setApi, plugins, className, children, ...props },\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"vertical\" ? \"y\" : \"x\",\n      },\n      plugins,\n    );\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev();\n    }, [api]);\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext();\n    }, [api]);\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault();\n          scrollPrev();\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault();\n          scrollNext();\n        }\n      },\n      [scrollPrev, scrollNext],\n    );\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return;\n      }\n\n      setApi(api);\n    }, [api, setApi]);\n\n    React.useEffect(() => {\n      if (!api) {\n        return;\n      }\n\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n\n      return () => {\n        api.off(\"select\", onSelect);\n      };\n    }, [api, onSelect]);\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api,\n          opts,\n          orientation:\n            orientation ?? (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  },\n);\nCarousel.displayName = \"Carousel\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselContent\n * -------------------------------------------------------------------------- */\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nCarouselContent.displayName = \"CarouselContent\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselItem\n * -------------------------------------------------------------------------- */\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = \"CarouselItem\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselPrevious\n * -------------------------------------------------------------------------- */\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon className=\"size-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n});\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselNext\n * -------------------------------------------------------------------------- */\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon className=\"size-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n});\nCarouselNext.displayName = \"CarouselNext\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"]}
+{"version":3,"sources":["../src/carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { cn } from \"./utils\";\nimport { Button, type ButtonProps } from \"./button\";\n\n/* -----------------------------------------------------------------------------\n * Context: Carousel\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_NAME = \"Carousel\";\n\ntype ScopedProps<P> = P & { __scopeCarousel?: Scope };\n\nconst [createCarouselContext] = createContextScope(CAROUSEL_NAME);\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface BaseCarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextValue = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & BaseCarouselProps;\n\nconst [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);\n\n/* -----------------------------------------------------------------------------\n * Component: Carousel\n * -------------------------------------------------------------------------- */\n\ntype CarouselElement = HTMLDivElement;\ntype CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;\n\nconst Carousel = React.forwardRef<CarouselElement, CarouselProps>(\n  (\n    { __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }: ScopedProps<CarouselProps>,\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"vertical\" ? \"y\" : \"x\",\n      },\n      plugins,\n    );\n\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev();\n    }, [api]);\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext();\n    }, [api]);\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault();\n          scrollPrev();\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault();\n          scrollNext();\n        }\n      },\n      [scrollPrev, scrollNext],\n    );\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return;\n      }\n\n      setApi(api);\n    }, [api, setApi]);\n\n    React.useEffect(() => {\n      if (!api) {\n        return;\n      }\n\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n\n      return () => {\n        api.off(\"select\", onSelect);\n      };\n    }, [api, onSelect]);\n\n    return (\n      <CarouselProvider\n        scope={__scopeCarousel}\n        carouselRef={carouselRef}\n        api={api}\n        opts={opts}\n        orientation={orientation ?? (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\")}\n        scrollPrev={scrollPrev}\n        scrollNext={scrollNext}\n        canScrollPrev={canScrollPrev}\n        canScrollNext={canScrollNext}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselProvider>\n    );\n  },\n);\n\nCarousel.displayName = CAROUSEL_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselContent\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_CONTENT_NAME = \"CarouselContent\";\n\ntype CarouselContentElement = HTMLDivElement;\ntype CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(\n  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {\n    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);\n\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nCarouselContent.displayName = CAROUSEL_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselItem\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_ITEM_NAME = \"CarouselItem\";\n\ntype CarouselItemElement = HTMLDivElement;\ntype CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(\n  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {\n    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn(\"min-w-0 shrink-0 grow-0 basis-full\", orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCarouselItem.displayName = CAROUSEL_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselPrevious\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_PREVIOUS_NAME = \"CarouselPrevious\";\n\ntype CarouselPreviousElement = HTMLButtonElement;\ntype CarouselPreviousProps = ButtonProps;\n\nconst CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(\n  (\n    { __scopeCarousel, className, variant = \"outline\", size = \"icon\", ...props }: ScopedProps<CarouselPreviousProps>,\n    ref,\n  ) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          \"absolute size-8 rounded-full\",\n          orientation === \"horizontal\"\n            ? \"-left-12 top-1/2 -translate-y-1/2\"\n            : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        {...props}\n      >\n        <ArrowLeftIcon className=\"size-4\" />\n        <span className=\"sr-only\">Previous slide</span>\n      </Button>\n    );\n  },\n);\n\nCarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselNext\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_NEXT_NAME = \"CarouselNext\";\n\ntype CarouselNextElement = HTMLButtonElement;\ntype CarouselNextProps = ButtonProps;\n\nconst CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(\n  (\n    { __scopeCarousel, className, variant = \"outline\", size = \"icon\", ...props }: ScopedProps<CarouselNextProps>,\n    ref,\n  ) => {\n    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          \"absolute size-8 rounded-full\",\n          orientation === \"horizontal\"\n            ? \"-right-12 top-1/2 -translate-y-1/2\"\n            : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        {...props}\n      >\n        <ArrowRightIcon className=\"size-4\" />\n        <span className=\"sr-only\">Next slide</span>\n      </Button>\n    );\n  },\n);\n\nCarouselNext.displayName = CAROUSEL_NEXT_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselProps,\n  type CarouselContentProps,\n  type CarouselItemProps,\n  type CarouselPreviousProps,\n  type CarouselNextProps,\n};\n"]}

package/dist/carousel.mjs

@@ -1,7 +1,8 @@
 "use client";
 import {
   Button
-} from "./chunk-KW5FJ62U.mjs";
+} from "./chunk-XHZUPL2U.mjs";
+import "./chunk-5UHPKXF4.mjs";
 import {
   cn
 } from "./chunk-UG3URV2Z.mjs";
@@ -10,17 +11,13 @@ import {
 import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import { createContextScope } from "@radix-ui/react-context";
 import { jsx, jsxs } from "react/jsx-runtime";
-var CarouselContext = React.createContext(null);
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
+var CAROUSEL_NAME = "Carousel";
+var [createCarouselContext] = createContextScope(CAROUSEL_NAME);
+var [CarouselProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
 var Carousel = React.forwardRef(
-  ({ orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
+  ({ __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
@@ -73,18 +70,17 @@ var Carousel = React.forwardRef(
       };
     }, [api, onSelect]);
     return /* @__PURE__ */ jsx(
-      CarouselContext.Provider,
+      CarouselProvider,
       {
-        value: {
-          carouselRef,
-          api,
-          opts,
-          orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext
-        },
+        scope: __scopeCarousel,
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
         children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -101,89 +97,93 @@ var Carousel = React.forwardRef(
     );
   }
 );
-Carousel.displayName = "Carousel";
-var CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex",
-        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-        className
-      ),
-      ...props
-    }
-  ) });
-});
-CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "group",
-      "aria-roledescription": "slide",
-      className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      ),
-      ...props
-    }
-  );
-});
-CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ref,
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ref,
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
-});
-CarouselNext.displayName = "CarouselNext";
+Carousel.displayName = CAROUSEL_NAME;
+var CAROUSEL_CONTENT_NAME = "CarouselContent";
+var CarouselContent = React.forwardRef(
+  ({ __scopeCarousel, className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+    return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
+var CAROUSEL_ITEM_NAME = "CarouselItem";
+var CarouselItem = React.forwardRef(
+  ({ __scopeCarousel, className, ...props }, ref) => {
+    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+        ...props
+      }
+    );
+  }
+);
+CarouselItem.displayName = CAROUSEL_ITEM_NAME;
+var CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+var CarouselPrevious = React.forwardRef(
+  ({ __scopeCarousel, className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
+var CAROUSEL_NEXT_NAME = "CarouselNext";
+var CarouselNext = React.forwardRef(
+  ({ __scopeCarousel, className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselNext.displayName = CAROUSEL_NEXT_NAME;
 export {
   Carousel,
   CarouselContent,

package/dist/carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"./utils\";\nimport { Button } from \"./button\";\n\n/* -----------------------------------------------------------------------------\n * Context: Carousel\n * -------------------------------------------------------------------------- */\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface CarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel(): CarouselContextProps {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: Carousel\n * -------------------------------------------------------------------------- */\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    { orientation, opts, setApi, plugins, className, children, ...props },\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"vertical\" ? \"y\" : \"x\",\n      },\n      plugins,\n    );\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev();\n    }, [api]);\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext();\n    }, [api]);\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault();\n          scrollPrev();\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault();\n          scrollNext();\n        }\n      },\n      [scrollPrev, scrollNext],\n    );\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return;\n      }\n\n      setApi(api);\n    }, [api, setApi]);\n\n    React.useEffect(() => {\n      if (!api) {\n        return;\n      }\n\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n\n      return () => {\n        api.off(\"select\", onSelect);\n      };\n    }, [api, onSelect]);\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api,\n          opts,\n          orientation:\n            orientation ?? (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  },\n);\nCarousel.displayName = \"Carousel\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselContent\n * -------------------------------------------------------------------------- */\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nCarouselContent.displayName = \"CarouselContent\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselItem\n * -------------------------------------------------------------------------- */\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = \"CarouselItem\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselPrevious\n * -------------------------------------------------------------------------- */\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon className=\"size-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n});\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselNext\n * -------------------------------------------------------------------------- */\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon className=\"size-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n});\nCarouselNext.displayName = \"CarouselNext\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { cn } from \"./utils\";\nimport { Button, type ButtonProps } from \"./button\";\n\n/* -----------------------------------------------------------------------------\n * Context: Carousel\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_NAME = \"Carousel\";\n\ntype ScopedProps<P> = P & { __scopeCarousel?: Scope };\n\nconst [createCarouselContext] = createContextScope(CAROUSEL_NAME);\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface BaseCarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextValue = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & BaseCarouselProps;\n\nconst [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);\n\n/* -----------------------------------------------------------------------------\n * Component: Carousel\n * -------------------------------------------------------------------------- */\n\ntype CarouselElement = HTMLDivElement;\ntype CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;\n\nconst Carousel = React.forwardRef<CarouselElement, CarouselProps>(\n  (\n    { __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }: ScopedProps<CarouselProps>,\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"vertical\" ? \"y\" : \"x\",\n      },\n      plugins,\n    );\n\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev();\n    }, [api]);\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext();\n    }, [api]);\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault();\n          scrollPrev();\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault();\n          scrollNext();\n        }\n      },\n      [scrollPrev, scrollNext],\n    );\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return;\n      }\n\n      setApi(api);\n    }, [api, setApi]);\n\n    React.useEffect(() => {\n      if (!api) {\n        return;\n      }\n\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n\n      return () => {\n        api.off(\"select\", onSelect);\n      };\n    }, [api, onSelect]);\n\n    return (\n      <CarouselProvider\n        scope={__scopeCarousel}\n        carouselRef={carouselRef}\n        api={api}\n        opts={opts}\n        orientation={orientation ?? (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\")}\n        scrollPrev={scrollPrev}\n        scrollNext={scrollNext}\n        canScrollPrev={canScrollPrev}\n        canScrollNext={canScrollNext}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselProvider>\n    );\n  },\n);\n\nCarousel.displayName = CAROUSEL_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselContent\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_CONTENT_NAME = \"CarouselContent\";\n\ntype CarouselContentElement = HTMLDivElement;\ntype CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(\n  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {\n    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);\n\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nCarouselContent.displayName = CAROUSEL_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselItem\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_ITEM_NAME = \"CarouselItem\";\n\ntype CarouselItemElement = HTMLDivElement;\ntype CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(\n  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {\n    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn(\"min-w-0 shrink-0 grow-0 basis-full\", orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCarouselItem.displayName = CAROUSEL_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselPrevious\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_PREVIOUS_NAME = \"CarouselPrevious\";\n\ntype CarouselPreviousElement = HTMLButtonElement;\ntype CarouselPreviousProps = ButtonProps;\n\nconst CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(\n  (\n    { __scopeCarousel, className, variant = \"outline\", size = \"icon\", ...props }: ScopedProps<CarouselPreviousProps>,\n    ref,\n  ) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          \"absolute size-8 rounded-full\",\n          orientation === \"horizontal\"\n            ? \"-left-12 top-1/2 -translate-y-1/2\"\n            : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        {...props}\n      >\n        <ArrowLeftIcon className=\"size-4\" />\n        <span className=\"sr-only\">Previous slide</span>\n      </Button>\n    );\n  },\n);\n\nCarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: CarouselNext\n * -------------------------------------------------------------------------- */\n\nconst CAROUSEL_NEXT_NAME = \"CarouselNext\";\n\ntype CarouselNextElement = HTMLButtonElement;\ntype CarouselNextProps = ButtonProps;\n\nconst CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(\n  (\n    { __scopeCarousel, className, variant = \"outline\", size = \"icon\", ...props }: ScopedProps<CarouselNextProps>,\n    ref,\n  ) => {\n    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          \"absolute size-8 rounded-full\",\n          orientation === \"horizontal\"\n            ? \"-right-12 top-1/2 -translate-y-1/2\"\n            : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        {...props}\n      >\n        <ArrowRightIcon className=\"size-4\" />\n        <span className=\"sr-only\">Next slide</span>\n      </Button>\n    );\n  },\n);\n\nCarouselNext.displayName = CAROUSEL_NEXT_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselProps,\n  type CarouselContentProps,\n  type CarouselItemProps,\n  type CarouselPreviousProps,\n  type CarouselNextProps,\n};\n"],"mappings":"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","names":[]}

package/dist/checkbox-cards.d.mts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Root, CheckboxGroupProps, Item } from './checkbox-group.primitive.mjs';
+import '@radix-ui/react-context';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-roving-focus';
+import '@radix-ui/react-primitive';
+
+type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof Root>;
+declare const CheckboxCards: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof Item> {
+    checkboxClassName?: string;
+}
+declare const CheckboxCardsItem: React.ForwardRefExoticComponent<CheckboxCardsItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsItemProps, type CheckboxCardsProps };