@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.
Files changed (109) hide show
  1. package/dist/components/accordion-card.d.mts +5 -5
  2. package/dist/components/accordion.d.mts +5 -5
  3. package/dist/components/alert.d.mts +8 -8
  4. package/dist/components/area-chart.d.mts +62 -0
  5. package/dist/components/area-chart.mjs +269 -0
  6. package/dist/components/attachment-tile.d.mts +1 -1
  7. package/dist/components/avatar.d.mts +7 -7
  8. package/dist/components/badge.d.mts +1 -1
  9. package/dist/components/bar-chart.d.mts +48 -0
  10. package/dist/components/bar-chart.mjs +245 -0
  11. package/dist/components/bar-list.d.mts +28 -0
  12. package/dist/components/bar-list.mjs +98 -0
  13. package/dist/components/breadcrumb.d.mts +10 -10
  14. package/dist/components/button.d.mts +5 -5
  15. package/dist/components/card.d.mts +9 -9
  16. package/dist/components/chart-card.d.mts +25 -0
  17. package/dist/components/chart-card.mjs +48 -0
  18. package/dist/components/chart-container.d.mts +20 -0
  19. package/dist/components/chart-container.mjs +37 -0
  20. package/dist/components/chart-legend.d.mts +16 -0
  21. package/dist/components/chart-legend.mjs +26 -0
  22. package/dist/components/chart-tooltip.d.mts +33 -0
  23. package/dist/components/chart-tooltip.mjs +52 -0
  24. package/dist/components/checkbox.d.mts +2 -2
  25. package/dist/components/collapsible.d.mts +4 -4
  26. package/dist/components/combobox.d.mts +10 -10
  27. package/dist/components/command.d.mts +9 -9
  28. package/dist/components/copyable.d.mts +2 -2
  29. package/dist/components/description-list.d.mts +5 -5
  30. package/dist/components/dialog.d.mts +13 -13
  31. package/dist/components/donut-chart.d.mts +46 -0
  32. package/dist/components/donut-chart.mjs +185 -0
  33. package/dist/components/dropdown-menu.d.mts +17 -17
  34. package/dist/components/form.d.mts +18 -18
  35. package/dist/components/form.mjs +6 -6
  36. package/dist/components/github-button.d.mts +1 -1
  37. package/dist/components/grid-fx.d.mts +13 -0
  38. package/dist/components/grid-fx.mjs +188 -0
  39. package/dist/components/heatmap-chart.d.mts +40 -0
  40. package/dist/components/heatmap-chart.mjs +198 -0
  41. package/dist/components/input-group.d.mts +4 -4
  42. package/dist/components/input.d.mts +4 -4
  43. package/dist/components/input.mjs +2 -2
  44. package/dist/components/label.d.mts +2 -2
  45. package/dist/components/line-chart.d.mts +55 -0
  46. package/dist/components/line-chart.mjs +211 -0
  47. package/dist/components/page-loader.d.mts +1 -1
  48. package/dist/components/pagination.d.mts +3 -3
  49. package/dist/components/popover.d.mts +5 -5
  50. package/dist/components/radio-group.d.mts +3 -3
  51. package/dist/components/scroll-area.d.mts +3 -3
  52. package/dist/components/select.d.mts +9 -9
  53. package/dist/components/separator.d.mts +2 -2
  54. package/dist/components/sheet.d.mts +11 -11
  55. package/dist/components/shimmer-text.d.mts +3 -1
  56. package/dist/components/sidebar.d.mts +33 -33
  57. package/dist/components/sidebar.mjs +10 -10
  58. package/dist/components/skeleton.d.mts +1 -1
  59. package/dist/components/sonner.d.mts +5 -5
  60. package/dist/components/spinner.d.mts +2 -2
  61. package/dist/components/stat.d.mts +30 -0
  62. package/dist/components/stat.mjs +107 -0
  63. package/dist/components/status-dot.d.mts +1 -1
  64. package/dist/components/switch.d.mts +2 -2
  65. package/dist/components/table.d.mts +10 -10
  66. package/dist/components/tabs.d.mts +10 -10
  67. package/dist/components/tag.d.mts +3 -3
  68. package/dist/components/task-progress.d.mts +1 -1
  69. package/dist/components/textarea.d.mts +3 -3
  70. package/dist/components/textarea.mjs +2 -2
  71. package/dist/components/toggle-group.d.mts +3 -3
  72. package/dist/components/toggle-group.mjs +3 -3
  73. package/dist/components/tooltip.d.mts +5 -5
  74. package/dist/components/typography.d.mts +4 -4
  75. package/dist/components/wizard.d.mts +4 -4
  76. package/dist/hooks/use-chart-theme.d.mts +18 -0
  77. package/dist/hooks/use-chart-theme.mjs +57 -0
  78. package/dist/hooks/use-mobile.mjs +3 -3
  79. package/dist/hooks/use-reduced-motion.d.mts +4 -0
  80. package/dist/hooks/use-reduced-motion.mjs +16 -0
  81. package/dist/lib/chart-palette.d.mts +4 -0
  82. package/dist/lib/chart-palette.mjs +95 -0
  83. package/dist/lib/chart.d.mts +14 -0
  84. package/dist/lib/chart.mjs +27 -0
  85. package/package.json +30 -29
  86. package/src/components/area-chart.tsx +339 -0
  87. package/src/components/bar-chart.tsx +300 -0
  88. package/src/components/bar-list.tsx +150 -0
  89. package/src/components/chart-card.tsx +63 -0
  90. package/src/components/chart-container.tsx +49 -0
  91. package/src/components/chart-legend.tsx +41 -0
  92. package/src/components/chart-tooltip.tsx +93 -0
  93. package/src/components/donut-chart.tsx +217 -0
  94. package/src/components/grid-fx.tsx +238 -0
  95. package/src/components/heatmap-chart.tsx +287 -0
  96. package/src/components/line-chart.tsx +264 -0
  97. package/src/components/stat.tsx +109 -0
  98. package/src/hooks/use-chart-theme.ts +75 -0
  99. package/src/hooks/use-reduced-motion.ts +17 -0
  100. package/src/lib/chart-palette.ts +110 -0
  101. package/src/lib/chart.ts +56 -0
  102. package/src/stories/area-chart.stories.tsx +200 -0
  103. package/src/stories/bar-chart.stories.tsx +169 -0
  104. package/src/stories/bar-list.stories.tsx +85 -0
  105. package/src/stories/donut-chart.stories.tsx +112 -0
  106. package/src/stories/heatmap-chart.stories.tsx +107 -0
  107. package/src/stories/line-chart.stories.tsx +146 -0
  108. package/src/stories/stat.stories.tsx +64 -0
  109. 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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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
- }): import("react/jsx-runtime").JSX.Element;
40
+ }): React$1.JSX.Element;
41
41
  declare function TabsNavList({
42
42
  className,
43
43
  ...props
44
- }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
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
- }): import("react/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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): import("react/jsx-runtime").JSX.Element;
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): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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>): import("react/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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/jsx-runtime").JSX.Element;
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): import("react/jsx-runtime").JSX.Element;
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): import("react/jsx-runtime").JSX.Element;
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,4 @@
1
+ //#region src/hooks/use-reduced-motion.d.ts
2
+ declare function useReducedMotion(): boolean;
3
+ //#endregion
4
+ export { useReducedMotion };
@@ -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,4 @@
1
+ //#region src/lib/chart-palette.d.ts
2
+ type ChartPaletteName = "magenta" | "cyan";
3
+ //#endregion
4
+ export { ChartPaletteName };
@@ -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.g37dab1d",
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.17.0",
27
- "react": "^19.2.6",
28
- "react-dom": "^19.2.6",
29
- "react-hook-form": "^7.77.0",
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.0",
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.12",
36
- "@radix-ui/react-avatar": "^1.1.11",
37
- "@radix-ui/react-checkbox": "^1.3.3",
38
- "@radix-ui/react-collapsible": "^1.1.12",
39
- "@radix-ui/react-dialog": "^1.1.15",
40
- "@radix-ui/react-dropdown-menu": "^2.1.16",
41
- "@radix-ui/react-label": "^2.1.8",
42
- "@radix-ui/react-popover": "^1.1.15",
43
- "@radix-ui/react-radio-group": "^1.3.8",
44
- "@radix-ui/react-scroll-area": "^1.2.10",
45
- "@radix-ui/react-select": "^2.2.6",
46
- "@radix-ui/react-separator": "^1.1.8",
47
- "@radix-ui/react-slot": "^1.2.4",
48
- "@radix-ui/react-switch": "^1.2.6",
49
- "@radix-ui/react-tabs": "^1.1.13",
50
- "@radix-ui/react-toggle-group": "^1.1.11",
51
- "@radix-ui/react-tooltip": "^1.2.8",
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.0",
60
- "@types/react": "19.2.15",
60
+ "@tailwindcss/postcss": "^4.3.1",
61
+ "@types/react": "19.2.17",
61
62
  "@types/react-dom": "19.2.3",
62
- "lucide-react": "^1.17.0",
63
- "react-hook-form": "^7.77.0",
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.0",
67
- "tsdown": "^0.22.1",
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
  },