@alpic-ai/ui 0.0.0-dev.g37dab1d → 0.0.0-dev.g380fab7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion-card.d.mts +5 -5
- package/dist/components/accordion.d.mts +5 -5
- package/dist/components/alert.d.mts +8 -8
- package/dist/components/area-chart.d.mts +62 -0
- package/dist/components/area-chart.mjs +269 -0
- package/dist/components/attachment-tile.d.mts +1 -1
- package/dist/components/avatar.d.mts +7 -7
- package/dist/components/badge.d.mts +1 -1
- package/dist/components/bar-chart.d.mts +48 -0
- package/dist/components/bar-chart.mjs +245 -0
- package/dist/components/bar-list.d.mts +28 -0
- package/dist/components/bar-list.mjs +98 -0
- package/dist/components/breadcrumb.d.mts +10 -10
- package/dist/components/button.d.mts +5 -5
- package/dist/components/card.d.mts +9 -9
- package/dist/components/chart-card.d.mts +25 -0
- package/dist/components/chart-card.mjs +48 -0
- package/dist/components/chart-container.d.mts +20 -0
- package/dist/components/chart-container.mjs +37 -0
- package/dist/components/chart-legend.d.mts +16 -0
- package/dist/components/chart-legend.mjs +26 -0
- package/dist/components/chart-tooltip.d.mts +33 -0
- package/dist/components/chart-tooltip.mjs +52 -0
- package/dist/components/checkbox.d.mts +2 -2
- package/dist/components/collapsible.d.mts +4 -4
- package/dist/components/combobox.d.mts +10 -10
- package/dist/components/command.d.mts +9 -9
- package/dist/components/copyable.d.mts +2 -2
- package/dist/components/description-list.d.mts +5 -5
- package/dist/components/dialog.d.mts +13 -13
- package/dist/components/donut-chart.d.mts +46 -0
- package/dist/components/donut-chart.mjs +185 -0
- package/dist/components/dropdown-menu.d.mts +17 -17
- package/dist/components/form.d.mts +18 -18
- package/dist/components/form.mjs +6 -6
- package/dist/components/github-button.d.mts +1 -1
- package/dist/components/grid-fx.d.mts +13 -0
- package/dist/components/grid-fx.mjs +188 -0
- package/dist/components/heatmap-chart.d.mts +40 -0
- package/dist/components/heatmap-chart.mjs +198 -0
- package/dist/components/input-group.d.mts +4 -4
- package/dist/components/input.d.mts +4 -4
- package/dist/components/input.mjs +2 -2
- package/dist/components/label.d.mts +2 -2
- package/dist/components/line-chart.d.mts +55 -0
- package/dist/components/line-chart.mjs +211 -0
- package/dist/components/page-loader.d.mts +1 -1
- package/dist/components/pagination.d.mts +3 -3
- package/dist/components/popover.d.mts +5 -5
- package/dist/components/radio-group.d.mts +3 -3
- package/dist/components/scroll-area.d.mts +3 -3
- package/dist/components/select.d.mts +9 -9
- package/dist/components/separator.d.mts +2 -2
- package/dist/components/sheet.d.mts +11 -11
- package/dist/components/shimmer-text.d.mts +3 -1
- package/dist/components/sidebar.d.mts +33 -33
- package/dist/components/sidebar.mjs +10 -10
- package/dist/components/skeleton.d.mts +1 -1
- package/dist/components/sonner.d.mts +5 -5
- package/dist/components/spinner.d.mts +2 -2
- package/dist/components/stat.d.mts +30 -0
- package/dist/components/stat.mjs +107 -0
- package/dist/components/status-dot.d.mts +1 -1
- package/dist/components/switch.d.mts +2 -2
- package/dist/components/table.d.mts +10 -10
- package/dist/components/tabs.d.mts +10 -10
- package/dist/components/tag.d.mts +3 -3
- package/dist/components/task-progress.d.mts +1 -1
- package/dist/components/textarea.d.mts +3 -3
- package/dist/components/textarea.mjs +2 -2
- package/dist/components/toggle-group.d.mts +3 -3
- package/dist/components/toggle-group.mjs +3 -3
- package/dist/components/tooltip.d.mts +5 -5
- package/dist/components/typography.d.mts +4 -4
- package/dist/components/wizard.d.mts +4 -4
- package/dist/hooks/use-chart-theme.d.mts +18 -0
- package/dist/hooks/use-chart-theme.mjs +57 -0
- package/dist/hooks/use-mobile.mjs +3 -3
- package/dist/hooks/use-reduced-motion.d.mts +4 -0
- package/dist/hooks/use-reduced-motion.mjs +16 -0
- package/dist/lib/chart-palette.d.mts +4 -0
- package/dist/lib/chart-palette.mjs +95 -0
- package/dist/lib/chart.d.mts +14 -0
- package/dist/lib/chart.mjs +27 -0
- package/package.json +30 -29
- package/src/components/area-chart.tsx +339 -0
- package/src/components/bar-chart.tsx +300 -0
- package/src/components/bar-list.tsx +150 -0
- package/src/components/chart-card.tsx +63 -0
- package/src/components/chart-container.tsx +49 -0
- package/src/components/chart-legend.tsx +41 -0
- package/src/components/chart-tooltip.tsx +93 -0
- package/src/components/donut-chart.tsx +217 -0
- package/src/components/grid-fx.tsx +238 -0
- package/src/components/heatmap-chart.tsx +287 -0
- package/src/components/line-chart.tsx +264 -0
- package/src/components/stat.tsx +109 -0
- package/src/hooks/use-chart-theme.ts +75 -0
- package/src/hooks/use-reduced-motion.ts +17 -0
- package/src/lib/chart-palette.ts +110 -0
- package/src/lib/chart.ts +56 -0
- package/src/stories/area-chart.stories.tsx +200 -0
- package/src/stories/bar-chart.stories.tsx +169 -0
- package/src/stories/bar-list.stories.tsx +85 -0
- package/src/stories/donut-chart.stories.tsx +112 -0
- package/src/stories/heatmap-chart.stories.tsx +107 -0
- package/src/stories/line-chart.stories.tsx +146 -0
- package/src/stories/stat.stories.tsx +64 -0
- package/src/styles/tokens.css +63 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from "class-variance-authority";
|
|
2
|
-
import * as React from "react";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
3
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
4
4
|
|
|
5
5
|
//#region src/components/tabs.d.ts
|
|
@@ -10,7 +10,7 @@ declare function Tabs({
|
|
|
10
10
|
className,
|
|
11
11
|
orientation,
|
|
12
12
|
...props
|
|
13
|
-
}: React.ComponentProps<typeof TabsPrimitive.Root>):
|
|
13
|
+
}: React$1.ComponentProps<typeof TabsPrimitive.Root>): React$1.JSX.Element;
|
|
14
14
|
declare const tabsListVariants: (props?: ({
|
|
15
15
|
variant?: "default" | "line" | null | undefined;
|
|
16
16
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -18,15 +18,15 @@ declare function TabsList({
|
|
|
18
18
|
className,
|
|
19
19
|
variant,
|
|
20
20
|
...props
|
|
21
|
-
}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>):
|
|
21
|
+
}: React$1.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
|
|
22
22
|
declare function TabsTrigger({
|
|
23
23
|
className,
|
|
24
24
|
...props
|
|
25
|
-
}: React.ComponentProps<typeof TabsPrimitive.Trigger>):
|
|
25
|
+
}: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): React$1.JSX.Element;
|
|
26
26
|
declare function TabsContent({
|
|
27
27
|
className,
|
|
28
28
|
...props
|
|
29
|
-
}: React.ComponentProps<typeof TabsPrimitive.Content>):
|
|
29
|
+
}: React$1.ComponentProps<typeof TabsPrimitive.Content>): React$1.JSX.Element;
|
|
30
30
|
type TabsNavVariant = "line" | "pill";
|
|
31
31
|
type TabsNavOrientation = "horizontal" | "vertical";
|
|
32
32
|
declare function TabsNav({
|
|
@@ -34,23 +34,23 @@ declare function TabsNav({
|
|
|
34
34
|
variant,
|
|
35
35
|
className,
|
|
36
36
|
...props
|
|
37
|
-
}: React.ComponentProps<"nav"> & {
|
|
37
|
+
}: React$1.ComponentProps<"nav"> & {
|
|
38
38
|
orientation?: TabsNavOrientation;
|
|
39
39
|
variant?: TabsNavVariant;
|
|
40
|
-
}):
|
|
40
|
+
}): React$1.JSX.Element;
|
|
41
41
|
declare function TabsNavList({
|
|
42
42
|
className,
|
|
43
43
|
...props
|
|
44
|
-
}: React.ComponentProps<"ul">):
|
|
44
|
+
}: React$1.ComponentProps<"ul">): React$1.JSX.Element;
|
|
45
45
|
declare function TabsNavTrigger({
|
|
46
46
|
className,
|
|
47
47
|
active,
|
|
48
48
|
asChild,
|
|
49
49
|
children,
|
|
50
50
|
...props
|
|
51
|
-
}: React.ComponentProps<"a"> & {
|
|
51
|
+
}: React$1.ComponentProps<"a"> & {
|
|
52
52
|
active?: boolean;
|
|
53
53
|
asChild?: boolean;
|
|
54
|
-
}):
|
|
54
|
+
}): React$1.JSX.Element;
|
|
55
55
|
//#endregion
|
|
56
56
|
export { Tabs, TabsContent, TabsList, TabsNav, TabsNavList, TabsNavTrigger, TabsTrigger, tabsListVariants, tabsTriggerVariants };
|
|
@@ -8,7 +8,7 @@ declare function Tag({
|
|
|
8
8
|
icon,
|
|
9
9
|
children,
|
|
10
10
|
...props
|
|
11
|
-
}: TagProps): import("react
|
|
11
|
+
}: TagProps): import("react").JSX.Element;
|
|
12
12
|
interface TagDismissibleProps extends React.ComponentProps<"span">, TagBaseProps {
|
|
13
13
|
onDismiss?: () => void;
|
|
14
14
|
}
|
|
@@ -18,7 +18,7 @@ declare function TagDismissible({
|
|
|
18
18
|
children,
|
|
19
19
|
onDismiss,
|
|
20
20
|
...props
|
|
21
|
-
}: TagDismissibleProps): import("react
|
|
21
|
+
}: TagDismissibleProps): import("react").JSX.Element;
|
|
22
22
|
interface TagCountProps extends React.ComponentProps<"span">, TagBaseProps {
|
|
23
23
|
count: number;
|
|
24
24
|
}
|
|
@@ -28,6 +28,6 @@ declare function TagCount({
|
|
|
28
28
|
children,
|
|
29
29
|
count,
|
|
30
30
|
...props
|
|
31
|
-
}: TagCountProps): import("react
|
|
31
|
+
}: TagCountProps): import("react").JSX.Element;
|
|
32
32
|
//#endregion
|
|
33
33
|
export { Tag, TagCount, TagDismissible };
|
|
@@ -20,6 +20,6 @@ declare function TaskProgress({
|
|
|
20
20
|
stepRevealDelayMs,
|
|
21
21
|
className,
|
|
22
22
|
...props
|
|
23
|
-
}: TaskProgressProps): import("react
|
|
23
|
+
}: TaskProgressProps): import("react").JSX.Element;
|
|
24
24
|
//#endregion
|
|
25
25
|
export { TaskProgress, type TaskProgressStatus, type TaskProgressStep };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import * as React$1 from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/textarea.d.ts
|
|
4
|
-
interface TextareaProps extends React.ComponentProps<"textarea"> {
|
|
4
|
+
interface TextareaProps extends React$1.ComponentProps<"textarea"> {
|
|
5
5
|
label?: string;
|
|
6
6
|
required?: boolean;
|
|
7
7
|
hint?: string;
|
|
@@ -17,6 +17,6 @@ declare function Textarea({
|
|
|
17
17
|
error,
|
|
18
18
|
tooltip,
|
|
19
19
|
...props
|
|
20
|
-
}: TextareaProps):
|
|
20
|
+
}: TextareaProps): React$1.JSX.Element;
|
|
21
21
|
//#endregion
|
|
22
22
|
export { Textarea, type TextareaProps };
|
|
@@ -4,10 +4,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
|
4
4
|
import { Label } from "./label.mjs";
|
|
5
5
|
import { Info } from "lucide-react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import * as React from "react";
|
|
7
|
+
import * as React$1 from "react";
|
|
8
8
|
//#region src/components/textarea.tsx
|
|
9
9
|
function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
|
|
10
|
-
const generatedId = React.useId();
|
|
10
|
+
const generatedId = React$1.useId();
|
|
11
11
|
const fieldId = id ?? generatedId;
|
|
12
12
|
const textarea = /* @__PURE__ */ jsx("textarea", {
|
|
13
13
|
id: fieldId,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from "class-variance-authority";
|
|
2
|
-
import * as React from "react";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
3
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
4
4
|
|
|
5
5
|
//#region src/components/toggle-group.d.ts
|
|
@@ -14,13 +14,13 @@ declare function ToggleGroup({
|
|
|
14
14
|
size,
|
|
15
15
|
children,
|
|
16
16
|
...props
|
|
17
|
-
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupContextValue):
|
|
17
|
+
}: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupContextValue): React$1.JSX.Element;
|
|
18
18
|
declare function ToggleGroupItem({
|
|
19
19
|
className,
|
|
20
20
|
children,
|
|
21
21
|
variant,
|
|
22
22
|
size,
|
|
23
23
|
...props
|
|
24
|
-
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>):
|
|
24
|
+
}: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>): React$1.JSX.Element;
|
|
25
25
|
//#endregion
|
|
26
26
|
export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import * as React from "react";
|
|
5
|
+
import * as React$1 from "react";
|
|
6
6
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
7
7
|
//#region src/components/toggle-group.tsx
|
|
8
8
|
const toggleGroupItemVariants = cva([
|
|
@@ -36,7 +36,7 @@ const toggleGroupItemVariants = cva([
|
|
|
36
36
|
size: "default"
|
|
37
37
|
}
|
|
38
38
|
});
|
|
39
|
-
const ToggleGroupContext = React.createContext({
|
|
39
|
+
const ToggleGroupContext = React$1.createContext({
|
|
40
40
|
size: "default",
|
|
41
41
|
variant: "default"
|
|
42
42
|
});
|
|
@@ -55,7 +55,7 @@ function ToggleGroup({ className, variant, size, children, ...props }) {
|
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
57
|
function ToggleGroupItem({ className, children, variant, size, ...props }) {
|
|
58
|
-
const context = React.useContext(ToggleGroupContext);
|
|
58
|
+
const context = React$1.useContext(ToggleGroupContext);
|
|
59
59
|
const resolvedVariant = context.variant ?? variant;
|
|
60
60
|
const resolvedSize = context.size ?? size;
|
|
61
61
|
return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import * as React$1 from "react";
|
|
2
2
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
3
|
|
|
4
4
|
//#region src/components/tooltip.d.ts
|
|
5
5
|
declare function TooltipProvider({
|
|
6
6
|
delayDuration,
|
|
7
7
|
...props
|
|
8
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Provider>):
|
|
8
|
+
}: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): React$1.JSX.Element;
|
|
9
9
|
declare function Tooltip({
|
|
10
10
|
...props
|
|
11
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Root>):
|
|
11
|
+
}: React$1.ComponentProps<typeof TooltipPrimitive.Root>): React$1.JSX.Element;
|
|
12
12
|
declare function TooltipTrigger({
|
|
13
13
|
...props
|
|
14
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>):
|
|
14
|
+
}: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): React$1.JSX.Element;
|
|
15
15
|
declare function TooltipContent({
|
|
16
16
|
className,
|
|
17
17
|
sideOffset,
|
|
18
18
|
children,
|
|
19
19
|
...props
|
|
20
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Content>):
|
|
20
|
+
}: React$1.ComponentProps<typeof TooltipPrimitive.Content>): React$1.JSX.Element;
|
|
21
21
|
//#endregion
|
|
22
22
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -7,27 +7,27 @@ declare function H1({
|
|
|
7
7
|
}: {
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
className?: string;
|
|
10
|
-
}): import("react
|
|
10
|
+
}): import("react").JSX.Element;
|
|
11
11
|
declare function H2({
|
|
12
12
|
children,
|
|
13
13
|
className
|
|
14
14
|
}: {
|
|
15
15
|
children: ReactNode;
|
|
16
16
|
className?: string;
|
|
17
|
-
}): import("react
|
|
17
|
+
}): import("react").JSX.Element;
|
|
18
18
|
declare function H3({
|
|
19
19
|
children,
|
|
20
20
|
className
|
|
21
21
|
}: {
|
|
22
22
|
children: ReactNode;
|
|
23
23
|
className?: string;
|
|
24
|
-
}): import("react
|
|
24
|
+
}): import("react").JSX.Element;
|
|
25
25
|
declare function H4({
|
|
26
26
|
children,
|
|
27
27
|
className
|
|
28
28
|
}: {
|
|
29
29
|
children: ReactNode;
|
|
30
30
|
className?: string;
|
|
31
|
-
}): import("react
|
|
31
|
+
}): import("react").JSX.Element;
|
|
32
32
|
//#endregion
|
|
33
33
|
export { H1, H2, H3, H4 };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import * as React$1 from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/wizard.d.ts
|
|
4
4
|
interface WizardStep {
|
|
@@ -18,8 +18,8 @@ declare function WizardSteps({
|
|
|
18
18
|
onSelect,
|
|
19
19
|
ariaLabel,
|
|
20
20
|
className
|
|
21
|
-
}: WizardStepsProps):
|
|
22
|
-
interface WizardProgressProps extends React.ComponentProps<"div"> {
|
|
21
|
+
}: WizardStepsProps): React$1.JSX.Element;
|
|
22
|
+
interface WizardProgressProps extends React$1.ComponentProps<"div"> {
|
|
23
23
|
current: number;
|
|
24
24
|
total: number;
|
|
25
25
|
}
|
|
@@ -28,6 +28,6 @@ declare function WizardProgress({
|
|
|
28
28
|
total,
|
|
29
29
|
className,
|
|
30
30
|
...props
|
|
31
|
-
}: WizardProgressProps):
|
|
31
|
+
}: WizardProgressProps): React$1.JSX.Element;
|
|
32
32
|
//#endregion
|
|
33
33
|
export { WizardProgress, type WizardStep, WizardSteps };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/hooks/use-chart-theme.d.ts
|
|
2
|
+
interface ChartTheme {
|
|
3
|
+
foreground: string;
|
|
4
|
+
mutedForeground: string;
|
|
5
|
+
axisForeground: string;
|
|
6
|
+
grid: string;
|
|
7
|
+
border: string;
|
|
8
|
+
card: string;
|
|
9
|
+
popover: string;
|
|
10
|
+
destructive: string;
|
|
11
|
+
warning: string;
|
|
12
|
+
success: string;
|
|
13
|
+
fontMono: string;
|
|
14
|
+
isDark: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare function useChartTheme(): ChartTheme;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { ChartTheme, useChartTheme };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
//#region src/hooks/use-chart-theme.ts
|
|
4
|
+
const TOKEN_MAP = {
|
|
5
|
+
foreground: "--color-foreground",
|
|
6
|
+
mutedForeground: "--color-muted-foreground",
|
|
7
|
+
axisForeground: "--color-quaternary-foreground",
|
|
8
|
+
grid: "--color-sidebar-border",
|
|
9
|
+
border: "--color-border",
|
|
10
|
+
card: "--color-card",
|
|
11
|
+
popover: "--color-popover",
|
|
12
|
+
destructive: "--color-destructive",
|
|
13
|
+
warning: "--color-warning",
|
|
14
|
+
success: "--color-success",
|
|
15
|
+
fontMono: "--font-mono"
|
|
16
|
+
};
|
|
17
|
+
const FALLBACK = {
|
|
18
|
+
foreground: "#121e1e",
|
|
19
|
+
mutedForeground: "#3a4848",
|
|
20
|
+
axisForeground: "#6f7f7f",
|
|
21
|
+
grid: "#e3eaea",
|
|
22
|
+
border: "#acb8b8",
|
|
23
|
+
card: "#f8fafa",
|
|
24
|
+
popover: "#ffffff",
|
|
25
|
+
destructive: "#d92d20",
|
|
26
|
+
warning: "#dc6803",
|
|
27
|
+
success: "#079455",
|
|
28
|
+
fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
29
|
+
isDark: false
|
|
30
|
+
};
|
|
31
|
+
const readTheme = () => {
|
|
32
|
+
if (typeof window === "undefined") return FALLBACK;
|
|
33
|
+
const styles = window.getComputedStyle(document.documentElement);
|
|
34
|
+
const entries = Object.entries(TOKEN_MAP).map(([key, token]) => {
|
|
35
|
+
return [key, styles.getPropertyValue(token).trim() || FALLBACK[key]];
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
...Object.fromEntries(entries),
|
|
39
|
+
isDark: document.documentElement.classList.contains("dark")
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
function useChartTheme() {
|
|
43
|
+
const [theme, setTheme] = React$1.useState(readTheme);
|
|
44
|
+
React$1.useEffect(() => {
|
|
45
|
+
const update = () => setTheme(readTheme());
|
|
46
|
+
update();
|
|
47
|
+
const observer = new MutationObserver(update);
|
|
48
|
+
observer.observe(document.documentElement, {
|
|
49
|
+
attributes: true,
|
|
50
|
+
attributeFilter: ["class"]
|
|
51
|
+
});
|
|
52
|
+
return () => observer.disconnect();
|
|
53
|
+
}, []);
|
|
54
|
+
return theme;
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
export { useChartTheme };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import * as React$1 from "react";
|
|
2
2
|
//#region src/hooks/use-mobile.ts
|
|
3
3
|
const MOBILE_BREAKPOINT = 768;
|
|
4
4
|
function useIsMobile() {
|
|
5
|
-
const [isMobile, setIsMobile] = React.useState(void 0);
|
|
6
|
-
React.useEffect(() => {
|
|
5
|
+
const [isMobile, setIsMobile] = React$1.useState(void 0);
|
|
6
|
+
React$1.useEffect(() => {
|
|
7
7
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
8
8
|
const onChange = () => setIsMobile(mql.matches);
|
|
9
9
|
mql.addEventListener("change", onChange);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
//#region src/hooks/use-reduced-motion.ts
|
|
4
|
+
function useReducedMotion() {
|
|
5
|
+
const [reduced, setReduced] = React$1.useState(false);
|
|
6
|
+
React$1.useEffect(() => {
|
|
7
|
+
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
8
|
+
const update = () => setReduced(query.matches);
|
|
9
|
+
update();
|
|
10
|
+
query.addEventListener("change", update);
|
|
11
|
+
return () => query.removeEventListener("change", update);
|
|
12
|
+
}, []);
|
|
13
|
+
return reduced;
|
|
14
|
+
}
|
|
15
|
+
//#endregion
|
|
16
|
+
export { useReducedMotion };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
const CHART_PALETTES = {
|
|
2
|
+
magenta: [
|
|
3
|
+
"#e90060",
|
|
4
|
+
"#ff7eb6",
|
|
5
|
+
"#9b5de5",
|
|
6
|
+
"#5b8def",
|
|
7
|
+
"#36c5f0",
|
|
8
|
+
"#6eece7",
|
|
9
|
+
"#d98a3d",
|
|
10
|
+
"#2bb6a3"
|
|
11
|
+
],
|
|
12
|
+
cyan: [
|
|
13
|
+
"#17b8cf",
|
|
14
|
+
"#41ddc9",
|
|
15
|
+
"#3f8ff0",
|
|
16
|
+
"#8b6cf0",
|
|
17
|
+
"#c46bf0",
|
|
18
|
+
"#ff7eb6",
|
|
19
|
+
"#e90060",
|
|
20
|
+
"#c98be0"
|
|
21
|
+
]
|
|
22
|
+
};
|
|
23
|
+
const heatRampMagenta = (empty) => [
|
|
24
|
+
empty,
|
|
25
|
+
"#5b0a31",
|
|
26
|
+
"#a3034a",
|
|
27
|
+
"#e90060",
|
|
28
|
+
"#ff7eb6"
|
|
29
|
+
];
|
|
30
|
+
const heatRampMint = (empty) => [
|
|
31
|
+
empty,
|
|
32
|
+
"#0c4a52",
|
|
33
|
+
"#17b8cf",
|
|
34
|
+
"#41ddc9",
|
|
35
|
+
"#6eece7"
|
|
36
|
+
];
|
|
37
|
+
const HEAT_EMPTY = {
|
|
38
|
+
light: "#eef3f3",
|
|
39
|
+
dark: "#102222"
|
|
40
|
+
};
|
|
41
|
+
const HEAT_RAMPS = {
|
|
42
|
+
magenta: heatRampMagenta,
|
|
43
|
+
cyan: heatRampMint
|
|
44
|
+
};
|
|
45
|
+
const heatRamp = (palette, empty) => HEAT_RAMPS[palette](empty);
|
|
46
|
+
const hexToRgb = (hex) => {
|
|
47
|
+
const value = Number.parseInt(hex.slice(1), 16);
|
|
48
|
+
return [
|
|
49
|
+
value >> 16 & 255,
|
|
50
|
+
value >> 8 & 255,
|
|
51
|
+
value & 255
|
|
52
|
+
];
|
|
53
|
+
};
|
|
54
|
+
const luminance = (hex) => {
|
|
55
|
+
const linear = hexToRgb(hex).map((channel) => {
|
|
56
|
+
const normalized = channel / 255;
|
|
57
|
+
return normalized <= .03928 ? normalized / 12.92 : ((normalized + .055) / 1.055) ** 2.4;
|
|
58
|
+
});
|
|
59
|
+
return .2126 * linear[0] + .7152 * linear[1] + .0722 * linear[2];
|
|
60
|
+
};
|
|
61
|
+
const paletteColor = (palette, index) => {
|
|
62
|
+
return palette[(index % palette.length + palette.length) % palette.length];
|
|
63
|
+
};
|
|
64
|
+
const RAMP_ENDS = {
|
|
65
|
+
magenta: ["#e90060", "#ff7eb6"],
|
|
66
|
+
cyan: ["#17b8cf", "#6eece7"]
|
|
67
|
+
};
|
|
68
|
+
const mixHex = (from, to, fraction) => {
|
|
69
|
+
const [fromR, fromG, fromB] = hexToRgb(from);
|
|
70
|
+
const [toR, toG, toB] = hexToRgb(to);
|
|
71
|
+
const ratio = Math.min(1, Math.max(0, fraction));
|
|
72
|
+
const channel = (start, end) => Math.round(start + (end - start) * ratio);
|
|
73
|
+
return `#${[
|
|
74
|
+
channel(fromR, toR),
|
|
75
|
+
channel(fromG, toG),
|
|
76
|
+
channel(fromB, toB)
|
|
77
|
+
].map((value) => value.toString(16).padStart(2, "0")).join("")}`;
|
|
78
|
+
};
|
|
79
|
+
const rampColor = (palette, fraction) => {
|
|
80
|
+
const [from, to] = RAMP_ENDS[palette];
|
|
81
|
+
return mixHex(from, to, fraction);
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
|
|
85
|
+
* so a normalized 0..1 value reads as a smooth single-hue gradient rather than
|
|
86
|
+
* the five discrete bands.
|
|
87
|
+
*/
|
|
88
|
+
const heatColor = (stops, fraction) => {
|
|
89
|
+
const clamped = Math.min(1, Math.max(0, fraction));
|
|
90
|
+
const segment = (stops.length - 1) * clamped;
|
|
91
|
+
const lowerIndex = Math.min(stops.length - 2, Math.floor(segment));
|
|
92
|
+
return mixHex(stops[lowerIndex], stops[lowerIndex + 1], segment - lowerIndex);
|
|
93
|
+
};
|
|
94
|
+
//#endregion
|
|
95
|
+
export { CHART_PALETTES, HEAT_EMPTY, heatColor, heatRamp, luminance, paletteColor, rampColor };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
//#region src/lib/chart.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Declarative description of one plotted series. The same shape drives area,
|
|
4
|
+
* line and bar charts — what differs is how each chart renders it.
|
|
5
|
+
*/
|
|
6
|
+
interface ChartSeries {
|
|
7
|
+
key: string;
|
|
8
|
+
name?: string;
|
|
9
|
+
color?: string;
|
|
10
|
+
semantic?: "error" | "warning" | "success";
|
|
11
|
+
dashed?: boolean;
|
|
12
|
+
}
|
|
13
|
+
//#endregion
|
|
14
|
+
export { ChartSeries };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { luminance, paletteColor } from "./chart-palette.mjs";
|
|
2
|
+
//#region src/lib/chart.ts
|
|
3
|
+
const formatShare = (fraction) => `${(fraction * 100).toFixed(fraction >= .1 ? 0 : 1)}%`;
|
|
4
|
+
const semanticColor = (theme, semantic) => {
|
|
5
|
+
if (semantic === "error") return theme.destructive;
|
|
6
|
+
if (semantic === "warning") return theme.warning;
|
|
7
|
+
return theme.success;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Resolve each series to a concrete color and name. Color precedence:
|
|
11
|
+
* explicit `color` → `semantic` token → palette slot by declared index (so the
|
|
12
|
+
* lead series keeps the lead color even after the bands are reordered).
|
|
13
|
+
*/
|
|
14
|
+
const resolveSeries = (series, palette, theme) => series.map((entry, index) => ({
|
|
15
|
+
...entry,
|
|
16
|
+
name: entry.name ?? entry.key,
|
|
17
|
+
color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index))
|
|
18
|
+
}));
|
|
19
|
+
/**
|
|
20
|
+
* Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
|
|
21
|
+
* lightest at the top edge. Sorting by luminance enforces that for any palette
|
|
22
|
+
* (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
|
|
23
|
+
* stack order in Recharts — first entry sits at the bottom.
|
|
24
|
+
*/
|
|
25
|
+
const orderByLuminance = (series) => [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
|
|
26
|
+
//#endregion
|
|
27
|
+
export { formatShare, orderByLuminance, resolveSeries };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alpic-ai/ui",
|
|
3
|
-
"version": "0.0.0-dev.
|
|
3
|
+
"version": "0.0.0-dev.g380fab7",
|
|
4
4
|
"description": "Alpic design system — shared UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -23,48 +23,49 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"lucide-react": "^1.
|
|
27
|
-
"react": "^19.2.
|
|
28
|
-
"react-dom": "^19.2.
|
|
29
|
-
"react-hook-form": "^7.
|
|
26
|
+
"lucide-react": "^1.18.0",
|
|
27
|
+
"react": "^19.2.7",
|
|
28
|
+
"react-dom": "^19.2.7",
|
|
29
|
+
"react-hook-form": "^7.79.0",
|
|
30
30
|
"sonner": "^2.0.7",
|
|
31
|
-
"tailwindcss": "^4.3.
|
|
31
|
+
"tailwindcss": "^4.3.1",
|
|
32
32
|
"tw-animate-css": "^1.4.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@radix-ui/react-accordion": "^1.2.
|
|
36
|
-
"@radix-ui/react-avatar": "^1.1.
|
|
37
|
-
"@radix-ui/react-checkbox": "^1.3.
|
|
38
|
-
"@radix-ui/react-collapsible": "^1.1.
|
|
39
|
-
"@radix-ui/react-dialog": "^1.1.
|
|
40
|
-
"@radix-ui/react-dropdown-menu": "^2.1.
|
|
41
|
-
"@radix-ui/react-label": "^2.1.
|
|
42
|
-
"@radix-ui/react-popover": "^1.1.
|
|
43
|
-
"@radix-ui/react-radio-group": "^1.
|
|
44
|
-
"@radix-ui/react-scroll-area": "^1.2.
|
|
45
|
-
"@radix-ui/react-select": "^2.
|
|
46
|
-
"@radix-ui/react-separator": "^1.1.
|
|
47
|
-
"@radix-ui/react-slot": "^1.2.
|
|
48
|
-
"@radix-ui/react-switch": "^1.
|
|
49
|
-
"@radix-ui/react-tabs": "^1.1.
|
|
50
|
-
"@radix-ui/react-toggle-group": "^1.1.
|
|
51
|
-
"@radix-ui/react-tooltip": "^1.2.
|
|
35
|
+
"@radix-ui/react-accordion": "^1.2.13",
|
|
36
|
+
"@radix-ui/react-avatar": "^1.1.12",
|
|
37
|
+
"@radix-ui/react-checkbox": "^1.3.4",
|
|
38
|
+
"@radix-ui/react-collapsible": "^1.1.13",
|
|
39
|
+
"@radix-ui/react-dialog": "^1.1.16",
|
|
40
|
+
"@radix-ui/react-dropdown-menu": "^2.1.17",
|
|
41
|
+
"@radix-ui/react-label": "^2.1.9",
|
|
42
|
+
"@radix-ui/react-popover": "^1.1.16",
|
|
43
|
+
"@radix-ui/react-radio-group": "^1.4.0",
|
|
44
|
+
"@radix-ui/react-scroll-area": "^1.2.11",
|
|
45
|
+
"@radix-ui/react-select": "^2.3.0",
|
|
46
|
+
"@radix-ui/react-separator": "^1.1.9",
|
|
47
|
+
"@radix-ui/react-slot": "^1.2.5",
|
|
48
|
+
"@radix-ui/react-switch": "^1.3.0",
|
|
49
|
+
"@radix-ui/react-tabs": "^1.1.14",
|
|
50
|
+
"@radix-ui/react-toggle-group": "^1.1.12",
|
|
51
|
+
"@radix-ui/react-tooltip": "^1.2.9",
|
|
52
52
|
"class-variance-authority": "^0.7.1",
|
|
53
53
|
"clsx": "^2.1.1",
|
|
54
54
|
"cmdk": "^1.1.1",
|
|
55
|
+
"recharts": "^3.8.1",
|
|
55
56
|
"tailwind-merge": "^3.6.0"
|
|
56
57
|
},
|
|
57
58
|
"devDependencies": {
|
|
58
59
|
"@ladle/react": "^5.1.1",
|
|
59
|
-
"@tailwindcss/postcss": "^4.3.
|
|
60
|
-
"@types/react": "19.2.
|
|
60
|
+
"@tailwindcss/postcss": "^4.3.1",
|
|
61
|
+
"@types/react": "19.2.17",
|
|
61
62
|
"@types/react-dom": "19.2.3",
|
|
62
|
-
"lucide-react": "^1.
|
|
63
|
-
"react-hook-form": "^7.
|
|
63
|
+
"lucide-react": "^1.18.0",
|
|
64
|
+
"react-hook-form": "^7.79.0",
|
|
64
65
|
"shx": "^0.4.0",
|
|
65
66
|
"sonner": "^2.0.7",
|
|
66
|
-
"tailwindcss": "^4.3.
|
|
67
|
-
"tsdown": "^0.22.
|
|
67
|
+
"tailwindcss": "^4.3.1",
|
|
68
|
+
"tsdown": "^0.22.2",
|
|
68
69
|
"tw-animate-css": "^1.4.0",
|
|
69
70
|
"typescript": "^6.0.3"
|
|
70
71
|
},
|