@codefast/ui 0.0.55 → 0.0.56
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/{chunk-MFYACCZV.mjs → chunk-77I644ZX.mjs} +1 -1
- package/dist/{chunk-MFYACCZV.mjs.map → chunk-77I644ZX.mjs.map} +1 -1
- package/dist/{chunk-VZVI3OHH.js → chunk-BEBSUUL4.js} +2 -2
- package/dist/{chunk-VZVI3OHH.js.map → chunk-BEBSUUL4.js.map} +1 -1
- package/dist/{chunk-4JHGPRLG.js → chunk-JI2ITVUE.js} +1 -1
- package/dist/{chunk-4JHGPRLG.js.map → chunk-JI2ITVUE.js.map} +1 -1
- package/dist/{chunk-X4BEEJEW.js → chunk-P2RMYMNK.js} +2 -2
- package/dist/chunk-P2RMYMNK.js.map +1 -0
- package/dist/{chunk-K63K4LTH.mjs → chunk-QXZKUXR2.mjs} +2 -2
- package/dist/chunk-QXZKUXR2.mjs.map +1 -0
- package/dist/{chunk-7ABWX5CF.mjs → chunk-TVVOS66G.mjs} +2 -2
- package/dist/{chunk-7ABWX5CF.mjs.map → chunk-TVVOS66G.mjs.map} +1 -1
- package/dist/{chunk-SCXRD727.js → chunk-VE44YFJR.js} +1 -1
- package/dist/{chunk-SCXRD727.js.map → chunk-VE44YFJR.js.map} +1 -1
- package/dist/{chunk-5RENVAXH.mjs → chunk-W3VRLCP7.mjs} +1 -1
- package/dist/{chunk-5RENVAXH.mjs.map → chunk-W3VRLCP7.mjs.map} +1 -1
- package/dist/plugin/animate.plugin.js +1 -1
- package/dist/plugin/animate.plugin.mjs +1 -1
- package/dist/react/alert-dialog.js +1 -1
- package/dist/react/alert-dialog.mjs +1 -1
- package/dist/react/alert.js.map +1 -1
- package/dist/react/alert.mjs.map +1 -1
- package/dist/react/badge.js.map +1 -1
- package/dist/react/badge.mjs.map +1 -1
- package/dist/react/button.js +1 -1
- package/dist/react/button.mjs +1 -1
- package/dist/react/calendar.js +1 -1
- package/dist/react/calendar.js.map +1 -1
- package/dist/react/calendar.mjs +1 -1
- package/dist/react/calendar.mjs.map +1 -1
- package/dist/react/carousel.js +1 -1
- package/dist/react/carousel.js.map +1 -1
- package/dist/react/carousel.mjs +1 -1
- package/dist/react/carousel.mjs.map +1 -1
- package/dist/react/checkbox-cards.js +1 -1
- package/dist/react/checkbox-cards.mjs +1 -1
- package/dist/react/checkbox-group.js +1 -1
- package/dist/react/checkbox-group.mjs +1 -1
- package/dist/react/checkbox-group.primitive.js +1 -1
- package/dist/react/checkbox-group.primitive.mjs +1 -1
- package/dist/react/data-table.js +1 -1
- package/dist/react/data-table.js.map +1 -1
- package/dist/react/data-table.mjs +1 -1
- package/dist/react/data-table.mjs.map +1 -1
- package/dist/react/form.js.map +1 -1
- package/dist/react/form.mjs.map +1 -1
- package/dist/react/input.js.map +1 -1
- package/dist/react/input.mjs.map +1 -1
- package/dist/react/pagination.js +1 -1
- package/dist/react/pagination.js.map +1 -1
- package/dist/react/pagination.mjs +1 -1
- package/dist/react/pagination.mjs.map +1 -1
- package/dist/react/sheet.js +1 -1
- package/dist/react/sheet.js.map +1 -1
- package/dist/react/sheet.mjs +1 -1
- package/dist/react/sheet.mjs.map +1 -1
- package/dist/react/toggle-group.js +1 -1
- package/dist/react/toggle-group.js.map +1 -1
- package/dist/react/toggle-group.mjs +1 -1
- package/dist/react/toggle-group.mjs.map +1 -1
- package/dist/react/toggle.js +1 -1
- package/dist/react/toggle.mjs +1 -1
- package/dist/tailwind.config.js +1 -1
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.mjs +1 -1
- package/dist/tailwind.config.mjs.map +1 -1
- package/package.json +2 -2
- package/plugin/animate.plugin.ts +1 -1
- package/src/react/alert.tsx +1 -1
- package/src/react/badge.tsx +1 -1
- package/src/react/button.tsx +1 -1
- package/src/react/calendar.tsx +1 -2
- package/src/react/carousel.tsx +2 -4
- package/src/react/checkbox-group.primitive.tsx +1 -2
- package/src/react/data-table.tsx +1 -1
- package/src/react/form.tsx +1 -1
- package/src/react/input.tsx +1 -1
- package/src/react/pagination.tsx +1 -2
- package/src/react/sheet.tsx +1 -1
- package/src/react/toggle-group.tsx +2 -4
- package/src/react/toggle.tsx +1 -1
- package/tailwind.config.ts +1 -1
- package/dist/chunk-K63K4LTH.mjs.map +0 -1
- package/dist/chunk-X4BEEJEW.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/calendar.tsx"],"names":["DayPicker","ChevronLeftIcon","ChevronRightIcon","jsx","ChevronLeft","_","props","ChevronRight","Calendar","className","classNames","showOutsideDays","cn","buttonVariants"],"mappings":"4HAGA,OAAS,aAAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/react/calendar.tsx"],"names":["DayPicker","ChevronLeftIcon","ChevronRightIcon","jsx","ChevronLeft","_","props","ChevronRight","Calendar","className","classNames","showOutsideDays","cn","buttonVariants"],"mappings":"4HAGA,OAAS,aAAAA,MAA4E,mBACrF,OAAS,mBAAAC,EAAiB,oBAAAC,MAAwB,wBASzC,cAAAC,MAAA,oBADT,SAASC,EAAY,CAAE,SAAUC,EAAG,GAAGC,CAAM,EAAuC,CAClF,OAAOH,EAACF,EAAA,CAAgB,UAAU,SAAU,GAAGK,EAAO,CACxD,CAEA,SAASC,EAAa,CAAE,SAAUF,EAAG,GAAGC,CAAM,EAAuC,CACnF,OAAOH,EAACD,EAAA,CAAiB,UAAU,SAAU,GAAGI,EAAO,CACzD,CAIA,SAASE,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAM,GAAGL,CAAM,EAAqC,CAC/G,OACEH,EAACH,EAAA,CACC,gBAAiBW,EACjB,UAAWC,EAAG,MAAOH,CAAS,EAC9B,WAAY,CACV,OAAQ,gEACR,MAAO,YACP,QAAS,iDACT,cAAe,sBACf,IAAK,8BACL,WAAYI,EAAe,CACzB,QAAS,UACT,UAAW,wDACb,CAAC,EACD,oBAAqB,kBACrB,gBAAiB,mBACjB,MAAO,mCACP,SAAU,OACV,UAAW,2DACX,IAAK,mBACL,KAAMD,EACJ,oNACAN,EAAM,OAAS,QACX,uKACA,qCACN,EACA,IAAKO,EAAe,CAClB,QAAS,QACT,UAAW,kDACb,CAAC,EACD,gBAAiB,kBACjB,cAAe,gBACf,aACE,mIACF,UAAW,mCACX,YACE,uIACF,aAAc,mCACd,iBAAkB,+DAClB,WAAY,YACZ,GAAGH,CACL,EACA,WAAY,CACV,SAAUN,EACV,UAAWG,CACb,EACC,GAAGD,EACN,CAEJ","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayPicker, type DateRange, type DayPickerProps, type StyledComponent } from 'react-day-picker';\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport { cn } from '../lib/utils';\nimport { buttonVariants } from './button';\n\n/* -----------------------------------------------------------------------------\n * Component: Calendar\n * -------------------------------------------------------------------------- */\n\nfunction ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {\n return <ChevronLeftIcon className=\"size-4\" {...props} />;\n}\n\nfunction ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {\n return <ChevronRightIcon className=\"size-4\" {...props} />;\n}\n\ntype CalendarProps = DayPickerProps;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn('p-3', className)}\n classNames={{\n months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n month: 'space-y-4',\n caption: 'flex justify-center pt-1 relative items-center',\n caption_label: 'text-sm font-medium',\n nav: 'space-x-1 flex items-center',\n nav_button: buttonVariants({\n variant: 'outline',\n className: 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n }),\n nav_button_previous: 'absolute left-1',\n nav_button_next: 'absolute right-1',\n table: 'w-full border-collapse space-y-1',\n head_row: 'flex',\n head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-xs',\n row: 'flex w-full mt-2',\n cell: cn(\n 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',\n props.mode === 'range'\n ? '[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n : '[&:has([aria-selected])]:rounded-md',\n ),\n day: buttonVariants({\n variant: 'ghost',\n className: 'size-9 p-0 font-normal aria-selected:opacity-100',\n }),\n day_range_start: 'day-range-start',\n day_range_end: 'day-range-end',\n day_selected:\n 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',\n day_today: 'bg-accent text-accent-foreground',\n day_outside:\n 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n day_disabled: 'text-muted-foreground opacity-50',\n day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',\n day_hidden: 'invisible',\n ...classNames,\n }}\n components={{\n IconLeft: ChevronLeft,\n IconRight: ChevronRight,\n }}\n {...props}\n />\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Calendar, type CalendarProps, type DateRange };\n"]}
|
package/dist/react/calendar.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{a as r}from"../chunk-
|
|
1
|
+
"use client";import{a as r}from"../chunk-TVVOS66G.mjs";import"../chunk-BNKSZEF2.mjs";import{b as a}from"../chunk-LEUB3C3L.mjs";import{DayPicker as s}from"react-day-picker";import{ChevronLeftIcon as c,ChevronRightIcon as i}from"@radix-ui/react-icons";import{jsx as n}from"react/jsx-runtime";function l({children:t,...e}){return n(c,{className:"size-4",...e})}function m({children:t,...e}){return n(i,{className:"size-4",...e})}function g({className:t,classNames:e,showOutsideDays:d=!0,...o}){return n(s,{showOutsideDays:d,className:a("p-3",t),classNames:{months:"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",month:"space-y-4",caption:"flex justify-center pt-1 relative items-center",caption_label:"text-sm font-medium",nav:"space-x-1 flex items-center",nav_button:r({variant:"outline",className:"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"}),nav_button_previous:"absolute left-1",nav_button_next:"absolute right-1",table:"w-full border-collapse space-y-1",head_row:"flex",head_cell:"text-muted-foreground rounded-md w-8 font-normal text-xs",row:"flex w-full mt-2",cell:a("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",o.mode==="range"?"[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":"[&:has([aria-selected])]:rounded-md"),day:r({variant:"ghost",className:"size-9 p-0 font-normal aria-selected:opacity-100"}),day_range_start:"day-range-start",day_range_end:"day-range-end",day_selected:"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",day_today:"bg-accent text-accent-foreground",day_outside:"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",day_disabled:"text-muted-foreground opacity-50",day_range_middle:"aria-selected:bg-accent aria-selected:text-accent-foreground",day_hidden:"invisible",...e},components:{IconLeft:l,IconRight:m},...o})}export{g as Calendar};
|
|
2
2
|
//# sourceMappingURL=calendar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport { cn } from '../lib/utils';\nimport { buttonVariants } from './button';\
|
|
1
|
+
{"version":3,"sources":["../../src/react/calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayPicker, type DateRange, type DayPickerProps, type StyledComponent } from 'react-day-picker';\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport { cn } from '../lib/utils';\nimport { buttonVariants } from './button';\n\n/* -----------------------------------------------------------------------------\n * Component: Calendar\n * -------------------------------------------------------------------------- */\n\nfunction ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {\n return <ChevronLeftIcon className=\"size-4\" {...props} />;\n}\n\nfunction ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {\n return <ChevronRightIcon className=\"size-4\" {...props} />;\n}\n\ntype CalendarProps = DayPickerProps;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn('p-3', className)}\n classNames={{\n months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n month: 'space-y-4',\n caption: 'flex justify-center pt-1 relative items-center',\n caption_label: 'text-sm font-medium',\n nav: 'space-x-1 flex items-center',\n nav_button: buttonVariants({\n variant: 'outline',\n className: 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n }),\n nav_button_previous: 'absolute left-1',\n nav_button_next: 'absolute right-1',\n table: 'w-full border-collapse space-y-1',\n head_row: 'flex',\n head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-xs',\n row: 'flex w-full mt-2',\n cell: cn(\n 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',\n props.mode === 'range'\n ? '[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n : '[&:has([aria-selected])]:rounded-md',\n ),\n day: buttonVariants({\n variant: 'ghost',\n className: 'size-9 p-0 font-normal aria-selected:opacity-100',\n }),\n day_range_start: 'day-range-start',\n day_range_end: 'day-range-end',\n day_selected:\n 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',\n day_today: 'bg-accent text-accent-foreground',\n day_outside:\n 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n day_disabled: 'text-muted-foreground opacity-50',\n day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',\n day_hidden: 'invisible',\n ...classNames,\n }}\n components={{\n IconLeft: ChevronLeft,\n IconRight: ChevronRight,\n }}\n {...props}\n />\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Calendar, type CalendarProps, type DateRange };\n"],"mappings":"+HAGA,OAAS,aAAAA,MAA4E,mBACrF,OAAS,mBAAAC,EAAiB,oBAAAC,MAAwB,wBASzC,cAAAC,MAAA,oBADT,SAASC,EAAY,CAAE,SAAUC,EAAG,GAAGC,CAAM,EAAuC,CAClF,OAAOH,EAACI,EAAA,CAAgB,UAAU,SAAU,GAAGD,EAAO,CACxD,CAEA,SAASE,EAAa,CAAE,SAAUH,EAAG,GAAGC,CAAM,EAAuC,CACnF,OAAOH,EAACM,EAAA,CAAiB,UAAU,SAAU,GAAGH,EAAO,CACzD,CAIA,SAASI,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAM,GAAGP,CAAM,EAAqC,CAC/G,OACEH,EAACW,EAAA,CACC,gBAAiBD,EACjB,UAAWE,EAAG,MAAOJ,CAAS,EAC9B,WAAY,CACV,OAAQ,gEACR,MAAO,YACP,QAAS,iDACT,cAAe,sBACf,IAAK,8BACL,WAAYK,EAAe,CACzB,QAAS,UACT,UAAW,wDACb,CAAC,EACD,oBAAqB,kBACrB,gBAAiB,mBACjB,MAAO,mCACP,SAAU,OACV,UAAW,2DACX,IAAK,mBACL,KAAMD,EACJ,oNACAT,EAAM,OAAS,QACX,uKACA,qCACN,EACA,IAAKU,EAAe,CAClB,QAAS,QACT,UAAW,kDACb,CAAC,EACD,gBAAiB,kBACjB,cAAe,gBACf,aACE,mIACF,UAAW,mCACX,YACE,uIACF,aAAc,mCACd,iBAAkB,+DAClB,WAAY,YACZ,GAAGJ,CACL,EACA,WAAY,CACV,SAAUR,EACV,UAAWI,CACb,EACC,GAAGF,EACN,CAEJ","names":["DayPicker","ChevronLeftIcon","ChevronRightIcon","jsx","ChevronLeft","_","props","ChevronLeftIcon","ChevronRight","ChevronRightIcon","Calendar","className","classNames","showOutsideDays","DayPicker","cn","buttonVariants"]}
|
package/dist/react/carousel.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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";var
|
|
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";var _chunkBEBSUUL4js = require('../chunk-BEBSUUL4.js');require('../chunk-46W6RAYD.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _react = require('react'); var e = _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 N="Carousel",[D]=_reactcontext.createContextScope.call(void 0, N),[U,f]=D(N),_= exports.Carousel =e.forwardRef(({__scopeCarousel:l,children:a,orientation:s,opts:r,setApi:t,plugins:c,className:p,...C},m)=>{let[T,o]=_emblacarouselreact2.default.call(void 0, {...r,axis:s==="vertical"?"y":"x"},c),[L,A]=e.useState(!1),[M,w]=e.useState(!1),P=e.useCallback(u=>{u&&(A(u.canScrollPrev()),w(u.canScrollNext()))},[]),y=e.useCallback(()=>{_optionalChain([o, 'optionalAccess', _2 => _2.scrollPrev, 'call', _3 => _3()])},[o]),v=e.useCallback(()=>{_optionalChain([o, 'optionalAccess', _4 => _4.scrollNext, 'call', _5 => _5()])},[o]),I=e.useCallback(u=>{u.key==="ArrowLeft"?(u.preventDefault(),y()):u.key==="ArrowRight"&&(u.preventDefault(),v())},[y,v]);return e.useEffect(()=>{!o||!t||t(o)},[o,t]),e.useEffect(()=>{if(o)return P(o),o.on("reInit",P),o.on("select",P),()=>{o.off("select",P)}},[o,P]),_jsxruntime.jsx.call(void 0, U,{scope:l,carouselRef:T,api:o,opts:r,orientation:_nullishCoalesce(s, () => ((_optionalChain([r, 'optionalAccess', _6 => _6.axis])==="y"?"vertical":"horizontal"))),scrollPrev:y,scrollNext:v,canScrollPrev:L,canScrollNext:M,children:_jsxruntime.jsx.call(void 0, "div",{ref:m,onKeyDownCapture:I,className:_chunkHQ4AUOQMjs.b.call(void 0, "relative",p),role:"region","aria-roledescription":"carousel",...C,children:a})})});_.displayName=N;var E="CarouselContent",g= exports.CarouselContent =e.forwardRef(({__scopeCarousel:l,className:a,...s},r)=>{let{carouselRef:t,orientation:c}=f(E,l);return _jsxruntime.jsx.call(void 0, "div",{ref:t,className:"overflow-hidden",children:_jsxruntime.jsx.call(void 0, "div",{ref:r,className:_chunkHQ4AUOQMjs.b.call(void 0, "flex",c==="horizontal"?"-ml-4":"-mt-4 flex-col",a),...s})})});g.displayName=E;var R="CarouselItem",k= exports.CarouselItem =e.forwardRef(({__scopeCarousel:l,className:a,...s},r)=>{let{orientation:t}=f(R,l);return _jsxruntime.jsx.call(void 0, "div",{ref:r,role:"group","aria-roledescription":"slide",className:_chunkHQ4AUOQMjs.b.call(void 0, "min-w-0 shrink-0 grow-0 basis-full",t==="horizontal"?"pl-4":"pt-4",a),...s})});k.displayName=R;var x="CarouselPrevious",O= exports.CarouselPrevious =e.forwardRef(({__scopeCarousel:l,className:a,variant:s="outline",size:r="icon",...t},c)=>{let{orientation:p,scrollPrev:C,canScrollPrev:m}=f(x,l);return _jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{ref:c,variant:s,size:r,className:_chunkHQ4AUOQMjs.b.call(void 0, "absolute size-8 rounded-full",p==="horizontal"?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",a),disabled:!m,onClick:C,...t,children:[_jsxruntime.jsx.call(void 0, _reacticons.ArrowLeftIcon,{className:"size-4"}),_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Previous slide"})]})});O.displayName=x;var S="CarouselNext",K= exports.CarouselNext =e.forwardRef(({__scopeCarousel:l,className:a,variant:s="outline",size:r="icon",...t},c)=>{let{orientation:p,scrollNext:C,canScrollNext:m}=f(S,l);return _jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{ref:c,variant:s,size:r,className:_chunkHQ4AUOQMjs.b.call(void 0, "absolute size-8 rounded-full",p==="horizontal"?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",a),disabled:!m,onClick:C,...t,children:[_jsxruntime.jsx.call(void 0, _reacticons.ArrowRightIcon,{className:"size-4"}),_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Next slide"})]})});K.displayName=S;exports.Carousel = _; exports.CarouselContent = g; exports.CarouselItem = k; exports.CarouselNext = K; exports.CarouselPrevious = O;
|
|
2
2
|
//# sourceMappingURL=carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/carousel.tsx"],"names":["React","useEmblaCarousel","ArrowLeftIcon","ArrowRightIcon","createContextScope","jsx","jsxs","CAROUSEL_NAME","createCarouselContext","CarouselProvider","useCarouselContext","Carousel","__scopeCarousel","children","orientation","opts","setApi","plugins","className","props","ref","carouselRef","api","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","carouselApi","scrollPrev","scrollNext","handleKeyDown","event","cn","CAROUSEL_CONTENT_NAME","CarouselContent","CAROUSEL_ITEM_NAME","CarouselItem","CAROUSEL_PREVIOUS_NAME","CarouselPrevious","variant","size","Button","CAROUSEL_NEXT_NAME","CarouselNext"],"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 } from '@radix-ui/react-context';\nimport { cn } from '../lib/utils';\nimport { Button } from './button';\nimport type { ButtonProps } from './button';\nimport type { Scope } from '@radix-ui/react-context';\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, children, orientation, opts, setApi, plugins, className, ...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"]}
|
|
1
|
+
{"version":3,"sources":["../../src/react/carousel.tsx"],"names":["React","useEmblaCarousel","ArrowLeftIcon","ArrowRightIcon","createContextScope","jsx","jsxs","CAROUSEL_NAME","createCarouselContext","CarouselProvider","useCarouselContext","Carousel","__scopeCarousel","children","orientation","opts","setApi","plugins","className","props","ref","carouselRef","api","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","carouselApi","scrollPrev","scrollNext","handleKeyDown","event","cn","CAROUSEL_CONTENT_NAME","CarouselContent","CAROUSEL_ITEM_NAME","CarouselItem","CAROUSEL_PREVIOUS_NAME","CarouselPrevious","variant","size","Button","CAROUSEL_NEXT_NAME","CarouselNext"],"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 '../lib/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, children, orientation, opts, setApi, plugins, className, ...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/react/carousel.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{b as
|
|
1
|
+
"use client";import{b as d}from"../chunk-TVVOS66G.mjs";import"../chunk-BNKSZEF2.mjs";import{b as i}from"../chunk-LEUB3C3L.mjs";import*as e from"react";import h from"embla-carousel-react";import{ArrowLeftIcon as z,ArrowRightIcon as H}from"@radix-ui/react-icons";import{createContextScope as B}from"@radix-ui/react-context";import{jsx as n,jsxs as b}from"react/jsx-runtime";var N="Carousel",[D]=B(N),[U,f]=D(N),_=e.forwardRef(({__scopeCarousel:l,children:a,orientation:s,opts:r,setApi:t,plugins:c,className:p,...C},m)=>{let[T,o]=h({...r,axis:s==="vertical"?"y":"x"},c),[L,A]=e.useState(!1),[M,w]=e.useState(!1),P=e.useCallback(u=>{u&&(A(u.canScrollPrev()),w(u.canScrollNext()))},[]),y=e.useCallback(()=>{o?.scrollPrev()},[o]),v=e.useCallback(()=>{o?.scrollNext()},[o]),I=e.useCallback(u=>{u.key==="ArrowLeft"?(u.preventDefault(),y()):u.key==="ArrowRight"&&(u.preventDefault(),v())},[y,v]);return e.useEffect(()=>{!o||!t||t(o)},[o,t]),e.useEffect(()=>{if(o)return P(o),o.on("reInit",P),o.on("select",P),()=>{o.off("select",P)}},[o,P]),n(U,{scope:l,carouselRef:T,api:o,opts:r,orientation:s??(r?.axis==="y"?"vertical":"horizontal"),scrollPrev:y,scrollNext:v,canScrollPrev:L,canScrollNext:M,children:n("div",{ref:m,onKeyDownCapture:I,className:i("relative",p),role:"region","aria-roledescription":"carousel",...C,children:a})})});_.displayName=N;var E="CarouselContent",g=e.forwardRef(({__scopeCarousel:l,className:a,...s},r)=>{let{carouselRef:t,orientation:c}=f(E,l);return n("div",{ref:t,className:"overflow-hidden",children:n("div",{ref:r,className:i("flex",c==="horizontal"?"-ml-4":"-mt-4 flex-col",a),...s})})});g.displayName=E;var R="CarouselItem",k=e.forwardRef(({__scopeCarousel:l,className:a,...s},r)=>{let{orientation:t}=f(R,l);return n("div",{ref:r,role:"group","aria-roledescription":"slide",className:i("min-w-0 shrink-0 grow-0 basis-full",t==="horizontal"?"pl-4":"pt-4",a),...s})});k.displayName=R;var x="CarouselPrevious",O=e.forwardRef(({__scopeCarousel:l,className:a,variant:s="outline",size:r="icon",...t},c)=>{let{orientation:p,scrollPrev:C,canScrollPrev:m}=f(x,l);return b(d,{ref:c,variant:s,size:r,className:i("absolute size-8 rounded-full",p==="horizontal"?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",a),disabled:!m,onClick:C,...t,children:[n(z,{className:"size-4"}),n("span",{className:"sr-only",children:"Previous slide"})]})});O.displayName=x;var S="CarouselNext",K=e.forwardRef(({__scopeCarousel:l,className:a,variant:s="outline",size:r="icon",...t},c)=>{let{orientation:p,scrollNext:C,canScrollNext:m}=f(S,l);return b(d,{ref:c,variant:s,size:r,className:i("absolute size-8 rounded-full",p==="horizontal"?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",a),disabled:!m,onClick:C,...t,children:[n(H,{className:"size-4"}),n("span",{className:"sr-only",children:"Next slide"})]})});K.displayName=S;export{_ as Carousel,g as CarouselContent,k as CarouselItem,K as CarouselNext,O as CarouselPrevious};
|
|
2
2
|
//# sourceMappingURL=carousel.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/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 } from '@radix-ui/react-context';\nimport { cn } from '../lib/utils';\nimport { Button } from './button';\nimport type { ButtonProps } from './button';\nimport type { Scope } from '@radix-ui/react-context';\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, children, orientation, opts, setApi, plugins, className, ...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":["React","useEmblaCarousel","ArrowLeftIcon","ArrowRightIcon","createContextScope","jsx","jsxs","CAROUSEL_NAME","createCarouselContext","createContextScope","CarouselProvider","useCarouselContext","Carousel","__scopeCarousel","children","orientation","opts","setApi","plugins","className","props","ref","carouselRef","api","useEmblaCarousel","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","carouselApi","scrollPrev","scrollNext","handleKeyDown","event","cn","CAROUSEL_CONTENT_NAME","CarouselContent","CAROUSEL_ITEM_NAME","CarouselItem","CAROUSEL_PREVIOUS_NAME","CarouselPrevious","variant","size","Button","ArrowLeftIcon","CAROUSEL_NEXT_NAME","CarouselNext","ArrowRightIcon"]}
|
|
1
|
+
{"version":3,"sources":["../../src/react/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 '../lib/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, children, orientation, opts, setApi, plugins, className, ...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":["React","useEmblaCarousel","ArrowLeftIcon","ArrowRightIcon","createContextScope","jsx","jsxs","CAROUSEL_NAME","createCarouselContext","createContextScope","CarouselProvider","useCarouselContext","Carousel","__scopeCarousel","children","orientation","opts","setApi","plugins","className","props","ref","carouselRef","api","useEmblaCarousel","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","carouselApi","scrollPrev","scrollNext","handleKeyDown","event","cn","CAROUSEL_CONTENT_NAME","CarouselContent","CAROUSEL_ITEM_NAME","CarouselItem","CAROUSEL_PREVIOUS_NAME","CarouselPrevious","variant","size","Button","ArrowLeftIcon","CAROUSEL_NEXT_NAME","CarouselNext","ArrowRightIcon"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
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";var
|
|
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";var _chunkP2RMYMNKjs = require('../chunk-P2RMYMNK.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _react = require('react'); var a = _interopRequireWildcard(_react);var _reacticons = require('@radix-ui/react-icons');var _jsxruntime = require('react/jsx-runtime');var b=a.forwardRef(({className:r,...t},i)=>_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.e,{className:_chunkHQ4AUOQMjs.b.call(void 0, "grid gap-2",r),...t,ref:i}));b.displayName=_chunkP2RMYMNKjs.e.displayName;var l=a.forwardRef(({children:r,className:t,checkboxClassName:i,...p},C)=>_jsxruntime.jsxs.call(void 0, "label",{className:_chunkHQ4AUOQMjs.b.call(void 0, "flex items-center justify-center gap-4 rounded-md border p-4",t),children:[r,_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.f,{ref:C,className:_chunkHQ4AUOQMjs.b.call(void 0, "border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",i),...p,children:_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.d,{className:"flex size-full items-center justify-center text-current",children:_jsxruntime.jsx.call(void 0, _reacticons.CheckIcon,{className:"size-3.5"})})})]}));l.displayName=_chunkP2RMYMNKjs.f.displayName;exports.CheckboxCards = b; exports.CheckboxCardsItem = l;
|
|
2
2
|
//# sourceMappingURL=checkbox-cards.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{d as m,e as c,f as s}from"../chunk-
|
|
1
|
+
"use client";import{d as m,e as c,f as s}from"../chunk-QXZKUXR2.mjs";import{b as e}from"../chunk-LEUB3C3L.mjs";import*as a from"react";import{CheckIcon as d}from"@radix-ui/react-icons";import{jsx as o,jsxs as n}from"react/jsx-runtime";var b=a.forwardRef(({className:r,...t},i)=>o(c,{className:e("grid gap-2",r),...t,ref:i}));b.displayName=c.displayName;var l=a.forwardRef(({children:r,className:t,checkboxClassName:i,...p},C)=>n("label",{className:e("flex items-center justify-center gap-4 rounded-md border p-4",t),children:[r,o(s,{ref:C,className:e("border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",i),...p,children:o(m,{className:"flex size-full items-center justify-center text-current",children:o(d,{className:"size-3.5"})})})]}));l.displayName=s.displayName;export{b as CheckboxCards,l as CheckboxCardsItem};
|
|
2
2
|
//# sourceMappingURL=checkbox-cards.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
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";var
|
|
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";var _chunkP2RMYMNKjs = require('../chunk-P2RMYMNK.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _react = require('react'); var p = _interopRequireWildcard(_react);var _reacticons = require('@radix-ui/react-icons');var _jsxruntime = require('react/jsx-runtime');var a=p.forwardRef(({className:o,...r},t)=>_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.e,{ref:t,className:_chunkHQ4AUOQMjs.b.call(void 0, "grid gap-2",o),...r}));a.displayName="CheckboxGroup";var b=p.forwardRef(({className:o,...r},t)=>_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.f,{ref:t,className:_chunkHQ4AUOQMjs.b.call(void 0, "border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",o),...r,children:_jsxruntime.jsx.call(void 0, _chunkP2RMYMNKjs.d,{className:"flex size-full items-center justify-center text-current",children:_jsxruntime.jsx.call(void 0, _reacticons.CheckIcon,{className:"size-3.5"})})}));b.displayName="CheckboxGroupItem";exports.CheckboxGroup = a; exports.CheckboxGroupItem = b;
|
|
2
2
|
//# sourceMappingURL=checkbox-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{d as c,e as m,f as u}from"../chunk-
|
|
1
|
+
"use client";import{d as c,e as m,f as u}from"../chunk-QXZKUXR2.mjs";import{b as i}from"../chunk-LEUB3C3L.mjs";import*as p from"react";import{CheckIcon as s}from"@radix-ui/react-icons";import{jsx as e}from"react/jsx-runtime";var a=p.forwardRef(({className:o,...r},t)=>e(m,{ref:t,className:i("grid gap-2",o),...r}));a.displayName="CheckboxGroup";var b=p.forwardRef(({className:o,...r},t)=>e(u,{ref:t,className:i("border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",o),...r,children:e(c,{className:"flex size-full items-center justify-center text-current",children:e(s,{className:"size-3.5"})})}));b.displayName="CheckboxGroupItem";export{a as CheckboxGroup,b as CheckboxGroupItem};
|
|
2
2
|
//# sourceMappingURL=checkbox-group.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkP2RMYMNKjs = require('../chunk-P2RMYMNK.js');exports.CheckboxGroup = _chunkP2RMYMNKjs.b; exports.CheckboxGroupIndicator = _chunkP2RMYMNKjs.d; exports.CheckboxGroupItem = _chunkP2RMYMNKjs.c; exports.Indicator = _chunkP2RMYMNKjs.g; exports.Item = _chunkP2RMYMNKjs.f; exports.Root = _chunkP2RMYMNKjs.e; exports.createCheckboxGroupScope = _chunkP2RMYMNKjs.a;
|
|
2
2
|
//# sourceMappingURL=checkbox-group.primitive.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b,c,d,e,f,g}from"../chunk-
|
|
1
|
+
import{a,b,c,d,e,f,g}from"../chunk-QXZKUXR2.mjs";export{b as CheckboxGroup,d as CheckboxGroupIndicator,c as CheckboxGroupItem,g as Indicator,f as Item,e as Root,a as createCheckboxGroupScope};
|
|
2
2
|
//# sourceMappingURL=checkbox-group.primitive.mjs.map
|
package/dist/react/data-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";var _chunkDCDB56BOjs = require('../chunk-DCDB56BO.js');var _chunkRHFF4JNHjs = require('../chunk-RHFF4JNH.js');var
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";var _chunkDCDB56BOjs = require('../chunk-DCDB56BO.js');var _chunkRHFF4JNHjs = require('../chunk-RHFF4JNH.js');var _chunkBEBSUUL4js = require('../chunk-BEBSUUL4.js');require('../chunk-46W6RAYD.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _reacticons = require('@radix-ui/react-icons');var _jsxruntime = require('react/jsx-runtime');function A({table:a}){return _jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.a,{children:[_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.b,{asChild:!0,children:_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"outline",size:"sm",className:"ml-auto hidden h-8 lg:flex",children:[_jsxruntime.jsx.call(void 0, _reacticons.MixerHorizontalIcon,{className:"mr-2 size-4"}),"View"]})}),_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.h,{align:"end",className:"w-36",children:[_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.l,{children:"Toggle columns"}),_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.m,{}),a.getAllColumns().filter(n=>typeof n.accessorFn<"u"&&n.getCanHide()).map(n=>_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.j,{className:"capitalize",checked:n.getIsVisible(),onCheckedChange:s=>{n.toggleVisibility(!!s)},children:n.id},n.id))]})]})}function B({table:a,className:n,...s}){return _jsxruntime.jsxs.call(void 0, "div",{className:_chunkHQ4AUOQMjs.b.call(void 0, "flex items-center justify-between px-2",n),...s,children:[_jsxruntime.jsxs.call(void 0, "div",{className:"text-muted-foreground flex-1 text-sm",children:[a.getFilteredSelectedRowModel().rows.length," of ",a.getFilteredRowModel().rows.length," row(s) selected."]}),_jsxruntime.jsxs.call(void 0, "div",{className:"flex items-center space-x-6 lg:space-x-8",children:[_jsxruntime.jsxs.call(void 0, "div",{className:"flex items-center space-x-2",children:[_jsxruntime.jsx.call(void 0, "p",{className:"text-sm font-medium",children:"Rows per page"}),_jsxruntime.jsxs.call(void 0, _chunkDCDB56BOjs.a,{value:String(a.getState().pagination.pageSize),onValueChange:i=>{a.setPageSize(Number(i))},children:[_jsxruntime.jsx.call(void 0, _chunkDCDB56BOjs.d,{className:"w-18 h-8",children:_jsxruntime.jsx.call(void 0, _chunkDCDB56BOjs.c,{placeholder:a.getState().pagination.pageSize})}),_jsxruntime.jsx.call(void 0, _chunkDCDB56BOjs.g,{side:"top",children:[10,20,30,40,50].map(i=>_jsxruntime.jsx.call(void 0, _chunkDCDB56BOjs.i,{value:String(i),children:i},i))})]})]}),_jsxruntime.jsxs.call(void 0, "div",{className:"flex w-28 items-center justify-center text-sm font-medium",children:["Page ",a.getState().pagination.pageIndex+1," of ",a.getPageCount()]}),_jsxruntime.jsxs.call(void 0, "div",{className:"flex items-center space-x-2",children:[_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"outline",size:"icon-xs",className:"hidden lg:flex",onClick:()=>{a.setPageIndex(0)},disabled:!a.getCanPreviousPage(),children:[_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Go to first page"}),_jsxruntime.jsx.call(void 0, _reacticons.DoubleArrowLeftIcon,{className:"size-4"})]}),_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"outline",size:"icon-xs",onClick:()=>{a.previousPage()},disabled:!a.getCanPreviousPage(),children:[_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Go to previous page"}),_jsxruntime.jsx.call(void 0, _reacticons.ChevronLeftIcon,{className:"size-4"})]}),_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"outline",size:"icon-xs",onClick:()=>{a.nextPage()},disabled:!a.getCanNextPage(),children:[_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Go to next page"}),_jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon,{className:"size-4"})]}),_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"outline",size:"icon-xs",className:"hidden lg:flex",onClick:()=>{a.setPageIndex(a.getPageCount()-1)},disabled:!a.getCanNextPage(),children:[_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:"Go to last page"}),_jsxruntime.jsx.call(void 0, _reacticons.DoubleArrowRightIcon,{className:"size-4"})]})]})]})]})}function L({column:a,title:n,className:s}){return a.getCanSort()?_jsxruntime.jsx.call(void 0, "div",{className:_chunkHQ4AUOQMjs.b.call(void 0, "flex items-center space-x-2",s),children:_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.a,{children:[_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.b,{asChild:!0,children:_jsxruntime.jsxs.call(void 0, _chunkBEBSUUL4js.b,{variant:"ghost",size:"xs",className:"data-[state=open]:bg-accent -ml-3",children:[_jsxruntime.jsx.call(void 0, "span",{children:n}),_jsxruntime.jsx.call(void 0, z,{sorted:a.getIsSorted()})]})}),_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.h,{align:"start",children:[_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.i,{onClick:()=>{a.toggleSorting(!1)},children:[_jsxruntime.jsx.call(void 0, _reacticons.ArrowUpIcon,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Asc"]}),_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.i,{onClick:()=>{a.toggleSorting(!0)},children:[_jsxruntime.jsx.call(void 0, _reacticons.ArrowDownIcon,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Desc"]}),_jsxruntime.jsx.call(void 0, _chunkRHFF4JNHjs.m,{}),_jsxruntime.jsxs.call(void 0, _chunkRHFF4JNHjs.i,{onClick:()=>{a.toggleVisibility(!1)},children:[_jsxruntime.jsx.call(void 0, _reacticons.EyeNoneIcon,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Hide"]})]})]})}):_jsxruntime.jsx.call(void 0, "div",{className:s,children:n})}function z({sorted:a}){switch(a){case"desc":return _jsxruntime.jsx.call(void 0, _reacticons.ArrowDownIcon,{className:"ml-2 size-4"});case"asc":return _jsxruntime.jsx.call(void 0, _reacticons.ArrowUpIcon,{className:"ml-2 size-4"});default:return _jsxruntime.jsx.call(void 0, _reacticons.CaretSortIcon,{className:"ml-2 size-4"})}}exports.DataTableColumnHeader = L; exports.DataTablePagination = B; exports.DataTableViewOptions = A;
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/data-table.tsx"],"names":["ArrowDownIcon","ArrowUpIcon","CaretSortIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowLeftIcon","DoubleArrowRightIcon","EyeNoneIcon","MixerHorizontalIcon","jsx","jsxs","DataTableViewOptions","table","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value","DataTablePagination","className","props","cn","Select","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","DataTableColumnHeader","title","SortIcon","DropdownMenuItem","sorted"],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\nimport { cn } from '../lib/utils';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\nimport type * as ReactTable from '@tanstack/react-table';\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\ninterface DataTableViewOptionsProps<TData> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"ml-auto hidden h-8 lg:flex\">\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-36\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\ninterface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: DataTablePaginationProps<TData>): React.JSX.Element {\n return (\n <div className={cn('flex items-center justify-between px-2', className)} {...props}>\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"w-18 h-8\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-28 items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\ninterface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={className}>{title}</div>;\n }\n\n return (\n <div className={cn('flex items-center space-x-2', className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"xs\" className=\"data-[state=open]:bg-accent -ml-3\">\n <span>{title}</span>\n <SortIcon sorted={column.getIsSorted()} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\nfunction SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {\n switch (sorted) {\n case 'desc':\n return <ArrowDownIcon className=\"ml-2 size-4\" />;\n\n case 'asc':\n return <ArrowUpIcon className=\"ml-2 size-4\" />;\n\n default:\n return <CaretSortIcon className=\"ml-2 size-4\" />;\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n DataTableViewOptions,\n DataTablePagination,\n DataTableColumnHeader,\n type DataTableViewOptionsProps,\n type DataTablePaginationProps,\n type DataTableColumnHeaderProps,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/react/data-table.tsx"],"names":["ArrowDownIcon","ArrowUpIcon","CaretSortIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowLeftIcon","DoubleArrowRightIcon","EyeNoneIcon","MixerHorizontalIcon","jsx","jsxs","DataTableViewOptions","table","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value","DataTablePagination","className","props","cn","Select","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","DataTableColumnHeader","title","SortIcon","DropdownMenuItem","sorted"],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\nimport type * as ReactTable from '@tanstack/react-table';\nimport { cn } from '../lib/utils';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\ninterface DataTableViewOptionsProps<TData> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"ml-auto hidden h-8 lg:flex\">\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-36\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\ninterface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: DataTablePaginationProps<TData>): React.JSX.Element {\n return (\n <div className={cn('flex items-center justify-between px-2', className)} {...props}>\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"w-18 h-8\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-28 items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\ninterface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={className}>{title}</div>;\n }\n\n return (\n <div className={cn('flex items-center space-x-2', className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"xs\" className=\"data-[state=open]:bg-accent -ml-3\">\n <span>{title}</span>\n <SortIcon sorted={column.getIsSorted()} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\nfunction SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {\n switch (sorted) {\n case 'desc':\n return <ArrowDownIcon className=\"ml-2 size-4\" />;\n\n case 'asc':\n return <ArrowUpIcon className=\"ml-2 size-4\" />;\n\n default:\n return <CaretSortIcon className=\"ml-2 size-4\" />;\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n DataTableViewOptions,\n DataTablePagination,\n DataTableColumnHeader,\n type DataTableViewOptionsProps,\n type DataTablePaginationProps,\n type DataTableColumnHeaderProps,\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{a as D,c as f,d as T,g as x,i as w}from"../chunk-ZIB4ZTST.mjs";import{a as c,b as d,h as m,i as r,j as p,l as u,m as g}from"../chunk-BM5KYF6Y.mjs";import{b as o}from"../chunk-
|
|
1
|
+
"use client";import{a as D,c as f,d as T,g as x,i as w}from"../chunk-ZIB4ZTST.mjs";import{a as c,b as d,h as m,i as r,j as p,l as u,m as g}from"../chunk-BM5KYF6Y.mjs";import{b as o}from"../chunk-TVVOS66G.mjs";import"../chunk-BNKSZEF2.mjs";import{b as l}from"../chunk-LEUB3C3L.mjs";import{ArrowDownIcon as C,ArrowUpIcon as N,CaretSortIcon as v,ChevronLeftIcon as S,ChevronRightIcon as P,DoubleArrowLeftIcon as b,DoubleArrowRightIcon as M,EyeNoneIcon as I,MixerHorizontalIcon as h}from"@radix-ui/react-icons";import{jsx as e,jsxs as t}from"react/jsx-runtime";function A({table:a}){return t(c,{children:[e(d,{asChild:!0,children:t(o,{variant:"outline",size:"sm",className:"ml-auto hidden h-8 lg:flex",children:[e(h,{className:"mr-2 size-4"}),"View"]})}),t(m,{align:"end",className:"w-36",children:[e(u,{children:"Toggle columns"}),e(g,{}),a.getAllColumns().filter(n=>typeof n.accessorFn<"u"&&n.getCanHide()).map(n=>e(p,{className:"capitalize",checked:n.getIsVisible(),onCheckedChange:s=>{n.toggleVisibility(!!s)},children:n.id},n.id))]})]})}function B({table:a,className:n,...s}){return t("div",{className:l("flex items-center justify-between px-2",n),...s,children:[t("div",{className:"text-muted-foreground flex-1 text-sm",children:[a.getFilteredSelectedRowModel().rows.length," of ",a.getFilteredRowModel().rows.length," row(s) selected."]}),t("div",{className:"flex items-center space-x-6 lg:space-x-8",children:[t("div",{className:"flex items-center space-x-2",children:[e("p",{className:"text-sm font-medium",children:"Rows per page"}),t(D,{value:String(a.getState().pagination.pageSize),onValueChange:i=>{a.setPageSize(Number(i))},children:[e(T,{className:"w-18 h-8",children:e(f,{placeholder:a.getState().pagination.pageSize})}),e(x,{side:"top",children:[10,20,30,40,50].map(i=>e(w,{value:String(i),children:i},i))})]})]}),t("div",{className:"flex w-28 items-center justify-center text-sm font-medium",children:["Page ",a.getState().pagination.pageIndex+1," of ",a.getPageCount()]}),t("div",{className:"flex items-center space-x-2",children:[t(o,{variant:"outline",size:"icon-xs",className:"hidden lg:flex",onClick:()=>{a.setPageIndex(0)},disabled:!a.getCanPreviousPage(),children:[e("span",{className:"sr-only",children:"Go to first page"}),e(b,{className:"size-4"})]}),t(o,{variant:"outline",size:"icon-xs",onClick:()=>{a.previousPage()},disabled:!a.getCanPreviousPage(),children:[e("span",{className:"sr-only",children:"Go to previous page"}),e(S,{className:"size-4"})]}),t(o,{variant:"outline",size:"icon-xs",onClick:()=>{a.nextPage()},disabled:!a.getCanNextPage(),children:[e("span",{className:"sr-only",children:"Go to next page"}),e(P,{className:"size-4"})]}),t(o,{variant:"outline",size:"icon-xs",className:"hidden lg:flex",onClick:()=>{a.setPageIndex(a.getPageCount()-1)},disabled:!a.getCanNextPage(),children:[e("span",{className:"sr-only",children:"Go to last page"}),e(M,{className:"size-4"})]})]})]})]})}function L({column:a,title:n,className:s}){return a.getCanSort()?e("div",{className:l("flex items-center space-x-2",s),children:t(c,{children:[e(d,{asChild:!0,children:t(o,{variant:"ghost",size:"xs",className:"data-[state=open]:bg-accent -ml-3",children:[e("span",{children:n}),e(z,{sorted:a.getIsSorted()})]})}),t(m,{align:"start",children:[t(r,{onClick:()=>{a.toggleSorting(!1)},children:[e(N,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Asc"]}),t(r,{onClick:()=>{a.toggleSorting(!0)},children:[e(C,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Desc"]}),e(g,{}),t(r,{onClick:()=>{a.toggleVisibility(!1)},children:[e(I,{className:"text-muted-foreground/70 mr-2 size-3.5"}),"Hide"]})]})]})}):e("div",{className:s,children:n})}function z({sorted:a}){switch(a){case"desc":return e(C,{className:"ml-2 size-4"});case"asc":return e(N,{className:"ml-2 size-4"});default:return e(v,{className:"ml-2 size-4"})}}export{L as DataTableColumnHeader,B as DataTablePagination,A as DataTableViewOptions};
|
|
2
2
|
//# sourceMappingURL=data-table.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/data-table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\nimport { cn } from '../lib/utils';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\nimport type * as ReactTable from '@tanstack/react-table';\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\ninterface DataTableViewOptionsProps<TData> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"ml-auto hidden h-8 lg:flex\">\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-36\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\ninterface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: DataTablePaginationProps<TData>): React.JSX.Element {\n return (\n <div className={cn('flex items-center justify-between px-2', className)} {...props}>\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"w-18 h-8\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-28 items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\ninterface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={className}>{title}</div>;\n }\n\n return (\n <div className={cn('flex items-center space-x-2', className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"xs\" className=\"data-[state=open]:bg-accent -ml-3\">\n <span>{title}</span>\n <SortIcon sorted={column.getIsSorted()} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\nfunction SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {\n switch (sorted) {\n case 'desc':\n return <ArrowDownIcon className=\"ml-2 size-4\" />;\n\n case 'asc':\n return <ArrowUpIcon className=\"ml-2 size-4\" />;\n\n default:\n return <CaretSortIcon className=\"ml-2 size-4\" />;\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n DataTableViewOptions,\n DataTablePagination,\n DataTableColumnHeader,\n type DataTableViewOptionsProps,\n type DataTablePaginationProps,\n type DataTableColumnHeaderProps,\n};\n"],"mappings":"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","names":["ArrowDownIcon","ArrowUpIcon","CaretSortIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowLeftIcon","DoubleArrowRightIcon","EyeNoneIcon","MixerHorizontalIcon","jsx","jsxs","DataTableViewOptions","table","DropdownMenu","DropdownMenuTrigger","Button","MixerHorizontalIcon","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value","DataTablePagination","className","props","cn","Select","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","DoubleArrowLeftIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowRightIcon","DataTableColumnHeader","title","SortIcon","DropdownMenuItem","ArrowUpIcon","ArrowDownIcon","EyeNoneIcon","sorted","CaretSortIcon"]}
|
|
1
|
+
{"version":3,"sources":["../../src/react/data-table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\nimport type * as ReactTable from '@tanstack/react-table';\nimport { cn } from '../lib/utils';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\ninterface DataTableViewOptionsProps<TData> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"ml-auto hidden h-8 lg:flex\">\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-36\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\ninterface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {\n table: ReactTable.Table<TData>;\n}\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: DataTablePaginationProps<TData>): React.JSX.Element {\n return (\n <div className={cn('flex items-center justify-between px-2', className)} {...props}>\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"w-18 h-8\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-28 items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\ninterface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={className}>{title}</div>;\n }\n\n return (\n <div className={cn('flex items-center space-x-2', className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"xs\" className=\"data-[state=open]:bg-accent -ml-3\">\n <span>{title}</span>\n <SortIcon sorted={column.getIsSorted()} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\nfunction SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {\n switch (sorted) {\n case 'desc':\n return <ArrowDownIcon className=\"ml-2 size-4\" />;\n\n case 'asc':\n return <ArrowUpIcon className=\"ml-2 size-4\" />;\n\n default:\n return <CaretSortIcon className=\"ml-2 size-4\" />;\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n DataTableViewOptions,\n DataTablePagination,\n DataTableColumnHeader,\n type DataTableViewOptionsProps,\n type DataTablePaginationProps,\n type DataTableColumnHeaderProps,\n};\n"],"mappings":"yRAGA,OACE,iBAAAA,EACA,eAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,uBAAAC,EACA,wBAAAC,EACA,eAAAC,EACA,uBAAAC,MACK,wBA2BC,OACE,OAAAC,EADF,QAAAC,MAAA,oBAJR,SAASC,EAA4B,CAAE,MAAAC,CAAM,EAAwD,CACnG,OACEF,EAACG,EAAA,CACC,UAAAJ,EAACK,EAAA,CAAoB,QAAO,GAC1B,SAAAJ,EAACK,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,UAAU,6BAC5C,UAAAN,EAACO,EAAA,CAAoB,UAAU,cAAc,EAAE,QAEjD,EACF,EACAN,EAACO,EAAA,CAAoB,MAAM,MAAM,UAAU,OACzC,UAAAR,EAACS,EAAA,CAAkB,0BAAc,EACjCT,EAACU,EAAA,EAAsB,EACtBP,EACE,cAAc,EACd,OAAQQ,GAAW,OAAOA,EAAO,WAAe,KAAeA,EAAO,WAAW,CAAC,EAClF,IAAKA,GAEFX,EAACY,EAAA,CAEC,UAAU,aACV,QAASD,EAAO,aAAa,EAC7B,gBAAkBE,GAAU,CAC1BF,EAAO,iBAAiB,EAAQE,CAAM,CACxC,EAEC,SAAAF,EAAO,IAPHA,EAAO,EAQd,CAEH,GACL,GACF,CAEJ,CAUA,SAASG,EAA2B,CAClC,MAAAX,EACA,UAAAY,EACA,GAAGC,CACL,EAAuD,CACrD,OACEf,EAAC,OAAI,UAAWgB,EAAG,yCAA0CF,CAAS,EAAI,GAAGC,EAC3E,UAAAf,EAAC,OAAI,UAAU,uCACZ,UAAAE,EAAM,4BAA4B,EAAE,KAAK,OAAO,OAAKA,EAAM,oBAAoB,EAAE,KAAK,OAAO,qBAChG,EACAF,EAAC,OAAI,UAAU,2CACb,UAAAA,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,KAAE,UAAU,sBAAsB,yBAAa,EAChDC,EAACiB,EAAA,CACC,MAAO,OAAOf,EAAM,SAAS,EAAE,WAAW,QAAQ,EAClD,cAAgBU,GAAU,CACxBV,EAAM,YAAY,OAAOU,CAAK,CAAC,CACjC,EAEA,UAAAb,EAACmB,EAAA,CAAc,UAAU,WACvB,SAAAnB,EAACoB,EAAA,CAAY,YAAajB,EAAM,SAAS,EAAE,WAAW,SAAU,EAClE,EACAH,EAACqB,EAAA,CAAc,KAAK,MACjB,UAAC,GAAI,GAAI,GAAI,GAAI,EAAE,EAAE,IAAKC,GACzBtB,EAACuB,EAAA,CAA0B,MAAO,OAAOD,CAAQ,EAC9C,SAAAA,GADcA,CAEjB,CACD,EACH,GACF,GACF,EACArB,EAAC,OAAI,UAAU,4DAA4D,kBACnEE,EAAM,SAAS,EAAE,WAAW,UAAY,EAAE,OAAKA,EAAM,aAAa,GAC1E,EACAF,EAAC,OAAI,UAAU,8BACb,UAAAA,EAACK,EAAA,CACC,QAAQ,UACR,KAAK,UACL,UAAU,iBACV,QAAS,IAAM,CACbH,EAAM,aAAa,CAAC,CACtB,EACA,SAAU,CAACA,EAAM,mBAAmB,EAEpC,UAAAH,EAAC,QAAK,UAAU,UAAU,4BAAgB,EAC1CA,EAACwB,EAAA,CAAoB,UAAU,SAAS,GAC1C,EACAvB,EAACK,EAAA,CACC,QAAQ,UACR,KAAK,UACL,QAAS,IAAM,CACbH,EAAM,aAAa,CACrB,EACA,SAAU,CAACA,EAAM,mBAAmB,EAEpC,UAAAH,EAAC,QAAK,UAAU,UAAU,+BAAmB,EAC7CA,EAACyB,EAAA,CAAgB,UAAU,SAAS,GACtC,EACAxB,EAACK,EAAA,CACC,QAAQ,UACR,KAAK,UACL,QAAS,IAAM,CACbH,EAAM,SAAS,CACjB,EACA,SAAU,CAACA,EAAM,eAAe,EAEhC,UAAAH,EAAC,QAAK,UAAU,UAAU,2BAAe,EACzCA,EAAC0B,EAAA,CAAiB,UAAU,SAAS,GACvC,EACAzB,EAACK,EAAA,CACC,QAAQ,UACR,KAAK,UACL,UAAU,iBACV,QAAS,IAAM,CACbH,EAAM,aAAaA,EAAM,aAAa,EAAI,CAAC,CAC7C,EACA,SAAU,CAACA,EAAM,eAAe,EAEhC,UAAAH,EAAC,QAAK,UAAU,UAAU,2BAAe,EACzCA,EAAC2B,EAAA,CAAqB,UAAU,SAAS,GAC3C,GACF,GACF,GACF,CAEJ,CAWA,SAASC,EAAqC,CAC5C,OAAAjB,EACA,MAAAkB,EACA,UAAAd,CACF,EAAiE,CAC/D,OAAKJ,EAAO,WAAW,EAKrBX,EAAC,OAAI,UAAWiB,EAAG,8BAA+BF,CAAS,EACzD,SAAAd,EAACG,EAAA,CACC,UAAAJ,EAACK,EAAA,CAAoB,QAAO,GAC1B,SAAAJ,EAACK,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,oCAC1C,UAAAN,EAAC,QAAM,SAAA6B,EAAM,EACb7B,EAAC8B,EAAA,CAAS,OAAQnB,EAAO,YAAY,EAAG,GAC1C,EACF,EACAV,EAACO,EAAA,CAAoB,MAAM,QACzB,UAAAP,EAAC8B,EAAA,CACC,QAAS,IAAM,CACbpB,EAAO,cAAc,EAAK,CAC5B,EAEA,UAAAX,EAACgC,EAAA,CAAY,UAAU,yCAAyC,EAAE,OAEpE,EACA/B,EAAC8B,EAAA,CACC,QAAS,IAAM,CACbpB,EAAO,cAAc,EAAI,CAC3B,EAEA,UAAAX,EAACiC,EAAA,CAAc,UAAU,yCAAyC,EAAE,QAEtE,EACAjC,EAACU,EAAA,EAAsB,EACvBT,EAAC8B,EAAA,CACC,QAAS,IAAM,CACbpB,EAAO,iBAAiB,EAAK,CAC/B,EAEA,UAAAX,EAACkC,EAAA,CAAY,UAAU,yCAAyC,EAAE,QAEpE,GACF,GACF,EACF,EAxCOlC,EAAC,OAAI,UAAWe,EAAY,SAAAc,EAAM,CA0C7C,CAEA,SAASC,EAAS,CAAE,OAAAK,CAAO,EAAoE,CAC7F,OAAQA,EAAQ,CACd,IAAK,OACH,OAAOnC,EAACiC,EAAA,CAAc,UAAU,cAAc,EAEhD,IAAK,MACH,OAAOjC,EAACgC,EAAA,CAAY,UAAU,cAAc,EAE9C,QACE,OAAOhC,EAACoC,EAAA,CAAc,UAAU,cAAc,CAClD,CACF","names":["ArrowDownIcon","ArrowUpIcon","CaretSortIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowLeftIcon","DoubleArrowRightIcon","EyeNoneIcon","MixerHorizontalIcon","jsx","jsxs","DataTableViewOptions","table","DropdownMenu","DropdownMenuTrigger","Button","MixerHorizontalIcon","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value","DataTablePagination","className","props","cn","Select","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","DoubleArrowLeftIcon","ChevronLeftIcon","ChevronRightIcon","DoubleArrowRightIcon","DataTableColumnHeader","title","SortIcon","DropdownMenuItem","ArrowUpIcon","ArrowDownIcon","EyeNoneIcon","sorted","CaretSortIcon"]}
|