@codefast/ui 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.d.mts +9 -0
- package/dist/accordion.d.ts +9 -0
- package/dist/accordion.js +53 -0
- package/dist/accordion.js.map +1 -0
- package/dist/accordion.mjs +53 -0
- package/dist/accordion.mjs.map +1 -0
- package/dist/alert-dialog.d.mts +14 -0
- package/dist/alert-dialog.d.ts +14 -0
- package/dist/alert-dialog.js +107 -0
- package/dist/alert-dialog.js.map +1 -0
- package/dist/alert-dialog.mjs +107 -0
- package/dist/alert-dialog.mjs.map +1 -0
- package/dist/alert.d.mts +64 -0
- package/dist/alert.d.ts +64 -0
- package/dist/alert.js +55 -0
- package/dist/alert.js.map +1 -0
- package/dist/alert.mjs +55 -0
- package/dist/alert.mjs.map +1 -0
- package/dist/aspect-ratio.d.mts +6 -0
- package/dist/aspect-ratio.d.ts +6 -0
- package/dist/aspect-ratio.js +9 -0
- package/dist/aspect-ratio.js.map +1 -0
- package/dist/aspect-ratio.mjs +9 -0
- package/dist/aspect-ratio.mjs.map +1 -0
- package/dist/avatar.d.mts +8 -0
- package/dist/avatar.d.ts +8 -0
- package/dist/avatar.js +48 -0
- package/dist/avatar.js.map +1 -0
- package/dist/avatar.mjs +48 -0
- package/dist/avatar.mjs.map +1 -0
- package/dist/badge.d.mts +62 -0
- package/dist/badge.d.ts +62 -0
- package/dist/badge.js +31 -0
- package/dist/badge.js.map +1 -0
- package/dist/badge.mjs +31 -0
- package/dist/badge.mjs.map +1 -0
- package/dist/breadcrumb.d.mts +15 -0
- package/dist/breadcrumb.d.ts +15 -0
- package/dist/breadcrumb.js +100 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/breadcrumb.mjs +100 -0
- package/dist/breadcrumb.mjs.map +1 -0
- package/dist/button.d.mts +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/button.js +9 -1
- package/dist/button.js.map +1 -1
- package/dist/button.mjs +9 -1
- package/dist/button.mjs.map +1 -1
- package/dist/calendar.d.mts +7 -0
- package/dist/calendar.d.ts +7 -0
- package/dist/calendar.js +83 -0
- package/dist/calendar.js.map +1 -0
- package/dist/calendar.mjs +83 -0
- package/dist/calendar.mjs.map +1 -0
- package/dist/card.d.mts +9 -7
- package/dist/card.d.ts +9 -7
- package/dist/card.js +66 -1
- package/dist/card.js.map +1 -1
- package/dist/card.mjs +66 -1
- package/dist/card.mjs.map +1 -1
- package/dist/carousel.d.mts +22 -0
- package/dist/carousel.d.ts +22 -0
- package/dist/carousel.js +194 -0
- package/dist/carousel.js.map +1 -0
- package/dist/carousel.mjs +194 -0
- package/dist/carousel.mjs.map +1 -0
- package/dist/checkbox.d.mts +6 -0
- package/dist/checkbox.d.ts +6 -0
- package/dist/checkbox.js +27 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/checkbox.mjs +27 -0
- package/dist/checkbox.mjs.map +1 -0
- package/dist/chunk-4K26QLS2.js +52 -0
- package/dist/chunk-4K26QLS2.js.map +1 -0
- package/dist/chunk-5GHZ6EXI.js +41 -0
- package/dist/chunk-5GHZ6EXI.js.map +1 -0
- package/dist/chunk-EIHWTXQ4.mjs +112 -0
- package/dist/chunk-EIHWTXQ4.mjs.map +1 -0
- package/dist/chunk-G3NP7M2N.js +19 -0
- package/dist/chunk-G3NP7M2N.js.map +1 -0
- package/dist/chunk-LDYBRDAY.js +112 -0
- package/dist/chunk-LDYBRDAY.js.map +1 -0
- package/dist/chunk-PTD4AMHI.mjs +25 -0
- package/dist/chunk-PTD4AMHI.mjs.map +1 -0
- package/dist/chunk-RTKEO347.js +25 -0
- package/dist/chunk-RTKEO347.js.map +1 -0
- package/dist/chunk-T52N6ZBP.mjs +41 -0
- package/dist/chunk-T52N6ZBP.mjs.map +1 -0
- package/dist/chunk-UG3URV2Z.mjs +19 -0
- package/dist/chunk-UG3URV2Z.mjs.map +1 -0
- package/dist/chunk-Z524G4RY.mjs +52 -0
- package/dist/chunk-Z524G4RY.mjs.map +1 -0
- package/dist/collapsible.d.mts +8 -0
- package/dist/collapsible.d.ts +8 -0
- package/dist/collapsible.js +13 -0
- package/dist/collapsible.js.map +1 -0
- package/dist/collapsible.mjs +13 -0
- package/dist/collapsible.mjs.map +1 -0
- package/dist/command.d.mts +89 -0
- package/dist/command.d.ts +89 -0
- package/dist/command.js +132 -0
- package/dist/command.js.map +1 -0
- package/dist/command.mjs +132 -0
- package/dist/command.mjs.map +1 -0
- package/dist/context-menu.d.mts +26 -0
- package/dist/context-menu.d.ts +26 -0
- package/dist/context-menu.js +170 -0
- package/dist/context-menu.js.map +1 -0
- package/dist/context-menu.mjs +170 -0
- package/dist/context-menu.mjs.map +1 -0
- package/dist/dialog.d.mts +13 -0
- package/dist/dialog.d.ts +13 -0
- package/dist/dialog.js +23 -0
- package/dist/dialog.mjs +23 -0
- package/dist/drawer.d.mts +16 -0
- package/dist/drawer.d.ts +16 -0
- package/dist/drawer.js +98 -0
- package/dist/drawer.js.map +1 -0
- package/dist/drawer.mjs +98 -0
- package/dist/drawer.mjs.map +1 -0
- package/dist/dropdown-menu.d.mts +25 -0
- package/dist/dropdown-menu.d.ts +25 -0
- package/dist/dropdown-menu.js +158 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/dropdown-menu.mjs +158 -0
- package/dist/dropdown-menu.mjs.map +1 -0
- package/dist/form.d.mts +27 -0
- package/dist/form.d.ts +27 -0
- package/dist/form.js +118 -0
- package/dist/form.js.map +1 -0
- package/dist/form.mjs +118 -0
- package/dist/form.mjs.map +1 -0
- package/dist/hover-card.d.mts +8 -0
- package/dist/hover-card.d.ts +8 -0
- package/dist/hover-card.js +31 -0
- package/dist/hover-card.js.map +1 -0
- package/dist/hover-card.mjs +31 -0
- package/dist/hover-card.mjs.map +1 -0
- package/dist/input-otp.d.mts +36 -0
- package/dist/input-otp.d.ts +36 -0
- package/dist/input-otp.js +60 -0
- package/dist/input-otp.js.map +1 -0
- package/dist/input-otp.mjs +60 -0
- package/dist/input-otp.mjs.map +1 -0
- package/dist/input.d.mts +5 -0
- package/dist/input.d.ts +5 -0
- package/dist/input.js +26 -0
- package/dist/input.js.map +1 -0
- package/dist/input.mjs +26 -0
- package/dist/input.mjs.map +1 -0
- package/dist/label.d.mts +6 -0
- package/dist/label.d.ts +6 -0
- package/dist/label.js +9 -0
- package/dist/label.js.map +1 -0
- package/dist/label.mjs +9 -0
- package/dist/label.mjs.map +1 -0
- package/dist/menubar.d.mts +29 -0
- package/dist/menubar.d.ts +29 -0
- package/dist/menubar.js +189 -0
- package/dist/menubar.js.map +1 -0
- package/dist/menubar.mjs +189 -0
- package/dist/menubar.mjs.map +1 -0
- package/dist/navigation-menu.d.mts +68 -0
- package/dist/navigation-menu.d.ts +68 -0
- package/dist/navigation-menu.js +125 -0
- package/dist/navigation-menu.js.map +1 -0
- package/dist/navigation-menu.mjs +125 -0
- package/dist/navigation-menu.mjs.map +1 -0
- package/dist/pagination.d.mts +16 -0
- package/dist/pagination.d.ts +16 -0
- package/dist/pagination.js +124 -0
- package/dist/pagination.js.map +1 -0
- package/dist/pagination.mjs +124 -0
- package/dist/pagination.mjs.map +1 -0
- package/dist/popover.d.mts +10 -0
- package/dist/popover.d.ts +10 -0
- package/dist/popover.js +43 -0
- package/dist/popover.js.map +1 -0
- package/dist/popover.mjs +43 -0
- package/dist/popover.mjs.map +1 -0
- package/dist/progress.d.mts +6 -0
- package/dist/progress.d.ts +6 -0
- package/dist/progress.js +34 -0
- package/dist/progress.js.map +1 -0
- package/dist/progress.mjs +34 -0
- package/dist/progress.mjs.map +1 -0
- package/dist/radio-group.d.mts +7 -0
- package/dist/radio-group.d.ts +7 -0
- package/dist/radio-group.js +47 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/radio-group.mjs +47 -0
- package/dist/radio-group.mjs.map +1 -0
- package/dist/resizable.d.mts +26 -0
- package/dist/resizable.d.ts +26 -0
- package/dist/resizable.js +48 -0
- package/dist/resizable.js.map +1 -0
- package/dist/resizable.mjs +48 -0
- package/dist/resizable.mjs.map +1 -0
- package/dist/scroll-area.d.mts +7 -0
- package/dist/scroll-area.d.ts +7 -0
- package/dist/scroll-area.js +45 -0
- package/dist/scroll-area.js.map +1 -0
- package/dist/scroll-area.mjs +45 -0
- package/dist/scroll-area.mjs.map +1 -0
- package/dist/select.d.mts +15 -0
- package/dist/select.d.ts +15 -0
- package/dist/select.js +135 -0
- package/dist/select.js.map +1 -0
- package/dist/select.mjs +135 -0
- package/dist/select.mjs.map +1 -0
- package/dist/separator.d.mts +6 -0
- package/dist/separator.d.ts +6 -0
- package/dist/separator.js +30 -0
- package/dist/separator.js.map +1 -0
- package/dist/separator.mjs +30 -0
- package/dist/separator.mjs.map +1 -0
- package/dist/sheet.d.mts +73 -0
- package/dist/sheet.d.ts +73 -0
- package/dist/sheet.js +122 -0
- package/dist/sheet.js.map +1 -0
- package/dist/sheet.mjs +122 -0
- package/dist/sheet.mjs.map +1 -0
- package/dist/skeleton.d.mts +5 -0
- package/dist/skeleton.d.ts +5 -0
- package/dist/skeleton.js +22 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/skeleton.mjs +22 -0
- package/dist/skeleton.mjs.map +1 -0
- package/dist/slider.d.mts +6 -0
- package/dist/slider.d.ts +6 -0
- package/dist/slider.js +29 -0
- package/dist/slider.js.map +1 -0
- package/dist/slider.mjs +29 -0
- package/dist/slider.mjs.map +1 -0
- package/dist/sonner.d.mts +8 -0
- package/dist/sonner.d.ts +8 -0
- package/dist/sonner.js +35 -0
- package/dist/sonner.js.map +1 -0
- package/dist/sonner.mjs +35 -0
- package/dist/sonner.mjs.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/switch.d.mts +6 -0
- package/dist/switch.d.ts +6 -0
- package/dist/switch.js +26 -0
- package/dist/switch.js.map +1 -0
- package/dist/switch.mjs +26 -0
- package/dist/switch.mjs.map +1 -0
- package/dist/table.d.mts +12 -0
- package/dist/table.d.ts +12 -0
- package/dist/table.js +95 -0
- package/dist/table.js.map +1 -0
- package/dist/table.mjs +95 -0
- package/dist/table.mjs.map +1 -0
- package/dist/tabs.d.mts +9 -0
- package/dist/tabs.d.ts +9 -0
- package/dist/tabs.js +53 -0
- package/dist/tabs.js.map +1 -0
- package/dist/tabs.mjs +53 -0
- package/dist/tabs.mjs.map +1 -0
- package/dist/textarea.d.mts +5 -0
- package/dist/textarea.d.ts +5 -0
- package/dist/textarea.js +25 -0
- package/dist/textarea.js.map +1 -0
- package/dist/textarea.mjs +25 -0
- package/dist/textarea.mjs.map +1 -0
- package/dist/toggle-group.d.mts +10 -0
- package/dist/toggle-group.d.ts +10 -0
- package/dist/toggle-group.js +50 -0
- package/dist/toggle-group.js.map +1 -0
- package/dist/toggle-group.mjs +50 -0
- package/dist/toggle-group.mjs.map +1 -0
- package/dist/toggle.d.mts +66 -0
- package/dist/toggle.d.ts +66 -0
- package/dist/toggle.js +11 -0
- package/dist/toggle.js.map +1 -0
- package/dist/toggle.mjs +11 -0
- package/dist/toggle.mjs.map +1 -0
- package/dist/tooltip.d.mts +10 -0
- package/dist/tooltip.d.ts +10 -0
- package/dist/tooltip.js +42 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tooltip.mjs +42 -0
- package/dist/tooltip.mjs.map +1 -0
- package/dist/{cva.d.mts → utils.d.mts} +2 -2
- package/dist/{cva.d.ts → utils.d.ts} +2 -2
- package/dist/utils.js +11 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.mjs +11 -0
- package/dist/utils.mjs.map +1 -0
- package/package.json +260 -19
- package/src/accordion.tsx +76 -0
- package/src/alert-dialog.tsx +159 -0
- package/src/alert.tsx +78 -0
- package/src/aspect-ratio.tsx +15 -0
- package/src/avatar.tsx +65 -0
- package/src/badge.tsx +43 -0
- package/src/breadcrumb.tsx +148 -0
- package/src/button.tsx +7 -7
- package/src/calendar.tsx +94 -0
- package/src/card.tsx +112 -25
- package/src/carousel.tsx +281 -0
- package/src/checkbox.tsx +35 -0
- package/src/collapsible.tsx +27 -0
- package/src/command.tsx +203 -0
- package/src/context-menu.tsx +278 -0
- package/src/dialog.tsx +148 -0
- package/src/drawer.tsx +140 -0
- package/src/dropdown-menu.tsx +261 -0
- package/src/form.tsx +224 -0
- package/src/hover-card.tsx +46 -0
- package/src/input-otp.tsx +100 -0
- package/src/input.tsx +30 -0
- package/src/label.tsx +29 -0
- package/src/menubar.tsx +301 -0
- package/src/navigation-menu.tsx +176 -0
- package/src/pagination.tsx +160 -0
- package/src/popover.tsx +68 -0
- package/src/progress.tsx +37 -0
- package/src/radio-group.tsx +56 -0
- package/src/resizable.tsx +64 -0
- package/src/scroll-area.tsx +60 -0
- package/src/select.tsx +207 -0
- package/src/separator.tsx +38 -0
- package/src/sheet.tsx +165 -0
- package/src/skeleton.tsx +24 -0
- package/src/slider.tsx +35 -0
- package/src/sonner.tsx +43 -0
- package/src/switch.tsx +32 -0
- package/src/table.tsx +155 -0
- package/src/tabs.tsx +74 -0
- package/src/textarea.tsx +29 -0
- package/src/toggle-group.tsx +70 -0
- package/src/toggle.tsx +53 -0
- package/src/tooltip.tsx +73 -0
- package/src/{cva.ts → utils.ts} +5 -1
- package/tailwind.config.ts +39 -70
- package/dist/chunk-33V4YP7I.js +0 -2
- package/dist/chunk-33V4YP7I.js.map +0 -1
- package/dist/chunk-JVQ3OM5P.mjs +0 -2
- package/dist/chunk-JVQ3OM5P.mjs.map +0 -1
- package/dist/code.d.mts +0 -3
- package/dist/code.d.ts +0 -3
- package/dist/code.js +0 -2
- package/dist/code.js.map +0 -1
- package/dist/code.mjs +0 -2
- package/dist/code.mjs.map +0 -1
- package/dist/cva.js +0 -2
- package/dist/cva.mjs +0 -2
- package/src/code.tsx +0 -5
- /package/dist/{cva.js.map → dialog.js.map} +0 -0
- /package/dist/{cva.mjs.map → dialog.mjs.map} +0 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ButtonProps } from './button.mjs';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
|
|
4
|
+
import 'cva';
|
|
5
|
+
|
|
6
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
7
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
8
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
9
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
10
|
+
interface CarouselProps {
|
|
11
|
+
opts?: CarouselOptions;
|
|
12
|
+
plugins?: CarouselPlugin;
|
|
13
|
+
orientation?: "horizontal" | "vertical";
|
|
14
|
+
setApi?: (api: CarouselApi) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
20
|
+
declare const CarouselNext: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
|
|
22
|
+
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ButtonProps } from './button.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
|
|
4
|
+
import 'cva';
|
|
5
|
+
|
|
6
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
7
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
8
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
9
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
10
|
+
interface CarouselProps {
|
|
11
|
+
opts?: CarouselOptions;
|
|
12
|
+
plugins?: CarouselPlugin;
|
|
13
|
+
orientation?: "horizontal" | "vertical";
|
|
14
|
+
setApi?: (api: CarouselApi) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
20
|
+
declare const CarouselNext: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
|
|
22
|
+
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
|
package/dist/carousel.js
ADDED
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
"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";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunk4K26QLS2js = require('./chunk-4K26QLS2.js');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
|
|
8
|
+
|
|
9
|
+
// src/carousel.tsx
|
|
10
|
+
var _react = require('react'); var React = _interopRequireWildcard(_react);
|
|
11
|
+
var _emblacarouselreact = require('embla-carousel-react'); var _emblacarouselreact2 = _interopRequireDefault(_emblacarouselreact);
|
|
12
|
+
var _reacticons = require('@radix-ui/react-icons');
|
|
13
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
14
|
+
var CarouselContext = React.createContext(null);
|
|
15
|
+
function useCarousel() {
|
|
16
|
+
const context = React.useContext(CarouselContext);
|
|
17
|
+
if (!context) {
|
|
18
|
+
throw new Error("useCarousel must be used within a <Carousel />");
|
|
19
|
+
}
|
|
20
|
+
return context;
|
|
21
|
+
}
|
|
22
|
+
var Carousel = React.forwardRef(
|
|
23
|
+
({ orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
|
|
24
|
+
const [carouselRef, api] = _emblacarouselreact2.default.call(void 0,
|
|
25
|
+
{
|
|
26
|
+
...opts,
|
|
27
|
+
axis: orientation === "vertical" ? "y" : "x"
|
|
28
|
+
},
|
|
29
|
+
plugins
|
|
30
|
+
);
|
|
31
|
+
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
32
|
+
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
33
|
+
const onSelect = React.useCallback((carouselApi) => {
|
|
34
|
+
if (!carouselApi) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
setCanScrollPrev(carouselApi.canScrollPrev());
|
|
38
|
+
setCanScrollNext(carouselApi.canScrollNext());
|
|
39
|
+
}, []);
|
|
40
|
+
const scrollPrev = React.useCallback(() => {
|
|
41
|
+
_optionalChain([api, 'optionalAccess', _ => _.scrollPrev, 'call', _2 => _2()]);
|
|
42
|
+
}, [api]);
|
|
43
|
+
const scrollNext = React.useCallback(() => {
|
|
44
|
+
_optionalChain([api, 'optionalAccess', _3 => _3.scrollNext, 'call', _4 => _4()]);
|
|
45
|
+
}, [api]);
|
|
46
|
+
const handleKeyDown = React.useCallback(
|
|
47
|
+
(event) => {
|
|
48
|
+
if (event.key === "ArrowLeft") {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
scrollPrev();
|
|
51
|
+
} else if (event.key === "ArrowRight") {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
scrollNext();
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
[scrollPrev, scrollNext]
|
|
57
|
+
);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!api || !setApi) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setApi(api);
|
|
63
|
+
}, [api, setApi]);
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
if (!api) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
onSelect(api);
|
|
69
|
+
api.on("reInit", onSelect);
|
|
70
|
+
api.on("select", onSelect);
|
|
71
|
+
return () => {
|
|
72
|
+
api.off("select", onSelect);
|
|
73
|
+
};
|
|
74
|
+
}, [api, onSelect]);
|
|
75
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
76
|
+
CarouselContext.Provider,
|
|
77
|
+
{
|
|
78
|
+
value: {
|
|
79
|
+
carouselRef,
|
|
80
|
+
api,
|
|
81
|
+
opts,
|
|
82
|
+
orientation: _nullishCoalesce(orientation, () => ( (_optionalChain([opts, 'optionalAccess', _5 => _5.axis]) === "y" ? "vertical" : "horizontal"))),
|
|
83
|
+
scrollPrev,
|
|
84
|
+
scrollNext,
|
|
85
|
+
canScrollPrev,
|
|
86
|
+
canScrollNext
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
ref,
|
|
92
|
+
onKeyDownCapture: handleKeyDown,
|
|
93
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0, "relative", className),
|
|
94
|
+
role: "region",
|
|
95
|
+
"aria-roledescription": "carousel",
|
|
96
|
+
...props,
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
Carousel.displayName = "Carousel";
|
|
105
|
+
var CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
|
|
106
|
+
const { carouselRef, orientation } = useCarousel();
|
|
107
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
ref,
|
|
111
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0,
|
|
112
|
+
"flex",
|
|
113
|
+
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
...props
|
|
117
|
+
}
|
|
118
|
+
) });
|
|
119
|
+
});
|
|
120
|
+
CarouselContent.displayName = "CarouselContent";
|
|
121
|
+
var CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
|
|
122
|
+
const { orientation } = useCarousel();
|
|
123
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
ref,
|
|
127
|
+
role: "group",
|
|
128
|
+
"aria-roledescription": "slide",
|
|
129
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0,
|
|
130
|
+
"min-w-0 shrink-0 grow-0 basis-full",
|
|
131
|
+
orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
132
|
+
className
|
|
133
|
+
),
|
|
134
|
+
...props
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
});
|
|
138
|
+
CarouselItem.displayName = "CarouselItem";
|
|
139
|
+
var CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
140
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
141
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
142
|
+
_chunk4K26QLS2js.Button,
|
|
143
|
+
{
|
|
144
|
+
ref,
|
|
145
|
+
variant,
|
|
146
|
+
size,
|
|
147
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0,
|
|
148
|
+
"absolute size-8 rounded-full",
|
|
149
|
+
orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
150
|
+
className
|
|
151
|
+
),
|
|
152
|
+
disabled: !canScrollPrev,
|
|
153
|
+
onClick: scrollPrev,
|
|
154
|
+
...props,
|
|
155
|
+
children: [
|
|
156
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowLeftIcon, { className: "size-4" }),
|
|
157
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Previous slide" })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
});
|
|
162
|
+
CarouselPrevious.displayName = "CarouselPrevious";
|
|
163
|
+
var CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
164
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
165
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
166
|
+
_chunk4K26QLS2js.Button,
|
|
167
|
+
{
|
|
168
|
+
ref,
|
|
169
|
+
variant,
|
|
170
|
+
size,
|
|
171
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0,
|
|
172
|
+
"absolute size-8 rounded-full",
|
|
173
|
+
orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
174
|
+
className
|
|
175
|
+
),
|
|
176
|
+
disabled: !canScrollNext,
|
|
177
|
+
onClick: scrollNext,
|
|
178
|
+
...props,
|
|
179
|
+
children: [
|
|
180
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowRightIcon, { className: "size-4" }),
|
|
181
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Next slide" })
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
});
|
|
186
|
+
CarouselNext.displayName = "CarouselNext";
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
exports.Carousel = Carousel; exports.CarouselContent = CarouselContent; exports.CarouselItem = CarouselItem; exports.CarouselNext = CarouselNext; exports.CarouselPrevious = CarouselPrevious;
|
|
194
|
+
//# sourceMappingURL=carousel.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
Button
|
|
4
|
+
} from "./chunk-Z524G4RY.mjs";
|
|
5
|
+
import {
|
|
6
|
+
cn
|
|
7
|
+
} from "./chunk-UG3URV2Z.mjs";
|
|
8
|
+
|
|
9
|
+
// src/carousel.tsx
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
12
|
+
import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
var CarouselContext = React.createContext(null);
|
|
15
|
+
function useCarousel() {
|
|
16
|
+
const context = React.useContext(CarouselContext);
|
|
17
|
+
if (!context) {
|
|
18
|
+
throw new Error("useCarousel must be used within a <Carousel />");
|
|
19
|
+
}
|
|
20
|
+
return context;
|
|
21
|
+
}
|
|
22
|
+
var Carousel = React.forwardRef(
|
|
23
|
+
({ orientation, opts, setApi, plugins, className, children, ...props }, ref) => {
|
|
24
|
+
const [carouselRef, api] = useEmblaCarousel(
|
|
25
|
+
{
|
|
26
|
+
...opts,
|
|
27
|
+
axis: orientation === "vertical" ? "y" : "x"
|
|
28
|
+
},
|
|
29
|
+
plugins
|
|
30
|
+
);
|
|
31
|
+
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
|
32
|
+
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
|
33
|
+
const onSelect = React.useCallback((carouselApi) => {
|
|
34
|
+
if (!carouselApi) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
setCanScrollPrev(carouselApi.canScrollPrev());
|
|
38
|
+
setCanScrollNext(carouselApi.canScrollNext());
|
|
39
|
+
}, []);
|
|
40
|
+
const scrollPrev = React.useCallback(() => {
|
|
41
|
+
api?.scrollPrev();
|
|
42
|
+
}, [api]);
|
|
43
|
+
const scrollNext = React.useCallback(() => {
|
|
44
|
+
api?.scrollNext();
|
|
45
|
+
}, [api]);
|
|
46
|
+
const handleKeyDown = React.useCallback(
|
|
47
|
+
(event) => {
|
|
48
|
+
if (event.key === "ArrowLeft") {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
scrollPrev();
|
|
51
|
+
} else if (event.key === "ArrowRight") {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
scrollNext();
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
[scrollPrev, scrollNext]
|
|
57
|
+
);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!api || !setApi) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setApi(api);
|
|
63
|
+
}, [api, setApi]);
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
if (!api) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
onSelect(api);
|
|
69
|
+
api.on("reInit", onSelect);
|
|
70
|
+
api.on("select", onSelect);
|
|
71
|
+
return () => {
|
|
72
|
+
api.off("select", onSelect);
|
|
73
|
+
};
|
|
74
|
+
}, [api, onSelect]);
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
CarouselContext.Provider,
|
|
77
|
+
{
|
|
78
|
+
value: {
|
|
79
|
+
carouselRef,
|
|
80
|
+
api,
|
|
81
|
+
opts,
|
|
82
|
+
orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
83
|
+
scrollPrev,
|
|
84
|
+
scrollNext,
|
|
85
|
+
canScrollPrev,
|
|
86
|
+
canScrollNext
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ jsx(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
ref,
|
|
92
|
+
onKeyDownCapture: handleKeyDown,
|
|
93
|
+
className: cn("relative", className),
|
|
94
|
+
role: "region",
|
|
95
|
+
"aria-roledescription": "carousel",
|
|
96
|
+
...props,
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
Carousel.displayName = "Carousel";
|
|
105
|
+
var CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
|
|
106
|
+
const { carouselRef, orientation } = useCarousel();
|
|
107
|
+
return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
ref,
|
|
111
|
+
className: cn(
|
|
112
|
+
"flex",
|
|
113
|
+
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
...props
|
|
117
|
+
}
|
|
118
|
+
) });
|
|
119
|
+
});
|
|
120
|
+
CarouselContent.displayName = "CarouselContent";
|
|
121
|
+
var CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
|
|
122
|
+
const { orientation } = useCarousel();
|
|
123
|
+
return /* @__PURE__ */ jsx(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
ref,
|
|
127
|
+
role: "group",
|
|
128
|
+
"aria-roledescription": "slide",
|
|
129
|
+
className: cn(
|
|
130
|
+
"min-w-0 shrink-0 grow-0 basis-full",
|
|
131
|
+
orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
132
|
+
className
|
|
133
|
+
),
|
|
134
|
+
...props
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
});
|
|
138
|
+
CarouselItem.displayName = "CarouselItem";
|
|
139
|
+
var CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
140
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
141
|
+
return /* @__PURE__ */ jsxs(
|
|
142
|
+
Button,
|
|
143
|
+
{
|
|
144
|
+
ref,
|
|
145
|
+
variant,
|
|
146
|
+
size,
|
|
147
|
+
className: cn(
|
|
148
|
+
"absolute size-8 rounded-full",
|
|
149
|
+
orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
150
|
+
className
|
|
151
|
+
),
|
|
152
|
+
disabled: !canScrollPrev,
|
|
153
|
+
onClick: scrollPrev,
|
|
154
|
+
...props,
|
|
155
|
+
children: [
|
|
156
|
+
/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
|
|
157
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
});
|
|
162
|
+
CarouselPrevious.displayName = "CarouselPrevious";
|
|
163
|
+
var CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
164
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
165
|
+
return /* @__PURE__ */ jsxs(
|
|
166
|
+
Button,
|
|
167
|
+
{
|
|
168
|
+
ref,
|
|
169
|
+
variant,
|
|
170
|
+
size,
|
|
171
|
+
className: cn(
|
|
172
|
+
"absolute size-8 rounded-full",
|
|
173
|
+
orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
174
|
+
className
|
|
175
|
+
),
|
|
176
|
+
disabled: !canScrollNext,
|
|
177
|
+
onClick: scrollNext,
|
|
178
|
+
...props,
|
|
179
|
+
children: [
|
|
180
|
+
/* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4" }),
|
|
181
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
});
|
|
186
|
+
CarouselNext.displayName = "CarouselNext";
|
|
187
|
+
export {
|
|
188
|
+
Carousel,
|
|
189
|
+
CarouselContent,
|
|
190
|
+
CarouselItem,
|
|
191
|
+
CarouselNext,
|
|
192
|
+
CarouselPrevious
|
|
193
|
+
};
|
|
194
|
+
//# sourceMappingURL=carousel.mjs.map
|
|
@@ -0,0 +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":[]}
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"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; } }"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
|
|
5
|
+
|
|
6
|
+
// src/checkbox.tsx
|
|
7
|
+
var _react = require('react'); var React = _interopRequireWildcard(_react);
|
|
8
|
+
var _reactcheckbox = require('@radix-ui/react-checkbox'); var CheckboxPrimitive = _interopRequireWildcard(_reactcheckbox);
|
|
9
|
+
var _reacticons = require('@radix-ui/react-icons');
|
|
10
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
11
|
+
var Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
12
|
+
CheckboxPrimitive.Root,
|
|
13
|
+
{
|
|
14
|
+
ref,
|
|
15
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0,
|
|
16
|
+
"border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
...props,
|
|
20
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxPrimitive.Indicator, { className: "flex size-full items-center justify-center text-current", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "size-3.5" }) })
|
|
21
|
+
}
|
|
22
|
+
));
|
|
23
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
exports.Checkbox = Checkbox;
|
|
27
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.tsx"],"names":[],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,uBAAuB;AACnC,SAAS,iBAAiB;AAoBpB;AAbN,IAAM,WAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAmB;AAAA,EAAlB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,8BAAmB,6BAAlB,EAA4B,WAAU,2DACrC,8BAAC,aAAU,WAAU,YAAW,GAClC;AAAA;AACF,CACD;AACD,SAAS,cAAgC,uBAAK","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Checkbox\n * -------------------------------------------------------------------------- */\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxPrimitive.CheckboxProps\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n className={cn(\n \"border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex size-full items-center justify-center text-current\">\n <CheckIcon className=\"size-3.5\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Checkbox };\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
cn
|
|
4
|
+
} from "./chunk-UG3URV2Z.mjs";
|
|
5
|
+
|
|
6
|
+
// src/checkbox.tsx
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
9
|
+
import { CheckIcon } from "@radix-ui/react-icons";
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
var Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
12
|
+
CheckboxPrimitive.Root,
|
|
13
|
+
{
|
|
14
|
+
ref,
|
|
15
|
+
className: cn(
|
|
16
|
+
"border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
...props,
|
|
20
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex size-full items-center justify-center text-current", children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }) })
|
|
21
|
+
}
|
|
22
|
+
));
|
|
23
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
24
|
+
export {
|
|
25
|
+
Checkbox
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=checkbox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Checkbox\n * -------------------------------------------------------------------------- */\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxPrimitive.CheckboxProps\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n className={cn(\n \"border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex size-full items-center justify-center text-current\">\n <CheckIcon className=\"size-3.5\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,uBAAuB;AACnC,SAAS,iBAAiB;AAoBpB;AAbN,IAAM,WAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAmB;AAAA,EAAlB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,8BAAmB,6BAAlB,EAA4B,WAAU,2DACrC,8BAAC,aAAU,WAAU,YAAW,GAClC;AAAA;AACF,CACD;AACD,SAAS,cAAgC,uBAAK;","names":[]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"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; } }
|
|
2
|
+
|
|
3
|
+
var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
|
|
4
|
+
|
|
5
|
+
// src/button.tsx
|
|
6
|
+
var _react = require('react'); var React = _interopRequireWildcard(_react);
|
|
7
|
+
var _reactslot = require('@radix-ui/react-slot');
|
|
8
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
9
|
+
var buttonVariants = _chunkG3NP7M2Njs.cva.call(void 0, {
|
|
10
|
+
base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
|
|
14
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
|
|
15
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
16
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
17
|
+
outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
|
|
18
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm"
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
default: "h-10 px-4",
|
|
22
|
+
sm: "h-9 px-3",
|
|
23
|
+
lg: "h-11 px-8",
|
|
24
|
+
icon: "size-10"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
size: "default",
|
|
29
|
+
variant: "default"
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
var Button = React.forwardRef(
|
|
33
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
34
|
+
const Comp = asChild ? _reactslot.Slot : "button";
|
|
35
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
36
|
+
Comp,
|
|
37
|
+
{
|
|
38
|
+
ref,
|
|
39
|
+
type: asChild ? void 0 : "button",
|
|
40
|
+
className: buttonVariants({ variant, size, className }),
|
|
41
|
+
...props
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
Button.displayName = "Button";
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
exports.buttonVariants = buttonVariants; exports.Button = Button;
|
|
52
|
+
//# sourceMappingURL=chunk-4K26QLS2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx"],"names":[],"mappings":";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAkDf;AA1CN,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aACE;AAAA,MACF,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SACE;AAAA,MACF,WACE;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF,CAAC;AAYD,IAAM,SAAe;AAAA,EACnB,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,UAAU,SAAY;AAAA,QAC5B,WAAW,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC;AAAA,QACrD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Button\n * -------------------------------------------------------------------------- */\n\nconst buttonVariants = cva({\n base: \"focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n outline:\n \"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm\",\n },\n size: {\n default: \"h-10 px-4\",\n sm: \"h-9 px-3\",\n lg: \"h-11 px-8\",\n icon: \"size-10\",\n },\n },\n defaultVariants: {\n size: \"default\",\n variant: \"default\",\n },\n});\n\n/* -----------------------------------------------------------------------------\n * Component: Button\n * -------------------------------------------------------------------------- */\n\ninterface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n ref={ref}\n type={asChild ? undefined : \"button\"}\n className={buttonVariants({ variant, size, className })}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Button, buttonVariants, type ButtonProps };\n"]}
|