@opencosmos/ui 1.3.1
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/.claude/CLAUDE.md +239 -0
- package/README.md +161 -0
- package/dist/cli.mjs +151 -0
- package/dist/dates.d.mts +20 -0
- package/dist/dates.d.ts +20 -0
- package/dist/dates.js +240 -0
- package/dist/dates.js.map +1 -0
- package/dist/dates.mjs +203 -0
- package/dist/dates.mjs.map +1 -0
- package/dist/dnd.d.mts +126 -0
- package/dist/dnd.d.ts +126 -0
- package/dist/dnd.js +274 -0
- package/dist/dnd.js.map +1 -0
- package/dist/dnd.mjs +250 -0
- package/dist/dnd.mjs.map +1 -0
- package/dist/fontThemes-Dh8mtXES.d.mts +868 -0
- package/dist/fontThemes-Dh8mtXES.d.ts +868 -0
- package/dist/forms.d.mts +38 -0
- package/dist/forms.d.ts +38 -0
- package/dist/forms.js +198 -0
- package/dist/forms.js.map +1 -0
- package/dist/forms.mjs +159 -0
- package/dist/forms.mjs.map +1 -0
- package/dist/hooks-1b8WaQf1.d.mts +225 -0
- package/dist/hooks-CKW8vE9H.d.ts +225 -0
- package/dist/hooks.d.mts +3 -0
- package/dist/hooks.d.ts +3 -0
- package/dist/hooks.js +971 -0
- package/dist/hooks.js.map +1 -0
- package/dist/hooks.mjs +943 -0
- package/dist/hooks.mjs.map +1 -0
- package/dist/index-DscTIrZ2.d.mts +29 -0
- package/dist/index-DscTIrZ2.d.ts +29 -0
- package/dist/index.d.mts +3382 -0
- package/dist/index.d.ts +3382 -0
- package/dist/index.js +15146 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +14802 -0
- package/dist/index.mjs.map +1 -0
- package/dist/providers-CXPDMsl7.d.mts +30 -0
- package/dist/providers-Dn_Msjvz.d.ts +30 -0
- package/dist/providers.d.mts +3 -0
- package/dist/providers.d.ts +3 -0
- package/dist/providers.js +1885 -0
- package/dist/providers.js.map +1 -0
- package/dist/providers.mjs +1859 -0
- package/dist/providers.mjs.map +1 -0
- package/dist/tables.d.mts +10 -0
- package/dist/tables.d.ts +10 -0
- package/dist/tables.js +248 -0
- package/dist/tables.js.map +1 -0
- package/dist/tables.mjs +218 -0
- package/dist/tables.mjs.map +1 -0
- package/dist/tokens.d.mts +1065 -0
- package/dist/tokens.d.ts +1065 -0
- package/dist/tokens.js +2637 -0
- package/dist/tokens.js.map +1 -0
- package/dist/tokens.mjs +2555 -0
- package/dist/tokens.mjs.map +1 -0
- package/dist/utils-CIIM7dAC.d.ts +986 -0
- package/dist/utils-Cs04sxth.d.mts +986 -0
- package/dist/utils.d.mts +4 -0
- package/dist/utils.d.ts +4 -0
- package/dist/utils.js +874 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.mjs +806 -0
- package/dist/utils.mjs.map +1 -0
- package/dist/validation-Bj1ye-v_.d.mts +114 -0
- package/dist/validation-Bj1ye-v_.d.ts +114 -0
- package/dist/webgl.d.mts +104 -0
- package/dist/webgl.d.ts +104 -0
- package/dist/webgl.js +226 -0
- package/dist/webgl.js.map +1 -0
- package/dist/webgl.mjs +195 -0
- package/dist/webgl.mjs.map +1 -0
- package/package.json +267 -0
- package/src/cli.ts +206 -0
- package/src/component-registry.ts +183 -0
- package/src/components/actions/Button.test.tsx +61 -0
- package/src/components/actions/Button.tsx +70 -0
- package/src/components/actions/Link.tsx +78 -0
- package/src/components/actions/Magnetic.tsx +68 -0
- package/src/components/actions/Toggle.test.tsx +40 -0
- package/src/components/actions/Toggle.tsx +47 -0
- package/src/components/actions/ToggleGroup.tsx +70 -0
- package/src/components/actions/index.ts +5 -0
- package/src/components/backgrounds/FaultyTerminal.tsx +426 -0
- package/src/components/backgrounds/OrbBackground.tsx +424 -0
- package/src/components/backgrounds/WarpBackground.tsx +358 -0
- package/src/components/backgrounds/index.ts +3 -0
- package/src/components/blocks/Hero.tsx +142 -0
- package/src/components/blocks/social/OpenGraphCard.tsx +243 -0
- package/src/components/cursor/SplashCursor.tsx +1315 -0
- package/src/components/cursor/TargetCursor.tsx +187 -0
- package/src/components/cursor/index.ts +2 -0
- package/src/components/data-display/AspectImage.tsx +73 -0
- package/src/components/data-display/Avatar.test.tsx +35 -0
- package/src/components/data-display/Avatar.tsx +55 -0
- package/src/components/data-display/Badge.test.tsx +43 -0
- package/src/components/data-display/Badge.tsx +84 -0
- package/src/components/data-display/Brand.tsx +123 -0
- package/src/components/data-display/Calendar.tsx +70 -0
- package/src/components/data-display/Card.test.tsx +92 -0
- package/src/components/data-display/Card.tsx +115 -0
- package/src/components/data-display/Code.tsx +210 -0
- package/src/components/data-display/CollapsibleCodeBlock.tsx +238 -0
- package/src/components/data-display/DataTable.tsx +119 -0
- package/src/components/data-display/DescriptionList.tsx +41 -0
- package/src/components/data-display/GitHubIcon.tsx +44 -0
- package/src/components/data-display/Heading.test.tsx +36 -0
- package/src/components/data-display/Heading.tsx +83 -0
- package/src/components/data-display/StatCard.tsx +195 -0
- package/src/components/data-display/Table.tsx +133 -0
- package/src/components/data-display/Text.test.tsx +48 -0
- package/src/components/data-display/Text.tsx +144 -0
- package/src/components/data-display/Timeline.tsx +194 -0
- package/src/components/data-display/TreeView.tsx +226 -0
- package/src/components/data-display/Typewriter.tsx +119 -0
- package/src/components/data-display/VariableWeightText.tsx +130 -0
- package/src/components/data-display/index.ts +19 -0
- package/src/components/feedback/Alert.test.tsx +44 -0
- package/src/components/feedback/Alert.tsx +65 -0
- package/src/components/feedback/EmptyState.tsx +113 -0
- package/src/components/feedback/Progress.test.tsx +60 -0
- package/src/components/feedback/Progress.tsx +30 -0
- package/src/components/feedback/ProgressBar.tsx +158 -0
- package/src/components/feedback/Skeleton.test.tsx +39 -0
- package/src/components/feedback/Skeleton.tsx +45 -0
- package/src/components/feedback/Sonner.tsx +28 -0
- package/src/components/feedback/Spinner.test.tsx +33 -0
- package/src/components/feedback/Spinner.tsx +99 -0
- package/src/components/feedback/Stepper.tsx +307 -0
- package/src/components/feedback/Toast/Toast.tsx +243 -0
- package/src/components/feedback/Toast/index.ts +2 -0
- package/src/components/feedback/index.ts +9 -0
- package/src/components/forms/Checkbox.test.tsx +40 -0
- package/src/components/forms/Checkbox.tsx +31 -0
- package/src/components/forms/ColorPicker.tsx +118 -0
- package/src/components/forms/Combobox.tsx +96 -0
- package/src/components/forms/DragDrop.tsx +440 -0
- package/src/components/forms/FileUpload.tsx +252 -0
- package/src/components/forms/FilterButton.tsx +65 -0
- package/src/components/forms/Form.tsx +197 -0
- package/src/components/forms/Input.test.tsx +46 -0
- package/src/components/forms/Input.tsx +43 -0
- package/src/components/forms/InputOTP.tsx +81 -0
- package/src/components/forms/Label.test.tsx +20 -0
- package/src/components/forms/Label.tsx +25 -0
- package/src/components/forms/RadioGroup.tsx +51 -0
- package/src/components/forms/SearchBar.tsx +215 -0
- package/src/components/forms/Select.test.tsx +118 -0
- package/src/components/forms/Select.tsx +274 -0
- package/src/components/forms/Slider.tsx +29 -0
- package/src/components/forms/Switch.test.tsx +76 -0
- package/src/components/forms/Switch.tsx +30 -0
- package/src/components/forms/TextField.tsx +152 -0
- package/src/components/forms/Textarea.test.tsx +41 -0
- package/src/components/forms/Textarea.tsx +29 -0
- package/src/components/forms/ThemeSwitcher.tsx +290 -0
- package/src/components/forms/ThemeToggle.tsx +151 -0
- package/src/components/forms/index.ts +19 -0
- package/src/components/layout/Accordion.test.tsx +66 -0
- package/src/components/layout/Accordion.tsx +64 -0
- package/src/components/layout/AspectRatio.tsx +7 -0
- package/src/components/layout/Carousel.tsx +277 -0
- package/src/components/layout/Collapsible.test.tsx +40 -0
- package/src/components/layout/Collapsible.tsx +31 -0
- package/src/components/layout/Container.test.tsx +45 -0
- package/src/components/layout/Container.tsx +99 -0
- package/src/components/layout/CustomizerPanel.tsx +400 -0
- package/src/components/layout/DatePicker.tsx +57 -0
- package/src/components/layout/Footer/Footer.tsx +175 -0
- package/src/components/layout/Footer/index.ts +2 -0
- package/src/components/layout/GlassSurface.tsx +82 -0
- package/src/components/layout/Grid.test.tsx +31 -0
- package/src/components/layout/Grid.tsx +130 -0
- package/src/components/layout/Header/Header.tsx +450 -0
- package/src/components/layout/Header/index.ts +2 -0
- package/src/components/layout/PageLayout.tsx +180 -0
- package/src/components/layout/PageTemplate.tsx +158 -0
- package/src/components/layout/Resizable.tsx +48 -0
- package/src/components/layout/ScrollArea.tsx +53 -0
- package/src/components/layout/Separator.test.tsx +28 -0
- package/src/components/layout/Separator.tsx +29 -0
- package/src/components/layout/Sidebar.tsx +171 -0
- package/src/components/layout/Stack.test.tsx +41 -0
- package/src/components/layout/Stack.tsx +89 -0
- package/src/components/layout/glass-surface.css +60 -0
- package/src/components/layout/index.ts +18 -0
- package/src/components/motion/AnimatedBeam.tsx +159 -0
- package/src/components/navigation/Breadcrumb.test.tsx +57 -0
- package/src/components/navigation/Breadcrumb.tsx +119 -0
- package/src/components/navigation/Breadcrumbs.tsx +221 -0
- package/src/components/navigation/Command.tsx +159 -0
- package/src/components/navigation/Menubar.tsx +115 -0
- package/src/components/navigation/NavLink.tsx +55 -0
- package/src/components/navigation/NavigationMenu.tsx +125 -0
- package/src/components/navigation/Pagination.tsx +121 -0
- package/src/components/navigation/SecondaryNav.tsx +100 -0
- package/src/components/navigation/Tabs.test.tsx +47 -0
- package/src/components/navigation/Tabs.tsx +60 -0
- package/src/components/navigation/TertiaryNav.tsx +90 -0
- package/src/components/navigation/index.ts +10 -0
- package/src/components/overlays/AlertDialog.test.tsx +69 -0
- package/src/components/overlays/AlertDialog.tsx +166 -0
- package/src/components/overlays/ContextMenu.tsx +243 -0
- package/src/components/overlays/Dialog.test.tsx +79 -0
- package/src/components/overlays/Dialog.tsx +158 -0
- package/src/components/overlays/Drawer.tsx +128 -0
- package/src/components/overlays/Dropdown.tsx +253 -0
- package/src/components/overlays/DropdownMenu.tsx +242 -0
- package/src/components/overlays/HoverCard.tsx +32 -0
- package/src/components/overlays/Modal.tsx +250 -0
- package/src/components/overlays/NotificationCenter.tsx +364 -0
- package/src/components/overlays/Popover.test.tsx +40 -0
- package/src/components/overlays/Popover.tsx +46 -0
- package/src/components/overlays/Sheet.tsx +163 -0
- package/src/components/overlays/Tooltip.test.tsx +33 -0
- package/src/components/overlays/Tooltip.tsx +32 -0
- package/src/components/overlays/index.ts +12 -0
- package/src/dates.ts +2 -0
- package/src/dnd.ts +1 -0
- package/src/forms.ts +1 -0
- package/src/globals.css +187 -0
- package/src/hooks/index.ts +6 -0
- package/src/hooks/useForm.ts +247 -0
- package/src/hooks/useMotionPreference.test.ts +102 -0
- package/src/hooks/useMotionPreference.ts +78 -0
- package/src/hooks/useTheme.ts +58 -0
- package/src/hooks.ts +9 -0
- package/src/index.ts +168 -0
- package/src/lib/animations.ts +356 -0
- package/src/lib/breadcrumbs.ts +94 -0
- package/src/lib/colors.ts +493 -0
- package/src/lib/store/customizer.ts +482 -0
- package/src/lib/store/index.ts +3 -0
- package/src/lib/store/theme.ts +55 -0
- package/src/lib/syntax-parser/index.ts +50 -0
- package/src/lib/syntax-parser/patterns.ts +64 -0
- package/src/lib/syntax-parser/tokenizer.ts +117 -0
- package/src/lib/syntax-parser/types.ts +27 -0
- package/src/lib/utils.ts +6 -0
- package/src/lib/validation.ts +204 -0
- package/src/lib/webgl/Color.ts +11 -0
- package/src/lib/webgl/Mesh.ts +41 -0
- package/src/lib/webgl/Program.ts +118 -0
- package/src/lib/webgl/Renderer.ts +51 -0
- package/src/lib/webgl/Triangle.ts +27 -0
- package/src/lib/webgl/Vec3.ts +18 -0
- package/src/lib/webgl/index.ts +13 -0
- package/src/nativewind-env.d.ts +1 -0
- package/src/providers/ThemeProvider.tsx +461 -0
- package/src/providers/index.ts +1 -0
- package/src/providers.ts +7 -0
- package/src/tables.ts +1 -0
- package/src/test/setup.ts +39 -0
- package/src/theme.css +158 -0
- package/src/tokens.ts +7 -0
- package/src/utils.ts +12 -0
- package/src/webgl.ts +1 -0
package/dist/dates.js
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/dates.ts
|
|
32
|
+
var dates_exports = {};
|
|
33
|
+
__export(dates_exports, {
|
|
34
|
+
Calendar: () => Calendar,
|
|
35
|
+
DatePicker: () => DatePicker
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(dates_exports);
|
|
38
|
+
|
|
39
|
+
// src/components/data-display/Calendar.tsx
|
|
40
|
+
var import_lucide_react = require("lucide-react");
|
|
41
|
+
var import_react_day_picker = require("react-day-picker");
|
|
42
|
+
|
|
43
|
+
// src/lib/utils.ts
|
|
44
|
+
var import_clsx = require("clsx");
|
|
45
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
46
|
+
function cn(...inputs) {
|
|
47
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// src/components/actions/Button.tsx
|
|
51
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
52
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
53
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
54
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
55
|
+
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1",
|
|
56
|
+
{
|
|
57
|
+
variants: {
|
|
58
|
+
variant: {
|
|
59
|
+
default: "bg-primary text-primary-foreground shadow-sm",
|
|
60
|
+
primary: "bg-primary text-primary-foreground shadow-sm",
|
|
61
|
+
// Alias for default
|
|
62
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs",
|
|
63
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary",
|
|
64
|
+
secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
|
|
65
|
+
ghost: "hover:text-accent-foreground",
|
|
66
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
67
|
+
},
|
|
68
|
+
size: {
|
|
69
|
+
default: "h-9 px-4 py-2",
|
|
70
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
71
|
+
lg: "h-10 rounded-md px-8",
|
|
72
|
+
icon: "h-9 w-9"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
defaultVariants: {
|
|
76
|
+
variant: "default",
|
|
77
|
+
size: "default"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
var Button = ({
|
|
82
|
+
ref,
|
|
83
|
+
className,
|
|
84
|
+
variant,
|
|
85
|
+
size,
|
|
86
|
+
asChild = false,
|
|
87
|
+
children,
|
|
88
|
+
...props
|
|
89
|
+
}) => {
|
|
90
|
+
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
Comp,
|
|
93
|
+
{
|
|
94
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
95
|
+
ref,
|
|
96
|
+
...props,
|
|
97
|
+
children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "relative z-20 flex items-center justify-center gap-2", children })
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// src/components/data-display/Calendar.tsx
|
|
103
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
104
|
+
function Calendar({
|
|
105
|
+
className,
|
|
106
|
+
classNames,
|
|
107
|
+
showOutsideDays = true,
|
|
108
|
+
...props
|
|
109
|
+
}) {
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
111
|
+
import_react_day_picker.DayPicker,
|
|
112
|
+
{
|
|
113
|
+
showOutsideDays,
|
|
114
|
+
className: cn("p-3", className),
|
|
115
|
+
classNames: {
|
|
116
|
+
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
|
117
|
+
month: "space-y-4",
|
|
118
|
+
caption: "flex justify-center pt-1 relative items-center",
|
|
119
|
+
caption_label: "text-sm font-medium",
|
|
120
|
+
nav: "space-x-1 flex items-center",
|
|
121
|
+
nav_button: cn(
|
|
122
|
+
buttonVariants({ variant: "outline" }),
|
|
123
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
|
124
|
+
),
|
|
125
|
+
nav_button_previous: "absolute left-1",
|
|
126
|
+
nav_button_next: "absolute right-1",
|
|
127
|
+
table: "w-full border-collapse space-y-1",
|
|
128
|
+
head_row: "flex",
|
|
129
|
+
head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
|
|
130
|
+
row: "flex w-full mt-2",
|
|
131
|
+
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
|
132
|
+
day: cn(
|
|
133
|
+
buttonVariants({ variant: "ghost" }),
|
|
134
|
+
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
|
|
135
|
+
),
|
|
136
|
+
day_range_end: "day-range-end",
|
|
137
|
+
day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
|
138
|
+
day_today: "bg-accent text-accent-foreground",
|
|
139
|
+
day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
|
|
140
|
+
day_disabled: "text-muted-foreground opacity-50",
|
|
141
|
+
day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
|
|
142
|
+
day_hidden: "invisible",
|
|
143
|
+
...classNames
|
|
144
|
+
},
|
|
145
|
+
components: {
|
|
146
|
+
Chevron: ({ ...props2 }) => {
|
|
147
|
+
if (props2.orientation === "left") {
|
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronLeft, { className: "h-4 w-4" });
|
|
149
|
+
}
|
|
150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronRight, { className: "h-4 w-4" });
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
...props
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
Calendar.displayName = "Calendar";
|
|
158
|
+
|
|
159
|
+
// src/components/layout/DatePicker.tsx
|
|
160
|
+
var import_date_fns = require("date-fns");
|
|
161
|
+
var import_lucide_react2 = require("lucide-react");
|
|
162
|
+
|
|
163
|
+
// src/components/overlays/Popover.tsx
|
|
164
|
+
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
165
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
166
|
+
var Popover = PopoverPrimitive.Root;
|
|
167
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
168
|
+
var PopoverContent = ({
|
|
169
|
+
ref,
|
|
170
|
+
className,
|
|
171
|
+
align = "center",
|
|
172
|
+
sideOffset = 4,
|
|
173
|
+
style,
|
|
174
|
+
...props
|
|
175
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
176
|
+
PopoverPrimitive.Content,
|
|
177
|
+
{
|
|
178
|
+
ref,
|
|
179
|
+
align,
|
|
180
|
+
sideOffset,
|
|
181
|
+
className: cn(
|
|
182
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
183
|
+
className
|
|
184
|
+
),
|
|
185
|
+
style: {
|
|
186
|
+
backgroundColor: "var(--color-popover, #ffffff)",
|
|
187
|
+
color: "var(--color-popover-foreground, #0a0a0a)",
|
|
188
|
+
border: "1px solid var(--color-border, #d4d4d4)",
|
|
189
|
+
borderRadius: "var(--radius, 0.5rem)",
|
|
190
|
+
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
191
|
+
zIndex: 50,
|
|
192
|
+
...style
|
|
193
|
+
},
|
|
194
|
+
...props
|
|
195
|
+
}
|
|
196
|
+
) });
|
|
197
|
+
|
|
198
|
+
// src/components/layout/DatePicker.tsx
|
|
199
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
200
|
+
function DatePicker({
|
|
201
|
+
date,
|
|
202
|
+
onDateChange,
|
|
203
|
+
placeholder = "Pick a date",
|
|
204
|
+
className,
|
|
205
|
+
disabled = false
|
|
206
|
+
}) {
|
|
207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Popover, { children: [
|
|
208
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
209
|
+
Button,
|
|
210
|
+
{
|
|
211
|
+
variant: "outline",
|
|
212
|
+
className: cn(
|
|
213
|
+
"w-[280px] justify-start text-left font-normal",
|
|
214
|
+
!date && "text-muted-foreground",
|
|
215
|
+
className
|
|
216
|
+
),
|
|
217
|
+
disabled,
|
|
218
|
+
children: [
|
|
219
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Calendar, { className: "mr-2 h-4 w-4" }),
|
|
220
|
+
date ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: placeholder })
|
|
221
|
+
]
|
|
222
|
+
}
|
|
223
|
+
) }),
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
225
|
+
Calendar,
|
|
226
|
+
{
|
|
227
|
+
mode: "single",
|
|
228
|
+
selected: date,
|
|
229
|
+
onSelect: onDateChange,
|
|
230
|
+
initialFocus: true
|
|
231
|
+
}
|
|
232
|
+
) })
|
|
233
|
+
] });
|
|
234
|
+
}
|
|
235
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
236
|
+
0 && (module.exports = {
|
|
237
|
+
Calendar,
|
|
238
|
+
DatePicker
|
|
239
|
+
});
|
|
240
|
+
//# sourceMappingURL=dates.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/dates.ts","../src/components/data-display/Calendar.tsx","../src/lib/utils.ts","../src/components/actions/Button.tsx","../src/components/layout/DatePicker.tsx","../src/components/overlays/Popover.tsx"],"sourcesContent":["export * from './components/data-display/Calendar';\nexport * from './components/layout/DatePicker';\n","\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../actions/Button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\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: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-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:\n \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n ),\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:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n Chevron: ({ ...props }) => {\n if (props.orientation === \"left\") {\n return <ChevronLeft className=\"h-4 w-4\" />\n }\n return <ChevronRight className=\"h-4 w-4\" />\n },\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground shadow-sm',\n primary: 'bg-primary text-primary-foreground shadow-sm', // Alias for default\n destructive: 'bg-destructive text-destructive-foreground shadow-xs',\n outline: 'border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary',\n secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',\n ghost: 'hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = (\n {\n ref,\n className,\n variant,\n size,\n asChild = false,\n children,\n ...props\n }: ButtonProps & {\n ref?: React.Ref<HTMLButtonElement>;\n }\n) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <span className=\"relative z-20 flex items-center justify-center gap-2\">\n {children}\n </span>\n )}\n </Comp>\n )\n}\n\nexport { Button, buttonVariants };\n","\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"../actions/Button\"\nimport { Calendar } from \"../data-display/Calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"../overlays/Popover\"\n\nexport interface DatePickerProps {\n date?: Date\n onDateChange?: (date: Date | undefined) => void\n placeholder?: string\n className?: string\n disabled?: boolean\n}\n\nexport function DatePicker({\n date,\n onDateChange,\n placeholder = \"Pick a date\",\n className,\n disabled = false,\n}: DatePickerProps) {\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n className={cn(\n \"w-[280px] justify-start text-left font-normal\",\n !date && \"text-muted-foreground\",\n className\n )}\n disabled={disabled}\n >\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\n {date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\">\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={onDateChange}\n initialFocus\n />\n </PopoverContent>\n </Popover>\n )\n}\n","\"use client\";\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = (\n {\n ref,\n className,\n align = \"center\",\n sideOffset = 4,\n style,\n ...props\n }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n }\n) => (<PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n style={{\n backgroundColor: 'var(--color-popover, #ffffff)',\n color: 'var(--color-popover-foreground, #0a0a0a)',\n border: '1px solid var(--color-border, #d4d4d4)',\n borderRadius: 'var(--radius, 0.5rem)',\n boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n zIndex: 50,\n ...style,\n }}\n {...props}\n />\n</PopoverPrimitive.Portal>)\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"mappings":"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","names":["import_jsx_runtime","props","import_lucide_react","import_jsx_runtime","import_jsx_runtime","CalendarIcon"]}
|
package/dist/dates.mjs
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/data-display/Calendar.tsx
|
|
4
|
+
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
5
|
+
import { DayPicker } from "react-day-picker";
|
|
6
|
+
|
|
7
|
+
// src/lib/utils.ts
|
|
8
|
+
import { clsx } from "clsx";
|
|
9
|
+
import { twMerge } from "tailwind-merge";
|
|
10
|
+
function cn(...inputs) {
|
|
11
|
+
return twMerge(clsx(inputs));
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// src/components/actions/Button.tsx
|
|
15
|
+
import { cva } from "class-variance-authority";
|
|
16
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
17
|
+
import { jsx } from "react/jsx-runtime";
|
|
18
|
+
var buttonVariants = cva(
|
|
19
|
+
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1",
|
|
20
|
+
{
|
|
21
|
+
variants: {
|
|
22
|
+
variant: {
|
|
23
|
+
default: "bg-primary text-primary-foreground shadow-sm",
|
|
24
|
+
primary: "bg-primary text-primary-foreground shadow-sm",
|
|
25
|
+
// Alias for default
|
|
26
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs",
|
|
27
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary",
|
|
28
|
+
secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
|
|
29
|
+
ghost: "hover:text-accent-foreground",
|
|
30
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
31
|
+
},
|
|
32
|
+
size: {
|
|
33
|
+
default: "h-9 px-4 py-2",
|
|
34
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
35
|
+
lg: "h-10 rounded-md px-8",
|
|
36
|
+
icon: "h-9 w-9"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
variant: "default",
|
|
41
|
+
size: "default"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
var Button = ({
|
|
46
|
+
ref,
|
|
47
|
+
className,
|
|
48
|
+
variant,
|
|
49
|
+
size,
|
|
50
|
+
asChild = false,
|
|
51
|
+
children,
|
|
52
|
+
...props
|
|
53
|
+
}) => {
|
|
54
|
+
const Comp = asChild ? Slot : "button";
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
Comp,
|
|
57
|
+
{
|
|
58
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
59
|
+
ref,
|
|
60
|
+
...props,
|
|
61
|
+
children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "relative z-20 flex items-center justify-center gap-2", children })
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// src/components/data-display/Calendar.tsx
|
|
67
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
68
|
+
function Calendar({
|
|
69
|
+
className,
|
|
70
|
+
classNames,
|
|
71
|
+
showOutsideDays = true,
|
|
72
|
+
...props
|
|
73
|
+
}) {
|
|
74
|
+
return /* @__PURE__ */ jsx2(
|
|
75
|
+
DayPicker,
|
|
76
|
+
{
|
|
77
|
+
showOutsideDays,
|
|
78
|
+
className: cn("p-3", className),
|
|
79
|
+
classNames: {
|
|
80
|
+
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
|
81
|
+
month: "space-y-4",
|
|
82
|
+
caption: "flex justify-center pt-1 relative items-center",
|
|
83
|
+
caption_label: "text-sm font-medium",
|
|
84
|
+
nav: "space-x-1 flex items-center",
|
|
85
|
+
nav_button: cn(
|
|
86
|
+
buttonVariants({ variant: "outline" }),
|
|
87
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
|
88
|
+
),
|
|
89
|
+
nav_button_previous: "absolute left-1",
|
|
90
|
+
nav_button_next: "absolute right-1",
|
|
91
|
+
table: "w-full border-collapse space-y-1",
|
|
92
|
+
head_row: "flex",
|
|
93
|
+
head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
|
|
94
|
+
row: "flex w-full mt-2",
|
|
95
|
+
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
|
96
|
+
day: cn(
|
|
97
|
+
buttonVariants({ variant: "ghost" }),
|
|
98
|
+
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
|
|
99
|
+
),
|
|
100
|
+
day_range_end: "day-range-end",
|
|
101
|
+
day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
|
102
|
+
day_today: "bg-accent text-accent-foreground",
|
|
103
|
+
day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
|
|
104
|
+
day_disabled: "text-muted-foreground opacity-50",
|
|
105
|
+
day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
|
|
106
|
+
day_hidden: "invisible",
|
|
107
|
+
...classNames
|
|
108
|
+
},
|
|
109
|
+
components: {
|
|
110
|
+
Chevron: ({ ...props2 }) => {
|
|
111
|
+
if (props2.orientation === "left") {
|
|
112
|
+
return /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" });
|
|
113
|
+
}
|
|
114
|
+
return /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4" });
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
...props
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
Calendar.displayName = "Calendar";
|
|
122
|
+
|
|
123
|
+
// src/components/layout/DatePicker.tsx
|
|
124
|
+
import { format } from "date-fns";
|
|
125
|
+
import { Calendar as CalendarIcon } from "lucide-react";
|
|
126
|
+
|
|
127
|
+
// src/components/overlays/Popover.tsx
|
|
128
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
129
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
130
|
+
var Popover = PopoverPrimitive.Root;
|
|
131
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
132
|
+
var PopoverContent = ({
|
|
133
|
+
ref,
|
|
134
|
+
className,
|
|
135
|
+
align = "center",
|
|
136
|
+
sideOffset = 4,
|
|
137
|
+
style,
|
|
138
|
+
...props
|
|
139
|
+
}) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
|
|
140
|
+
PopoverPrimitive.Content,
|
|
141
|
+
{
|
|
142
|
+
ref,
|
|
143
|
+
align,
|
|
144
|
+
sideOffset,
|
|
145
|
+
className: cn(
|
|
146
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
147
|
+
className
|
|
148
|
+
),
|
|
149
|
+
style: {
|
|
150
|
+
backgroundColor: "var(--color-popover, #ffffff)",
|
|
151
|
+
color: "var(--color-popover-foreground, #0a0a0a)",
|
|
152
|
+
border: "1px solid var(--color-border, #d4d4d4)",
|
|
153
|
+
borderRadius: "var(--radius, 0.5rem)",
|
|
154
|
+
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
155
|
+
zIndex: 50,
|
|
156
|
+
...style
|
|
157
|
+
},
|
|
158
|
+
...props
|
|
159
|
+
}
|
|
160
|
+
) });
|
|
161
|
+
|
|
162
|
+
// src/components/layout/DatePicker.tsx
|
|
163
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
164
|
+
function DatePicker({
|
|
165
|
+
date,
|
|
166
|
+
onDateChange,
|
|
167
|
+
placeholder = "Pick a date",
|
|
168
|
+
className,
|
|
169
|
+
disabled = false
|
|
170
|
+
}) {
|
|
171
|
+
return /* @__PURE__ */ jsxs(Popover, { children: [
|
|
172
|
+
/* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
173
|
+
Button,
|
|
174
|
+
{
|
|
175
|
+
variant: "outline",
|
|
176
|
+
className: cn(
|
|
177
|
+
"w-[280px] justify-start text-left font-normal",
|
|
178
|
+
!date && "text-muted-foreground",
|
|
179
|
+
className
|
|
180
|
+
),
|
|
181
|
+
disabled,
|
|
182
|
+
children: [
|
|
183
|
+
/* @__PURE__ */ jsx4(CalendarIcon, { className: "mr-2 h-4 w-4" }),
|
|
184
|
+
date ? format(date, "PPP") : /* @__PURE__ */ jsx4("span", { children: placeholder })
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
) }),
|
|
188
|
+
/* @__PURE__ */ jsx4(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx4(
|
|
189
|
+
Calendar,
|
|
190
|
+
{
|
|
191
|
+
mode: "single",
|
|
192
|
+
selected: date,
|
|
193
|
+
onSelect: onDateChange,
|
|
194
|
+
initialFocus: true
|
|
195
|
+
}
|
|
196
|
+
) })
|
|
197
|
+
] });
|
|
198
|
+
}
|
|
199
|
+
export {
|
|
200
|
+
Calendar,
|
|
201
|
+
DatePicker
|
|
202
|
+
};
|
|
203
|
+
//# sourceMappingURL=dates.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Calendar.tsx","../src/lib/utils.ts","../src/components/actions/Button.tsx","../src/components/layout/DatePicker.tsx","../src/components/overlays/Popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../actions/Button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\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: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-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:\n \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n ),\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:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n Chevron: ({ ...props }) => {\n if (props.orientation === \"left\") {\n return <ChevronLeft className=\"h-4 w-4\" />\n }\n return <ChevronRight className=\"h-4 w-4\" />\n },\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground shadow-sm',\n primary: 'bg-primary text-primary-foreground shadow-sm', // Alias for default\n destructive: 'bg-destructive text-destructive-foreground shadow-xs',\n outline: 'border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary',\n secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',\n ghost: 'hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = (\n {\n ref,\n className,\n variant,\n size,\n asChild = false,\n children,\n ...props\n }: ButtonProps & {\n ref?: React.Ref<HTMLButtonElement>;\n }\n) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <span className=\"relative z-20 flex items-center justify-center gap-2\">\n {children}\n </span>\n )}\n </Comp>\n )\n}\n\nexport { Button, buttonVariants };\n","\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"../actions/Button\"\nimport { Calendar } from \"../data-display/Calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"../overlays/Popover\"\n\nexport interface DatePickerProps {\n date?: Date\n onDateChange?: (date: Date | undefined) => void\n placeholder?: string\n className?: string\n disabled?: boolean\n}\n\nexport function DatePicker({\n date,\n onDateChange,\n placeholder = \"Pick a date\",\n className,\n disabled = false,\n}: DatePickerProps) {\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n className={cn(\n \"w-[280px] justify-start text-left font-normal\",\n !date && \"text-muted-foreground\",\n className\n )}\n disabled={disabled}\n >\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\n {date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\">\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={onDateChange}\n initialFocus\n />\n </PopoverContent>\n </Popover>\n )\n}\n","\"use client\";\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = (\n {\n ref,\n className,\n align = \"center\",\n sideOffset = 4,\n style,\n ...props\n }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n }\n) => (<PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n style={{\n backgroundColor: 'var(--color-popover, #ffffff)',\n color: 'var(--color-popover-foreground, #0a0a0a)',\n border: '1px solid var(--color-border, #d4d4d4)',\n borderRadius: 'var(--radius, 0.5rem)',\n boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n zIndex: 50,\n ...style,\n }}\n {...props}\n />\n</PopoverPrimitive.Portal>)\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"mappings":"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","names":["jsx","props","jsx","jsx","jsx"]}
|
package/dist/dnd.d.mts
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { SortingStrategy } from '@dnd-kit/sortable';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Item interface for drag and drop lists
|
|
7
|
+
*/
|
|
8
|
+
interface DragDropItem {
|
|
9
|
+
id: string;
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Props for DragDropList component
|
|
14
|
+
*/
|
|
15
|
+
interface DragDropListProps<T extends DragDropItem> {
|
|
16
|
+
/**
|
|
17
|
+
* Array of items to display
|
|
18
|
+
*/
|
|
19
|
+
items: T[];
|
|
20
|
+
/**
|
|
21
|
+
* Callback fired when items are reordered
|
|
22
|
+
*/
|
|
23
|
+
onReorder: (items: T[]) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Render function for each item
|
|
26
|
+
*/
|
|
27
|
+
renderItem: (item: T, isDragging: boolean) => React__default.ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Enable drag handle mode (only drag from handle)
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
withHandle?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Custom class name for the list container
|
|
35
|
+
*/
|
|
36
|
+
className?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Custom class name for list items
|
|
39
|
+
*/
|
|
40
|
+
itemClassName?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Sorting strategy for the drag & drop behavior
|
|
43
|
+
* - verticalListSortingStrategy: For vertical lists (default)
|
|
44
|
+
* - rectSortingStrategy: For grid layouts
|
|
45
|
+
* @default verticalListSortingStrategy
|
|
46
|
+
*/
|
|
47
|
+
strategy?: SortingStrategy;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Drag handle component for manual drag control
|
|
51
|
+
* Must be used within a DragDropList with withHandle={true}
|
|
52
|
+
*/
|
|
53
|
+
interface DragDropHandleProps {
|
|
54
|
+
/**
|
|
55
|
+
* Custom class name
|
|
56
|
+
*/
|
|
57
|
+
className?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Handle icon
|
|
60
|
+
*/
|
|
61
|
+
icon?: React__default.ReactNode;
|
|
62
|
+
}
|
|
63
|
+
declare function DragDropHandle({ className, icon }: DragDropHandleProps): react_jsx_runtime.JSX.Element | null;
|
|
64
|
+
/**
|
|
65
|
+
* DragDropList - Sortable list component with drag and drop functionality
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```tsx
|
|
69
|
+
* const [items, setItems] = useState([
|
|
70
|
+
* { id: '1', name: 'Item 1' },
|
|
71
|
+
* { id: '2', name: 'Item 2' },
|
|
72
|
+
* ]);
|
|
73
|
+
*
|
|
74
|
+
* <DragDropList
|
|
75
|
+
* items={items}
|
|
76
|
+
* onReorder={setItems}
|
|
77
|
+
* renderItem={(item) => (
|
|
78
|
+
* <div className="p-4 bg-surface rounded">{item.name}</div>
|
|
79
|
+
* )}
|
|
80
|
+
* />
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
declare function DragDropList<T extends DragDropItem>({ items, onReorder, renderItem, withHandle, className, itemClassName, strategy, }: DragDropListProps<T>): react_jsx_runtime.JSX.Element;
|
|
84
|
+
/**
|
|
85
|
+
* Props for DragDropTable component
|
|
86
|
+
*/
|
|
87
|
+
interface DragDropTableProps<T extends DragDropItem> {
|
|
88
|
+
/**
|
|
89
|
+
* Array of items to display
|
|
90
|
+
*/
|
|
91
|
+
items: T[];
|
|
92
|
+
/**
|
|
93
|
+
* Callback fired when items are reordered
|
|
94
|
+
*/
|
|
95
|
+
onReorder: (items: T[]) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Table columns configuration
|
|
98
|
+
*/
|
|
99
|
+
columns: {
|
|
100
|
+
key: string;
|
|
101
|
+
header: string;
|
|
102
|
+
render?: (item: T) => React__default.ReactNode;
|
|
103
|
+
}[];
|
|
104
|
+
/**
|
|
105
|
+
* Custom class name for the table
|
|
106
|
+
*/
|
|
107
|
+
className?: string;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* DragDropTable - Sortable table with draggable rows
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```tsx
|
|
114
|
+
* <DragDropTable
|
|
115
|
+
* items={data}
|
|
116
|
+
* onReorder={setData}
|
|
117
|
+
* columns={[
|
|
118
|
+
* { key: 'name', header: 'Name' },
|
|
119
|
+
* { key: 'email', header: 'Email' },
|
|
120
|
+
* ]}
|
|
121
|
+
* />
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
124
|
+
declare function DragDropTable<T extends DragDropItem>({ items, onReorder, columns, className, }: DragDropTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
125
|
+
|
|
126
|
+
export { DragDropHandle, type DragDropHandleProps, type DragDropItem, DragDropList, type DragDropListProps, DragDropTable, type DragDropTableProps };
|