@zentauri-ui/zentauri-components 0.0.93 → 1.0.0
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/README.md +72 -34
- package/dist/chunk-B23TPTVG.mjs +11 -0
- package/dist/chunk-B23TPTVG.mjs.map +1 -0
- package/dist/{chunk-BZSIXBA7.js → chunk-BITDSQMR.js} +8 -6
- package/dist/chunk-BITDSQMR.js.map +1 -0
- package/dist/{chunk-VJHD7QZH.mjs → chunk-BORK3BJO.mjs} +4 -7
- package/dist/chunk-BORK3BJO.mjs.map +1 -0
- package/dist/chunk-WZ2GOU2J.js +13 -0
- package/dist/chunk-WZ2GOU2J.js.map +1 -0
- package/dist/ui/accordion.d.mts +1 -1
- package/dist/ui/accordion.d.ts +1 -1
- package/dist/ui/accordion.js +80 -61
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/accordion.mjs +46 -39
- package/dist/ui/accordion.mjs.map +1 -1
- package/dist/ui/alert.d.mts +1 -1
- package/dist/ui/alert.d.ts +1 -1
- package/dist/ui/alert.js +57 -46
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/alert.mjs +28 -30
- package/dist/ui/alert.mjs.map +1 -1
- package/dist/ui/badge.js +20 -25
- package/dist/ui/badge.js.map +1 -1
- package/dist/ui/badge.mjs +8 -20
- package/dist/ui/badge.mjs.map +1 -1
- package/dist/ui/buttons.js +19 -21
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/buttons.mjs +8 -18
- package/dist/ui/buttons.mjs.map +1 -1
- package/dist/ui/card.js +59 -54
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/card.mjs +29 -39
- package/dist/ui/card.mjs.map +1 -1
- package/dist/ui/divider.js +39 -35
- package/dist/ui/divider.js.map +1 -1
- package/dist/ui/divider.mjs +18 -23
- package/dist/ui/divider.mjs.map +1 -1
- package/dist/ui/drawer.d.mts +1 -1
- package/dist/ui/drawer.d.ts +1 -1
- package/dist/ui/drawer.js +106 -73
- package/dist/ui/drawer.js.map +1 -1
- package/dist/ui/drawer.mjs +64 -45
- package/dist/ui/drawer.mjs.map +1 -1
- package/dist/ui/dropdown.js +42 -48
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +13 -29
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/empty-state.d.mts +3 -3
- package/dist/ui/empty-state.d.ts +3 -3
- package/dist/ui/empty-state.js +83 -59
- package/dist/ui/empty-state.js.map +1 -1
- package/dist/ui/empty-state.mjs +64 -52
- package/dist/ui/empty-state.mjs.map +1 -1
- package/dist/ui/inputs.js +26 -31
- package/dist/ui/inputs.js.map +1 -1
- package/dist/ui/inputs.mjs +8 -19
- package/dist/ui/inputs.mjs.map +1 -1
- package/dist/ui/modal.d.mts +1 -1
- package/dist/ui/modal.d.ts +1 -1
- package/dist/ui/modal.js +116 -78
- package/dist/ui/modal.js.map +1 -1
- package/dist/ui/modal.mjs +74 -51
- package/dist/ui/modal.mjs.map +1 -1
- package/dist/ui/pagination.js +47 -60
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +10 -32
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/progress.js +70 -58
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/progress.mjs +44 -43
- package/dist/ui/progress.mjs.map +1 -1
- package/dist/ui/select.js +73 -81
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/select.mjs +38 -59
- package/dist/ui/select.mjs.map +1 -1
- package/dist/ui/skeleton.js +45 -50
- package/dist/ui/skeleton.js.map +1 -1
- package/dist/ui/skeleton.mjs +8 -25
- package/dist/ui/skeleton.mjs.map +1 -1
- package/dist/ui/spinner.js +37 -38
- package/dist/ui/spinner.js.map +1 -1
- package/dist/ui/spinner.mjs +11 -18
- package/dist/ui/spinner.mjs.map +1 -1
- package/dist/ui/table.js +77 -79
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/table.mjs +43 -60
- package/dist/ui/table.mjs.map +1 -1
- package/dist/ui/tabs.js +75 -75
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/tabs.mjs +48 -59
- package/dist/ui/tabs.mjs.map +1 -1
- package/dist/ui/toast.d.mts +2 -2
- package/dist/ui/toast.d.ts +2 -2
- package/dist/ui/toast.js +111 -88
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toast.mjs +77 -69
- package/dist/ui/toast.mjs.map +1 -1
- package/dist/ui/toggle.js +26 -28
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/toggle.mjs +12 -21
- package/dist/ui/toggle.mjs.map +1 -1
- package/dist/ui/tooltip.js +29 -36
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tooltip.mjs +8 -23
- package/dist/ui/tooltip.mjs.map +1 -1
- package/package.json +5 -3
- package/dist/chunk-BZSIXBA7.js.map +0 -1
- package/dist/chunk-E5UX537J.js +0 -11
- package/dist/chunk-E5UX537J.js.map +0 -1
- package/dist/chunk-MEWYFWBX.mjs +0 -14
- package/dist/chunk-MEWYFWBX.mjs.map +0 -1
- package/dist/chunk-VJHD7QZH.mjs.map +0 -1
package/dist/ui/dropdown.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/dropdown/dropdown.tsx","../../src/ui/dropdown/variants.ts"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n useContext,\n useState,\n useRef,\n useEffect,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownContextType, DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps } from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value)\n ? prev.filter((v) => v !== value)\n : [...prev, value]\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle } = useDropdown();\n\n return (\n <button\n onClick={toggle}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [setOpen]);\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n className={cn(contentVariants({ placement, spacing }), className, divider && \"divide-y divide-current\")}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleClick();\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};","import { cva } from \"class-variance-authority\";\n\nexport const triggerVariants = cva(\n \"inline-flex items-center justify-between rounded-md font-medium transition focus:outline-none cursor-pointer\",\n {\n variants: {\n variant: {\n default: \"bg-gray-900 text-white\",\n outline: \"border border-gray-300\",\n ghost: \"bg-transparent\",\n white: \"bg-white text-gray-900\",\n black: \"bg-black text-white\",\n sky: \"border border-sky-600 text-sky-600\",\n rose: \"border border-rose-600 text-rose-600\",\n purple: \"border border-purple-600 text-purple-600\",\n pink: \"border border-pink-600 text-pink-600\",\n orange: \"border border-orange-600 text-orange-600\",\n yellow: \"border border-yellow-600 text-yellow-600\",\n teal: \"border border-teal-600 text-teal-600\",\n indigo: \"border border-indigo-600 text-indigo-600\",\n emerald: \"border border-emerald-600 text-emerald-600\",\n gray: \"border border-gray-600 text-gray-600\",\n amber: \"border border-amber-600 text-amber-600\",\n violet: \"border border-violet-600 text-violet-600\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600 text-gradient-to-r from-blue-600 to-purple-600\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600 text-gradient-to-r from-green-600 to-lime-600\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600 text-gradient-to-r from-red-600 to-pink-600\",\n \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600 text-gradient-to-r from-yellow-600 to-orange-600\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600 text-gradient-to-r from-purple-600 to-pink-600\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600 text-gradient-to-r from-teal-600 to-cyan-600\",\n \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600 text-gradient-to-r from-indigo-600 to-purple-600\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600 text-gradient-to-r from-pink-600 to-rose-600\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600 text-gradient-to-r from-orange-600 to-red-600\",\n },\n size: {\n sm: \"px-2 py-1 text-sm\",\n md: \"px-3 py-2 text-base\",\n lg: \"px-4 py-3 text-lg\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n }\n);\n\nexport const contentVariants = cva(\n \"absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border\",\n {\n variants: {\n placement: {\n top: \"bottom-full mb-2\",\n bottom: \"top-full mt-2\",\n left: \"right-full mr-2\",\n right: \"left-full ml-2\",\n },\n spacing:{\n none: \"space-y-0\",\n default: \"space-y-1\",\n sm: \"space-y-2\",\n md: \"space-y-3\",\n lg: \"space-y-4\",\n xl: \"space-y-5\",\n }\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n }\n);\n\nexport const itemVariants = cva(\n \"flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors\",\n {\n variants: {\n variant: {\n default: \"hover:bg-gray-100 hover:text-gray-900 text-gray-100\",\n outline: \"hover:bg-gray-100 hover:text-gray-900 border border-white text-gray-100\",\n ghost: \"hover:bg-gray-100 hover:text-gray-900 bg-transparent text-gray-100\",\n white: \"hover:bg-gray-100 hover:text-gray-900 bg-white text-gray-900\",\n black: \"hover:bg-gray-100 hover:text-gray-900 bg-black text-white\",\n sky: \"hover:bg-sky-100 hover:text-sky-600 bg-sky-200 text-sky-800\",\n rose: \"hover:bg-rose-100 hover:text-rose-600 bg-rose-200 text-rose-800\",\n purple: \"hover:bg-purple-100 hover:text-purple-600 bg-purple-200 text-purple-800\",\n pink: \"hover:bg-pink-100 hover:text-pink-600 bg-pink-200 text-pink-800\",\n orange: \"hover:bg-orange-100 hover:text-orange-600 bg-orange-200 text-orange-800\",\n yellow: \"hover:bg-yellow-100 hover:text-yellow-600 bg-yellow-200 text-yellow-800\",\n teal: \"hover:bg-teal-100 hover:text-teal-600 bg-teal-200 text-teal-800\",\n indigo: \"hover:bg-indigo-100 hover:text-indigo-600 bg-indigo-200 text-indigo-800\",\n emerald: \"hover:bg-emerald-100 hover:text-emerald-600 bg-emerald-200 text-emerald-800\",\n gray: \"hover:bg-gray-100 hover:text-gray-900 bg-gray-200 text-gray-800\",\n amber: \"hover:bg-amber-100 hover:text-amber-600 bg-amber-200 text-amber-800\",\n violet: \"hover:bg-violet-100 hover:text-violet-600 bg-violet-200 text-violet-800\",\n \"gradient-blue\": \"hover:bg-gradient-to-r from-blue-600 to-purple-600 hover:text-blue-900 bg-gradient-to-r from-blue-200 to-purple-200 text-blue-800\",\n \"gradient-green\": \"hover:bg-gradient-to-r from-green-600 to-lime-600 hover:text-green-900 bg-gradient-to-r from-green-200 to-lime-200 text-green-800\",\n \"gradient-red\": \"hover:bg-gradient-to-r from-red-600 to-pink-600 hover:text-red-900 bg-gradient-to-r from-red-200 to-pink-200 text-red-800\",\n \"gradient-yellow\": \"hover:bg-gradient-to-r from-yellow-600 to-orange-600 hover:text-yellow-900 bg-gradient-to-r from-yellow-200 to-orange-200 text-yellow-800\",\n \"gradient-purple\": \"hover:bg-gradient-to-r from-purple-600 to-pink-600 hover:text-purple-900 bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800\",\n \"gradient-teal\": \"hover:bg-gradient-to-r from-teal-600 to-cyan-600 hover:text-teal-900 bg-gradient-to-r from-teal-200 to-cyan-200 text-teal-800\",\n \"gradient-indigo\": \"hover:bg-gradient-to-r from-indigo-600 to-purple-600 hover:text-indigo-900 bg-gradient-to-r from-indigo-200 to-purple-200 text-indigo-800\",\n \"gradient-pink\": \"hover:bg-gradient-to-r from-pink-600 to-rose-600 hover:text-pink-900 bg-gradient-to-r from-pink-200 to-rose-200 text-pink-800\",\n \"gradient-orange\": \"hover:bg-gradient-to-r from-orange-600 to-red-600 hover:text-orange-900 bg-gradient-to-r from-orange-200 to-red-200 text-orange-800\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/dropdown/variants.ts","../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"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","file":"dropdown.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const triggerVariants = cva(\n \"inline-flex items-center justify-between rounded-md font-medium transition focus:outline-none cursor-pointer\",\n {\n variants: {\n variant: {\n default: \"bg-gray-900 text-white\",\n outline: \"border border-gray-300\",\n ghost: \"bg-transparent\",\n white: \"bg-white text-gray-900\",\n black: \"bg-black text-white\",\n sky: \"border border-sky-600 text-sky-600\",\n rose: \"border border-rose-600 text-rose-600\",\n purple: \"border border-purple-600 text-purple-600\",\n pink: \"border border-pink-600 text-pink-600\",\n orange: \"border border-orange-600 text-orange-600\",\n yellow: \"border border-yellow-600 text-yellow-600\",\n teal: \"border border-teal-600 text-teal-600\",\n indigo: \"border border-indigo-600 text-indigo-600\",\n emerald: \"border border-emerald-600 text-emerald-600\",\n gray: \"border border-gray-600 text-gray-600\",\n amber: \"border border-amber-600 text-amber-600\",\n violet: \"border border-violet-600 text-violet-600\",\n \"gradient-blue\":\n \"bg-gradient-to-r from-blue-600 to-purple-600 text-gradient-to-r from-blue-600 to-purple-600\",\n \"gradient-green\":\n \"bg-gradient-to-r from-green-600 to-lime-600 text-gradient-to-r from-green-600 to-lime-600\",\n \"gradient-red\":\n \"bg-gradient-to-r from-red-600 to-pink-600 text-gradient-to-r from-red-600 to-pink-600\",\n \"gradient-yellow\":\n \"bg-gradient-to-r from-yellow-600 to-orange-600 text-gradient-to-r from-yellow-600 to-orange-600\",\n \"gradient-purple\":\n \"bg-gradient-to-r from-purple-600 to-pink-600 text-gradient-to-r from-purple-600 to-pink-600\",\n \"gradient-teal\":\n \"bg-gradient-to-r from-teal-600 to-cyan-600 text-gradient-to-r from-teal-600 to-cyan-600\",\n \"gradient-indigo\":\n \"bg-gradient-to-r from-indigo-600 to-purple-600 text-gradient-to-r from-indigo-600 to-purple-600\",\n \"gradient-pink\":\n \"bg-gradient-to-r from-pink-600 to-rose-600 text-gradient-to-r from-pink-600 to-rose-600\",\n \"gradient-orange\":\n \"bg-gradient-to-r from-orange-600 to-red-600 text-gradient-to-r from-orange-600 to-red-600\",\n },\n size: {\n sm: \"px-2 py-1 text-sm\",\n md: \"px-3 py-2 text-base\",\n lg: \"px-4 py-3 text-lg\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n },\n);\n\nexport const contentVariants = cva(\n \"absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border\",\n {\n variants: {\n placement: {\n top: \"bottom-full mb-2\",\n bottom: \"top-full mt-2\",\n left: \"right-full mr-2\",\n right: \"left-full ml-2\",\n },\n spacing: {\n none: \"space-y-0\",\n default: \"space-y-1\",\n sm: \"space-y-2\",\n md: \"space-y-3\",\n lg: \"space-y-4\",\n xl: \"space-y-5\",\n },\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n },\n);\n\nexport const itemVariants = cva(\n \"flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors\",\n {\n variants: {\n variant: {\n default: \"hover:bg-gray-100 hover:text-gray-900 text-gray-100\",\n outline:\n \"hover:bg-gray-100 hover:text-gray-900 border border-white text-gray-100\",\n ghost:\n \"hover:bg-gray-100 hover:text-gray-900 bg-transparent text-gray-100\",\n white: \"hover:bg-gray-100 hover:text-gray-900 bg-white text-gray-900\",\n black: \"hover:bg-gray-100 hover:text-gray-900 bg-black text-white\",\n sky: \"hover:bg-sky-100 hover:text-sky-600 bg-sky-200 text-sky-800\",\n rose: \"hover:bg-rose-100 hover:text-rose-600 bg-rose-200 text-rose-800\",\n purple:\n \"hover:bg-purple-100 hover:text-purple-600 bg-purple-200 text-purple-800\",\n pink: \"hover:bg-pink-100 hover:text-pink-600 bg-pink-200 text-pink-800\",\n orange:\n \"hover:bg-orange-100 hover:text-orange-600 bg-orange-200 text-orange-800\",\n yellow:\n \"hover:bg-yellow-100 hover:text-yellow-600 bg-yellow-200 text-yellow-800\",\n teal: \"hover:bg-teal-100 hover:text-teal-600 bg-teal-200 text-teal-800\",\n indigo:\n \"hover:bg-indigo-100 hover:text-indigo-600 bg-indigo-200 text-indigo-800\",\n emerald:\n \"hover:bg-emerald-100 hover:text-emerald-600 bg-emerald-200 text-emerald-800\",\n gray: \"hover:bg-gray-100 hover:text-gray-900 bg-gray-200 text-gray-800\",\n amber:\n \"hover:bg-amber-100 hover:text-amber-600 bg-amber-200 text-amber-800\",\n violet:\n \"hover:bg-violet-100 hover:text-violet-600 bg-violet-200 text-violet-800\",\n \"gradient-blue\":\n \"hover:bg-gradient-to-r from-blue-600 to-purple-600 hover:text-blue-900 bg-gradient-to-r from-blue-200 to-purple-200 text-blue-800\",\n \"gradient-green\":\n \"hover:bg-gradient-to-r from-green-600 to-lime-600 hover:text-green-900 bg-gradient-to-r from-green-200 to-lime-200 text-green-800\",\n \"gradient-red\":\n \"hover:bg-gradient-to-r from-red-600 to-pink-600 hover:text-red-900 bg-gradient-to-r from-red-200 to-pink-200 text-red-800\",\n \"gradient-yellow\":\n \"hover:bg-gradient-to-r from-yellow-600 to-orange-600 hover:text-yellow-900 bg-gradient-to-r from-yellow-200 to-orange-200 text-yellow-800\",\n \"gradient-purple\":\n \"hover:bg-gradient-to-r from-purple-600 to-pink-600 hover:text-purple-900 bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800\",\n \"gradient-teal\":\n \"hover:bg-gradient-to-r from-teal-600 to-cyan-600 hover:text-teal-900 bg-gradient-to-r from-teal-200 to-cyan-200 text-teal-800\",\n \"gradient-indigo\":\n \"hover:bg-gradient-to-r from-indigo-600 to-purple-600 hover:text-indigo-900 bg-gradient-to-r from-indigo-200 to-purple-200 text-indigo-800\",\n \"gradient-pink\":\n \"hover:bg-gradient-to-r from-pink-600 to-rose-600 hover:text-pink-900 bg-gradient-to-r from-pink-200 to-rose-200 text-pink-800\",\n \"gradient-orange\":\n \"hover:bg-gradient-to-r from-orange-600 to-red-600 hover:text-orange-900 bg-gradient-to-r from-orange-200 to-red-200 text-orange-800\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n","\"use client\";\n\nimport { createContext, useContext, useState, useRef, useEffect } from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n DropdownContextType,\n DropdownProps,\n DropdownTriggerProps,\n DropdownContentProps,\n DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle } = useDropdown();\n\n return (\n <button\n onClick={toggle}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [setOpen]);\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n className={cn(\n contentVariants({ placement, spacing }),\n className,\n divider && \"divide-y divide-current\",\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleClick();\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -31,11 +31,11 @@ declare function EmptyState(props: EmptyStateProps): react_jsx_runtime.JSX.Eleme
|
|
|
31
31
|
declare namespace EmptyState {
|
|
32
32
|
var displayName: string;
|
|
33
33
|
}
|
|
34
|
-
declare function EmptyStateIcon({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
34
|
+
declare function EmptyStateIcon({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
35
35
|
declare namespace EmptyStateIcon {
|
|
36
36
|
var displayName: string;
|
|
37
37
|
}
|
|
38
|
-
declare function EmptyStateTitle({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
declare function EmptyStateTitle({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
39
39
|
declare namespace EmptyStateTitle {
|
|
40
40
|
var displayName: string;
|
|
41
41
|
}
|
|
@@ -43,7 +43,7 @@ declare function EmptyStateDescription({ className, children, }: EmptyStateSecti
|
|
|
43
43
|
declare namespace EmptyStateDescription {
|
|
44
44
|
var displayName: string;
|
|
45
45
|
}
|
|
46
|
-
declare function EmptyStateAction({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
46
|
+
declare function EmptyStateAction({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
47
47
|
declare namespace EmptyStateAction {
|
|
48
48
|
var displayName: string;
|
|
49
49
|
}
|
package/dist/ui/empty-state.d.ts
CHANGED
|
@@ -31,11 +31,11 @@ declare function EmptyState(props: EmptyStateProps): react_jsx_runtime.JSX.Eleme
|
|
|
31
31
|
declare namespace EmptyState {
|
|
32
32
|
var displayName: string;
|
|
33
33
|
}
|
|
34
|
-
declare function EmptyStateIcon({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
34
|
+
declare function EmptyStateIcon({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
35
35
|
declare namespace EmptyStateIcon {
|
|
36
36
|
var displayName: string;
|
|
37
37
|
}
|
|
38
|
-
declare function EmptyStateTitle({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
declare function EmptyStateTitle({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
39
39
|
declare namespace EmptyStateTitle {
|
|
40
40
|
var displayName: string;
|
|
41
41
|
}
|
|
@@ -43,7 +43,7 @@ declare function EmptyStateDescription({ className, children, }: EmptyStateSecti
|
|
|
43
43
|
declare namespace EmptyStateDescription {
|
|
44
44
|
var displayName: string;
|
|
45
45
|
}
|
|
46
|
-
declare function EmptyStateAction({ className, children }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
46
|
+
declare function EmptyStateAction({ className, children, }: EmptyStateSectionProps): react_jsx_runtime.JSX.Element;
|
|
47
47
|
declare namespace EmptyStateAction {
|
|
48
48
|
var displayName: string;
|
|
49
49
|
}
|
package/dist/ui/empty-state.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
var
|
|
4
|
+
var chunkWZ2GOU2J_js = require('../chunk-WZ2GOU2J.js');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var framerMotion = require('framer-motion');
|
|
7
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
9
|
|
|
9
10
|
// src/ui/empty-state/animations.ts
|
|
10
11
|
var emptyStateAnimationPresets = {
|
|
@@ -24,34 +25,34 @@ var emptyStateAnimationPresets = {
|
|
|
24
25
|
transition: { type: "spring", stiffness: 380, damping: 28 }
|
|
25
26
|
}
|
|
26
27
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
var emptyStateVariants = classVarianceAuthority.cva(
|
|
29
|
+
"flex w-full flex-col items-center text-center",
|
|
30
|
+
{
|
|
31
|
+
variants: {
|
|
32
|
+
size: {
|
|
33
|
+
sm: "gap-2 p-4 text-sm",
|
|
34
|
+
md: "gap-3 p-6 text-sm",
|
|
35
|
+
lg: "gap-4 p-8 text-base"
|
|
36
|
+
},
|
|
37
|
+
appearance: {
|
|
38
|
+
default: "text-slate-50",
|
|
39
|
+
ghost: "text-slate-200",
|
|
40
|
+
card: "rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]"
|
|
41
|
+
},
|
|
42
|
+
align: {
|
|
43
|
+
start: "items-start text-left",
|
|
44
|
+
center: "items-center text-center",
|
|
45
|
+
end: "items-end text-right"
|
|
46
|
+
}
|
|
41
47
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
defaultVariants: {
|
|
49
|
+
size: "md",
|
|
50
|
+
appearance: "default",
|
|
51
|
+
align: "center"
|
|
46
52
|
}
|
|
47
|
-
},
|
|
48
|
-
defaultVariants: {
|
|
49
|
-
size: "md",
|
|
50
|
-
appearance: "default",
|
|
51
|
-
align: "center"
|
|
52
53
|
}
|
|
53
|
-
|
|
54
|
-
var emptyStateTitleVariants =
|
|
54
|
+
);
|
|
55
|
+
var emptyStateTitleVariants = classVarianceAuthority.cva("font-semibold tracking-tight", {
|
|
55
56
|
variants: {
|
|
56
57
|
size: {
|
|
57
58
|
sm: "text-base",
|
|
@@ -61,7 +62,7 @@ var emptyStateTitleVariants = _classvarianceauthority.cva.call(void 0, "font-sem
|
|
|
61
62
|
},
|
|
62
63
|
defaultVariants: { size: "md" }
|
|
63
64
|
});
|
|
64
|
-
var emptyStateDescriptionVariants =
|
|
65
|
+
var emptyStateDescriptionVariants = classVarianceAuthority.cva("max-w-md text-slate-400", {
|
|
65
66
|
variants: {
|
|
66
67
|
size: {
|
|
67
68
|
sm: "text-xs",
|
|
@@ -71,12 +72,9 @@ var emptyStateDescriptionVariants = _classvarianceauthority.cva.call(void 0, "ma
|
|
|
71
72
|
},
|
|
72
73
|
defaultVariants: { size: "md" }
|
|
73
74
|
});
|
|
74
|
-
|
|
75
|
-
// src/ui/empty-state/empty-state.tsx
|
|
76
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
77
|
-
var EmptyStateSizeContext = _react.createContext.call(void 0, "md");
|
|
75
|
+
var EmptyStateSizeContext = react.createContext("md");
|
|
78
76
|
function useEmptyStateSize() {
|
|
79
|
-
return
|
|
77
|
+
return react.useContext(EmptyStateSizeContext);
|
|
80
78
|
}
|
|
81
79
|
function EmptyState(props) {
|
|
82
80
|
const {
|
|
@@ -90,14 +88,17 @@ function EmptyState(props) {
|
|
|
90
88
|
...rest
|
|
91
89
|
} = props;
|
|
92
90
|
const motionProps = emptyStateAnimationPresets[animation];
|
|
93
|
-
const ctx =
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
-
|
|
91
|
+
const ctx = react.useMemo(() => size ?? "md", [size]);
|
|
92
|
+
return /* @__PURE__ */ jsxRuntime.jsx(EmptyStateSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
framerMotion.motion.section,
|
|
96
94
|
{
|
|
97
95
|
ref,
|
|
98
96
|
"data-slot": "empty-state",
|
|
99
97
|
"aria-live": "polite",
|
|
100
|
-
className:
|
|
98
|
+
className: chunkWZ2GOU2J_js.cn(
|
|
99
|
+
emptyStateVariants({ size, appearance, align }),
|
|
100
|
+
className
|
|
101
|
+
),
|
|
101
102
|
initial: animation === "none" ? false : void 0,
|
|
102
103
|
...motionProps,
|
|
103
104
|
...rest,
|
|
@@ -106,13 +107,33 @@ function EmptyState(props) {
|
|
|
106
107
|
) });
|
|
107
108
|
}
|
|
108
109
|
EmptyState.displayName = "EmptyState";
|
|
109
|
-
function EmptyStateIcon({
|
|
110
|
-
|
|
110
|
+
function EmptyStateIcon({
|
|
111
|
+
className,
|
|
112
|
+
children
|
|
113
|
+
}) {
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
+
"div",
|
|
116
|
+
{
|
|
117
|
+
"data-slot": "empty-state-icon",
|
|
118
|
+
className: chunkWZ2GOU2J_js.cn("text-slate-300", className),
|
|
119
|
+
children
|
|
120
|
+
}
|
|
121
|
+
);
|
|
111
122
|
}
|
|
112
123
|
EmptyStateIcon.displayName = "EmptyStateIcon";
|
|
113
|
-
function EmptyStateTitle({
|
|
124
|
+
function EmptyStateTitle({
|
|
125
|
+
className,
|
|
126
|
+
children
|
|
127
|
+
}) {
|
|
114
128
|
const size = useEmptyStateSize();
|
|
115
|
-
return /* @__PURE__ */
|
|
129
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
130
|
+
"h2",
|
|
131
|
+
{
|
|
132
|
+
"data-slot": "empty-state-title",
|
|
133
|
+
className: chunkWZ2GOU2J_js.cn(emptyStateTitleVariants({ size }), className),
|
|
134
|
+
children
|
|
135
|
+
}
|
|
136
|
+
);
|
|
116
137
|
}
|
|
117
138
|
EmptyStateTitle.displayName = "EmptyStateTitle";
|
|
118
139
|
function EmptyStateDescription({
|
|
@@ -120,29 +141,32 @@ function EmptyStateDescription({
|
|
|
120
141
|
children
|
|
121
142
|
}) {
|
|
122
143
|
const size = useEmptyStateSize();
|
|
123
|
-
return /* @__PURE__ */
|
|
144
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
145
|
"p",
|
|
125
146
|
{
|
|
126
147
|
"data-slot": "empty-state-description",
|
|
127
|
-
className:
|
|
148
|
+
className: chunkWZ2GOU2J_js.cn(emptyStateDescriptionVariants({ size }), className),
|
|
128
149
|
children
|
|
129
150
|
}
|
|
130
151
|
);
|
|
131
152
|
}
|
|
132
153
|
EmptyStateDescription.displayName = "EmptyStateDescription";
|
|
133
|
-
function EmptyStateAction({
|
|
134
|
-
|
|
154
|
+
function EmptyStateAction({
|
|
155
|
+
className,
|
|
156
|
+
children
|
|
157
|
+
}) {
|
|
158
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "empty-state-action", className: chunkWZ2GOU2J_js.cn("mt-2", className), children });
|
|
135
159
|
}
|
|
136
160
|
EmptyStateAction.displayName = "EmptyStateAction";
|
|
137
161
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
162
|
+
exports.EmptyState = EmptyState;
|
|
163
|
+
exports.EmptyStateAction = EmptyStateAction;
|
|
164
|
+
exports.EmptyStateDescription = EmptyStateDescription;
|
|
165
|
+
exports.EmptyStateIcon = EmptyStateIcon;
|
|
166
|
+
exports.EmptyStateTitle = EmptyStateTitle;
|
|
167
|
+
exports.emptyStateAnimationPresets = emptyStateAnimationPresets;
|
|
168
|
+
exports.emptyStateDescriptionVariants = emptyStateDescriptionVariants;
|
|
169
|
+
exports.emptyStateTitleVariants = emptyStateTitleVariants;
|
|
170
|
+
exports.emptyStateVariants = emptyStateVariants;
|
|
171
|
+
//# sourceMappingURL=empty-state.js.map
|
|
148
172
|
//# sourceMappingURL=empty-state.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/
|
|
1
|
+
{"version":3,"sources":["../../src/ui/empty-state/animations.ts","../../src/ui/empty-state/variants.ts","../../src/ui/empty-state/empty-state.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","motion","cn"],"mappings":"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","file":"empty-state.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { EmptyStateAnimation } from \"./types\";\n\ntype EmptyStatePresetMotionProps = Pick<\n HTMLMotionProps<\"div\">,\n \"initial\" | \"animate\" | \"transition\" | \"whileHover\"\n>;\n\nexport type EmptyStateAnimationPresets = Record<\n EmptyStateAnimation,\n EmptyStatePresetMotionProps\n>;\n\nexport const emptyStateAnimationPresets: EmptyStateAnimationPresets = {\n none: {},\n float: {\n whileHover: { y: -4 },\n transition: { type: \"spring\", stiffness: 260, damping: 22 },\n },\n fade: {\n initial: { opacity: 0, y: 8 },\n animate: { opacity: 1, y: 0 },\n transition: { duration: 0.25, ease: \"easeOut\" },\n },\n \"slide-up\": {\n initial: { opacity: 0, y: 16 },\n animate: { opacity: 1, y: 0 },\n transition: { type: \"spring\", stiffness: 380, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const emptyStateVariants = cva(\n \"flex w-full flex-col items-center text-center\",\n {\n variants: {\n size: {\n sm: \"gap-2 p-4 text-sm\",\n md: \"gap-3 p-6 text-sm\",\n lg: \"gap-4 p-8 text-base\",\n },\n appearance: {\n default: \"text-slate-50\",\n ghost: \"text-slate-200\",\n card: \"rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n },\n align: {\n start: \"items-start text-left\",\n center: \"items-center text-center\",\n end: \"items-end text-right\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n align: \"center\",\n },\n },\n);\n\nexport const emptyStateTitleVariants = cva(\"font-semibold tracking-tight\", {\n variants: {\n size: {\n sm: \"text-base\",\n md: \"text-lg\",\n lg: \"text-xl\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const emptyStateDescriptionVariants = cva(\"max-w-md text-slate-400\", {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { emptyStateAnimationPresets } from \"./animations\";\nimport type { EmptyStateProps, EmptyStateSectionProps } from \"./types\";\nimport {\n emptyStateDescriptionVariants,\n emptyStateTitleVariants,\n emptyStateVariants,\n} from \"./variants\";\n\ntype EmptyStateSize = NonNullable<EmptyStateProps[\"size\"]>;\n\nconst EmptyStateSizeContext = createContext<EmptyStateSize>(\"md\");\n\nfunction useEmptyStateSize(): EmptyStateSize {\n return useContext(EmptyStateSizeContext);\n}\n\nexport function EmptyState(props: EmptyStateProps) {\n const {\n className,\n size = \"md\",\n appearance,\n align,\n animation = \"none\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = emptyStateAnimationPresets[animation];\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <EmptyStateSizeContext.Provider value={ctx}>\n <motion.section\n ref={ref}\n data-slot=\"empty-state\"\n aria-live=\"polite\"\n className={cn(\n emptyStateVariants({ size, appearance, align }),\n className,\n )}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.section>\n </EmptyStateSizeContext.Provider>\n );\n}\n\nEmptyState.displayName = \"EmptyState\";\n\nexport function EmptyStateIcon({\n className,\n children,\n}: EmptyStateSectionProps) {\n return (\n <div\n data-slot=\"empty-state-icon\"\n className={cn(\"text-slate-300\", className)}\n >\n {children}\n </div>\n );\n}\n\nEmptyStateIcon.displayName = \"EmptyStateIcon\";\n\nexport function EmptyStateTitle({\n className,\n children,\n}: EmptyStateSectionProps) {\n const size = useEmptyStateSize();\n return (\n <h2\n data-slot=\"empty-state-title\"\n className={cn(emptyStateTitleVariants({ size }), className)}\n >\n {children}\n </h2>\n );\n}\n\nEmptyStateTitle.displayName = \"EmptyStateTitle\";\n\nexport function EmptyStateDescription({\n className,\n children,\n}: EmptyStateSectionProps) {\n const size = useEmptyStateSize();\n return (\n <p\n data-slot=\"empty-state-description\"\n className={cn(emptyStateDescriptionVariants({ size }), className)}\n >\n {children}\n </p>\n );\n}\n\nEmptyStateDescription.displayName = \"EmptyStateDescription\";\n\nexport function EmptyStateAction({\n className,\n children,\n}: EmptyStateSectionProps) {\n return (\n <div data-slot=\"empty-state-action\" className={cn(\"mt-2\", className)}>\n {children}\n </div>\n );\n}\n\nEmptyStateAction.displayName = \"EmptyStateAction\";\n"]}
|
package/dist/ui/empty-state.mjs
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
} from
|
|
6
|
-
|
|
7
|
-
// src/ui/empty-state/empty-state.tsx
|
|
8
|
-
import { createContext, useContext, useMemo } from "react";
|
|
9
|
-
import { motion } from "framer-motion";
|
|
2
|
+
import { cn } from '../chunk-B23TPTVG.mjs';
|
|
3
|
+
import { createContext, useMemo, useContext } from 'react';
|
|
4
|
+
import { motion } from 'framer-motion';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
10
7
|
|
|
11
8
|
// src/ui/empty-state/animations.ts
|
|
12
9
|
var emptyStateAnimationPresets = {
|
|
@@ -26,33 +23,33 @@ var emptyStateAnimationPresets = {
|
|
|
26
23
|
transition: { type: "spring", stiffness: 380, damping: 28 }
|
|
27
24
|
}
|
|
28
25
|
};
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
26
|
+
var emptyStateVariants = cva(
|
|
27
|
+
"flex w-full flex-col items-center text-center",
|
|
28
|
+
{
|
|
29
|
+
variants: {
|
|
30
|
+
size: {
|
|
31
|
+
sm: "gap-2 p-4 text-sm",
|
|
32
|
+
md: "gap-3 p-6 text-sm",
|
|
33
|
+
lg: "gap-4 p-8 text-base"
|
|
34
|
+
},
|
|
35
|
+
appearance: {
|
|
36
|
+
default: "text-slate-50",
|
|
37
|
+
ghost: "text-slate-200",
|
|
38
|
+
card: "rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]"
|
|
39
|
+
},
|
|
40
|
+
align: {
|
|
41
|
+
start: "items-start text-left",
|
|
42
|
+
center: "items-center text-center",
|
|
43
|
+
end: "items-end text-right"
|
|
44
|
+
}
|
|
43
45
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
size: "md",
|
|
48
|
+
appearance: "default",
|
|
49
|
+
align: "center"
|
|
48
50
|
}
|
|
49
|
-
},
|
|
50
|
-
defaultVariants: {
|
|
51
|
-
size: "md",
|
|
52
|
-
appearance: "default",
|
|
53
|
-
align: "center"
|
|
54
51
|
}
|
|
55
|
-
|
|
52
|
+
);
|
|
56
53
|
var emptyStateTitleVariants = cva("font-semibold tracking-tight", {
|
|
57
54
|
variants: {
|
|
58
55
|
size: {
|
|
@@ -73,9 +70,6 @@ var emptyStateDescriptionVariants = cva("max-w-md text-slate-400", {
|
|
|
73
70
|
},
|
|
74
71
|
defaultVariants: { size: "md" }
|
|
75
72
|
});
|
|
76
|
-
|
|
77
|
-
// src/ui/empty-state/empty-state.tsx
|
|
78
|
-
import { jsx } from "react/jsx-runtime";
|
|
79
73
|
var EmptyStateSizeContext = createContext("md");
|
|
80
74
|
function useEmptyStateSize() {
|
|
81
75
|
return useContext(EmptyStateSizeContext);
|
|
@@ -99,7 +93,10 @@ function EmptyState(props) {
|
|
|
99
93
|
ref,
|
|
100
94
|
"data-slot": "empty-state",
|
|
101
95
|
"aria-live": "polite",
|
|
102
|
-
className: cn(
|
|
96
|
+
className: cn(
|
|
97
|
+
emptyStateVariants({ size, appearance, align }),
|
|
98
|
+
className
|
|
99
|
+
),
|
|
103
100
|
initial: animation === "none" ? false : void 0,
|
|
104
101
|
...motionProps,
|
|
105
102
|
...rest,
|
|
@@ -108,13 +105,33 @@ function EmptyState(props) {
|
|
|
108
105
|
) });
|
|
109
106
|
}
|
|
110
107
|
EmptyState.displayName = "EmptyState";
|
|
111
|
-
function EmptyStateIcon({
|
|
112
|
-
|
|
108
|
+
function EmptyStateIcon({
|
|
109
|
+
className,
|
|
110
|
+
children
|
|
111
|
+
}) {
|
|
112
|
+
return /* @__PURE__ */ jsx(
|
|
113
|
+
"div",
|
|
114
|
+
{
|
|
115
|
+
"data-slot": "empty-state-icon",
|
|
116
|
+
className: cn("text-slate-300", className),
|
|
117
|
+
children
|
|
118
|
+
}
|
|
119
|
+
);
|
|
113
120
|
}
|
|
114
121
|
EmptyStateIcon.displayName = "EmptyStateIcon";
|
|
115
|
-
function EmptyStateTitle({
|
|
122
|
+
function EmptyStateTitle({
|
|
123
|
+
className,
|
|
124
|
+
children
|
|
125
|
+
}) {
|
|
116
126
|
const size = useEmptyStateSize();
|
|
117
|
-
return /* @__PURE__ */ jsx(
|
|
127
|
+
return /* @__PURE__ */ jsx(
|
|
128
|
+
"h2",
|
|
129
|
+
{
|
|
130
|
+
"data-slot": "empty-state-title",
|
|
131
|
+
className: cn(emptyStateTitleVariants({ size }), className),
|
|
132
|
+
children
|
|
133
|
+
}
|
|
134
|
+
);
|
|
118
135
|
}
|
|
119
136
|
EmptyStateTitle.displayName = "EmptyStateTitle";
|
|
120
137
|
function EmptyStateDescription({
|
|
@@ -132,19 +149,14 @@ function EmptyStateDescription({
|
|
|
132
149
|
);
|
|
133
150
|
}
|
|
134
151
|
EmptyStateDescription.displayName = "EmptyStateDescription";
|
|
135
|
-
function EmptyStateAction({
|
|
152
|
+
function EmptyStateAction({
|
|
153
|
+
className,
|
|
154
|
+
children
|
|
155
|
+
}) {
|
|
136
156
|
return /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: cn("mt-2", className), children });
|
|
137
157
|
}
|
|
138
158
|
EmptyStateAction.displayName = "EmptyStateAction";
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
EmptyStateDescription,
|
|
143
|
-
EmptyStateIcon,
|
|
144
|
-
EmptyStateTitle,
|
|
145
|
-
emptyStateAnimationPresets,
|
|
146
|
-
emptyStateDescriptionVariants,
|
|
147
|
-
emptyStateTitleVariants,
|
|
148
|
-
emptyStateVariants
|
|
149
|
-
};
|
|
159
|
+
|
|
160
|
+
export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, emptyStateAnimationPresets, emptyStateDescriptionVariants, emptyStateTitleVariants, emptyStateVariants };
|
|
161
|
+
//# sourceMappingURL=empty-state.mjs.map
|
|
150
162
|
//# sourceMappingURL=empty-state.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/empty-state/
|
|
1
|
+
{"version":3,"sources":["../../src/ui/empty-state/animations.ts","../../src/ui/empty-state/variants.ts","../../src/ui/empty-state/empty-state.tsx"],"names":[],"mappings":"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","file":"empty-state.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { EmptyStateAnimation } from \"./types\";\n\ntype EmptyStatePresetMotionProps = Pick<\n HTMLMotionProps<\"div\">,\n \"initial\" | \"animate\" | \"transition\" | \"whileHover\"\n>;\n\nexport type EmptyStateAnimationPresets = Record<\n EmptyStateAnimation,\n EmptyStatePresetMotionProps\n>;\n\nexport const emptyStateAnimationPresets: EmptyStateAnimationPresets = {\n none: {},\n float: {\n whileHover: { y: -4 },\n transition: { type: \"spring\", stiffness: 260, damping: 22 },\n },\n fade: {\n initial: { opacity: 0, y: 8 },\n animate: { opacity: 1, y: 0 },\n transition: { duration: 0.25, ease: \"easeOut\" },\n },\n \"slide-up\": {\n initial: { opacity: 0, y: 16 },\n animate: { opacity: 1, y: 0 },\n transition: { type: \"spring\", stiffness: 380, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const emptyStateVariants = cva(\n \"flex w-full flex-col items-center text-center\",\n {\n variants: {\n size: {\n sm: \"gap-2 p-4 text-sm\",\n md: \"gap-3 p-6 text-sm\",\n lg: \"gap-4 p-8 text-base\",\n },\n appearance: {\n default: \"text-slate-50\",\n ghost: \"text-slate-200\",\n card: \"rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n },\n align: {\n start: \"items-start text-left\",\n center: \"items-center text-center\",\n end: \"items-end text-right\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n align: \"center\",\n },\n },\n);\n\nexport const emptyStateTitleVariants = cva(\"font-semibold tracking-tight\", {\n variants: {\n size: {\n sm: \"text-base\",\n md: \"text-lg\",\n lg: \"text-xl\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const emptyStateDescriptionVariants = cva(\"max-w-md text-slate-400\", {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { emptyStateAnimationPresets } from \"./animations\";\nimport type { EmptyStateProps, EmptyStateSectionProps } from \"./types\";\nimport {\n emptyStateDescriptionVariants,\n emptyStateTitleVariants,\n emptyStateVariants,\n} from \"./variants\";\n\ntype EmptyStateSize = NonNullable<EmptyStateProps[\"size\"]>;\n\nconst EmptyStateSizeContext = createContext<EmptyStateSize>(\"md\");\n\nfunction useEmptyStateSize(): EmptyStateSize {\n return useContext(EmptyStateSizeContext);\n}\n\nexport function EmptyState(props: EmptyStateProps) {\n const {\n className,\n size = \"md\",\n appearance,\n align,\n animation = \"none\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = emptyStateAnimationPresets[animation];\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <EmptyStateSizeContext.Provider value={ctx}>\n <motion.section\n ref={ref}\n data-slot=\"empty-state\"\n aria-live=\"polite\"\n className={cn(\n emptyStateVariants({ size, appearance, align }),\n className,\n )}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.section>\n </EmptyStateSizeContext.Provider>\n );\n}\n\nEmptyState.displayName = \"EmptyState\";\n\nexport function EmptyStateIcon({\n className,\n children,\n}: EmptyStateSectionProps) {\n return (\n <div\n data-slot=\"empty-state-icon\"\n className={cn(\"text-slate-300\", className)}\n >\n {children}\n </div>\n );\n}\n\nEmptyStateIcon.displayName = \"EmptyStateIcon\";\n\nexport function EmptyStateTitle({\n className,\n children,\n}: EmptyStateSectionProps) {\n const size = useEmptyStateSize();\n return (\n <h2\n data-slot=\"empty-state-title\"\n className={cn(emptyStateTitleVariants({ size }), className)}\n >\n {children}\n </h2>\n );\n}\n\nEmptyStateTitle.displayName = \"EmptyStateTitle\";\n\nexport function EmptyStateDescription({\n className,\n children,\n}: EmptyStateSectionProps) {\n const size = useEmptyStateSize();\n return (\n <p\n data-slot=\"empty-state-description\"\n className={cn(emptyStateDescriptionVariants({ size }), className)}\n >\n {children}\n </p>\n );\n}\n\nEmptyStateDescription.displayName = \"EmptyStateDescription\";\n\nexport function EmptyStateAction({\n className,\n children,\n}: EmptyStateSectionProps) {\n return (\n <div data-slot=\"empty-state-action\" className={cn(\"mt-2\", className)}>\n {children}\n </div>\n );\n}\n\nEmptyStateAction.displayName = \"EmptyStateAction\";\n"]}
|