@alpic-ai/ui 0.0.0-dev.a762e36 → 0.0.0-dev.a7cd1c2
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 +1 -1
- package/dist/components/accordion.d.mts +1 -1
- package/dist/components/alert.d.mts +2 -2
- package/dist/components/attachment-tile.mjs +1 -1
- package/dist/components/avatar.d.mts +2 -2
- package/dist/components/badge.d.mts +1 -1
- package/dist/components/breadcrumb.d.mts +1 -1
- package/dist/components/button.d.mts +2 -2
- package/dist/components/card.d.mts +1 -1
- package/dist/components/checkbox.d.mts +1 -1
- package/dist/components/collapsible.d.mts +1 -1
- package/dist/components/combobox.d.mts +1 -1
- package/dist/components/combobox.mjs +1 -1
- package/dist/components/command.d.mts +1 -1
- package/dist/components/copyable.d.mts +1 -1
- package/dist/components/copyable.mjs +1 -1
- package/dist/components/description-list.d.mts +1 -1
- package/dist/components/dialog.d.mts +1 -1
- package/dist/components/dropdown-menu.d.mts +2 -2
- package/dist/components/form.d.mts +1 -1
- package/dist/components/form.mjs +1 -1
- package/dist/components/github-button.d.mts +1 -1
- package/dist/components/input-group.d.mts +1 -1
- package/dist/components/input.d.mts +1 -1
- package/dist/components/input.mjs +1 -1
- package/dist/components/label.d.mts +1 -1
- package/dist/components/page-loader.d.mts +11 -0
- package/dist/components/page-loader.mjs +122 -0
- package/dist/components/pagination.d.mts +1 -1
- package/dist/components/popover.d.mts +1 -1
- package/dist/components/radio-group.d.mts +1 -1
- package/dist/components/scroll-area.d.mts +1 -1
- package/dist/components/select.d.mts +1 -1
- package/dist/components/separator.d.mts +1 -1
- package/dist/components/sheet.d.mts +1 -1
- package/dist/components/shimmer-text.d.mts +12 -0
- package/dist/components/shimmer-text.mjs +22 -0
- package/dist/components/sidebar.d.mts +1 -1
- package/dist/components/sidebar.mjs +2 -2
- package/dist/components/sonner.d.mts +1 -1
- package/dist/components/spinner.d.mts +1 -1
- package/dist/components/status-dot.d.mts +1 -1
- package/dist/components/switch.d.mts +1 -1
- package/dist/components/table.d.mts +11 -2
- package/dist/components/table.mjs +2 -2
- package/dist/components/tabs.d.mts +1 -1
- package/dist/components/tabs.mjs +1 -1
- package/dist/components/textarea.d.mts +1 -1
- package/dist/components/textarea.mjs +1 -1
- package/dist/components/toggle-group.d.mts +1 -1
- package/dist/components/toggle-group.mjs +1 -1
- package/dist/components/tooltip-icon-button.mjs +1 -1
- package/dist/components/tooltip.d.mts +1 -1
- package/dist/components/typography.d.mts +1 -1
- package/package.json +6 -6
- package/src/components/combobox.tsx +18 -6
- package/src/components/page-loader.tsx +59 -0
- package/src/components/shimmer-text.tsx +23 -0
- package/src/components/table.tsx +16 -2
- package/src/hooks/use-copy-to-clipboard.ts +6 -2
- package/src/stories/table.stories.tsx +2 -2
- package/src/styles/tokens.css +20 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/accordion-card.d.ts
|
|
6
6
|
declare function AccordionCard({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/accordion.d.ts
|
|
6
6
|
declare function Accordion({
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
5
|
|
|
6
6
|
//#region src/components/alert.d.ts
|
|
7
7
|
declare const alertVariants: (props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
|
|
9
9
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
10
|
interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
|
|
11
11
|
declare function Alert({
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { TooltipIconButton } from "./tooltip-icon-button.mjs";
|
|
4
|
+
import { useState } from "react";
|
|
4
5
|
import { FileText, XIcon } from "lucide-react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { useState } from "react";
|
|
7
7
|
//#region src/components/attachment-tile.tsx
|
|
8
8
|
function AttachmentTile({ src, isImage, label, onRemove, onClick, className }) {
|
|
9
9
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
5
5
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
|
7
7
|
//#region src/components/avatar.d.ts
|
|
8
8
|
declare const avatarVariants: (props?: ({
|
|
9
|
-
size?: "
|
|
9
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
10
10
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
11
|
type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
|
|
12
12
|
type AvatarStatus = "online";
|
|
@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/badge.d.ts
|
|
6
6
|
declare const badgeVariants: (props?: ({
|
|
7
|
-
variant?: "
|
|
7
|
+
variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
|
|
8
8
|
size?: "sm" | "md" | null | undefined;
|
|
9
9
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
10
|
interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
5
|
|
|
6
6
|
//#region src/components/button.d.ts
|
|
7
7
|
declare const buttonVariants: (props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
|
|
9
9
|
size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
|
|
10
10
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
11
|
interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
4
4
|
|
|
5
5
|
//#region src/components/collapsible.d.ts
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PopoverContent } from "./popover.mjs";
|
|
2
2
|
import { selectTriggerVariants } from "./select-trigger-variants.mjs";
|
|
3
|
+
import { ReactNode } from "react";
|
|
3
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
5
|
import { VariantProps } from "class-variance-authority";
|
|
5
|
-
import { ReactNode } from "react";
|
|
6
6
|
import { Command } from "cmdk";
|
|
7
7
|
|
|
8
8
|
//#region src/components/combobox.d.ts
|
|
@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.mjs";
|
|
|
3
3
|
import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
|
|
4
4
|
import { selectTriggerVariants } from "./select-trigger-variants.mjs";
|
|
5
5
|
import { TagDismissible } from "./tag.mjs";
|
|
6
|
+
import { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
6
7
|
import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
|
|
7
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
9
9
|
import { Command } from "cmdk";
|
|
10
10
|
//#region src/components/combobox.tsx
|
|
11
11
|
const ComboboxContext = createContext(null);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
|
|
2
3
|
import { cn } from "../lib/cn.mjs";
|
|
3
4
|
import { Button } from "./button.mjs";
|
|
4
|
-
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
|
|
5
5
|
import { Check, Copy } from "lucide-react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/copyable.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonProps } from "./button.mjs";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
4
|
import { VariantProps } from "class-variance-authority";
|
|
4
|
-
import * as React from "react";
|
|
5
5
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
6
6
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
7
7
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
5
5
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
|
@@ -23,7 +23,7 @@ declare function DropdownMenuGroup({
|
|
|
23
23
|
...props
|
|
24
24
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): _$react_jsx_runtime0.JSX.Element;
|
|
25
25
|
declare const dropdownMenuItemVariants: (props?: ({
|
|
26
|
-
variant?: "
|
|
26
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
27
27
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
28
28
|
declare function DropdownMenuItem({
|
|
29
29
|
className,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { InputProps } from "./input.mjs";
|
|
2
2
|
import { Label } from "./label.mjs";
|
|
3
3
|
import { TextareaProps } from "./textarea.mjs";
|
|
4
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
4
|
import * as React from "react";
|
|
5
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
7
7
|
import * as _$react_hook_form0 from "react-hook-form";
|
|
8
8
|
import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
|
package/dist/components/form.mjs
CHANGED
|
@@ -5,9 +5,9 @@ import { Label } from "./label.mjs";
|
|
|
5
5
|
import { Input } from "./input.mjs";
|
|
6
6
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
|
|
7
7
|
import { Textarea } from "./textarea.mjs";
|
|
8
|
+
import * as React from "react";
|
|
8
9
|
import { Info } from "lucide-react";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import * as React from "react";
|
|
11
11
|
import { Slot } from "@radix-ui/react-slot";
|
|
12
12
|
import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
|
|
13
13
|
//#region src/components/form.tsx
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Button } from "./button.mjs";
|
|
2
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
2
|
import { ComponentProps } from "react";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/github-button.d.ts
|
|
6
6
|
type GitHubButtonProps = Omit<ComponentProps<typeof Button>, "variant" | "icon">;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
5
|
|
|
6
6
|
//#region src/components/input-group.d.ts
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/input.d.ts
|
|
5
5
|
interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
4
4
|
import { Label } from "./label.mjs";
|
|
5
|
+
import * as React from "react";
|
|
5
6
|
import { Info } from "lucide-react";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import * as React from "react";
|
|
8
8
|
//#region src/components/input.tsx
|
|
9
9
|
const inputSizeStyles = {
|
|
10
10
|
sm: {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/page-loader.d.ts
|
|
4
|
+
interface PageLoaderProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare function PageLoader({
|
|
8
|
+
className
|
|
9
|
+
}: PageLoaderProps): _$react_jsx_runtime0.JSX.Element;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { PageLoader, type PageLoaderProps };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/page-loader.tsx
|
|
5
|
+
const CABLE_CAR_SVG = /* @__PURE__ */ jsxs("svg", {
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 120 130",
|
|
8
|
+
width: "240",
|
|
9
|
+
height: "260",
|
|
10
|
+
"aria-hidden": "true",
|
|
11
|
+
className: "block h-auto w-full",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ jsx("line", {
|
|
14
|
+
x1: "60",
|
|
15
|
+
y1: "3",
|
|
16
|
+
x2: "60",
|
|
17
|
+
y2: "58",
|
|
18
|
+
stroke: "#333",
|
|
19
|
+
strokeWidth: "4"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ jsx("circle", {
|
|
22
|
+
cx: "60",
|
|
23
|
+
cy: "11",
|
|
24
|
+
r: "10",
|
|
25
|
+
fill: "#555"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ jsx("rect", {
|
|
28
|
+
x: "5",
|
|
29
|
+
y: "58",
|
|
30
|
+
width: "110",
|
|
31
|
+
height: "64",
|
|
32
|
+
rx: "4",
|
|
33
|
+
fill: "#e90060"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx("rect", {
|
|
36
|
+
x: "5",
|
|
37
|
+
y: "58",
|
|
38
|
+
width: "110",
|
|
39
|
+
height: "20",
|
|
40
|
+
rx: "4",
|
|
41
|
+
fill: "#F5F0E8"
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsx("rect", {
|
|
44
|
+
x: "5",
|
|
45
|
+
y: "68",
|
|
46
|
+
width: "110",
|
|
47
|
+
height: "10",
|
|
48
|
+
fill: "#F5F0E8"
|
|
49
|
+
}),
|
|
50
|
+
/* @__PURE__ */ jsx("rect", {
|
|
51
|
+
x: "14",
|
|
52
|
+
y: "66",
|
|
53
|
+
width: "26",
|
|
54
|
+
height: "30",
|
|
55
|
+
rx: "2",
|
|
56
|
+
fill: "#5B8EC9",
|
|
57
|
+
stroke: "#C4B9A8",
|
|
58
|
+
strokeWidth: "1.5"
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsx("rect", {
|
|
61
|
+
x: "47",
|
|
62
|
+
y: "66",
|
|
63
|
+
width: "26",
|
|
64
|
+
height: "30",
|
|
65
|
+
rx: "2",
|
|
66
|
+
fill: "#5B8EC9",
|
|
67
|
+
stroke: "#C4B9A8",
|
|
68
|
+
strokeWidth: "1.5"
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ jsx("rect", {
|
|
71
|
+
x: "80",
|
|
72
|
+
y: "66",
|
|
73
|
+
width: "26",
|
|
74
|
+
height: "30",
|
|
75
|
+
rx: "2",
|
|
76
|
+
fill: "#5B8EC9",
|
|
77
|
+
stroke: "#C4B9A8",
|
|
78
|
+
strokeWidth: "1.5"
|
|
79
|
+
}),
|
|
80
|
+
/* @__PURE__ */ jsx("rect", {
|
|
81
|
+
x: "5",
|
|
82
|
+
y: "115",
|
|
83
|
+
width: "110",
|
|
84
|
+
height: "7",
|
|
85
|
+
rx: "3",
|
|
86
|
+
fill: "#9f0042"
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
function PageLoader({ className }) {
|
|
91
|
+
return /* @__PURE__ */ jsx("div", {
|
|
92
|
+
className: cn("flex min-h-screen items-center justify-center bg-background", className),
|
|
93
|
+
role: "status",
|
|
94
|
+
"aria-label": "Loading Alpic…",
|
|
95
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
96
|
+
className: "relative h-[120px] w-[200px]",
|
|
97
|
+
children: [
|
|
98
|
+
/* @__PURE__ */ jsx("div", {
|
|
99
|
+
className: "absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]",
|
|
100
|
+
style: {
|
|
101
|
+
transform: "rotate(-15deg)",
|
|
102
|
+
transformOrigin: "left center"
|
|
103
|
+
}
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: "absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]",
|
|
107
|
+
children: CABLE_CAR_SVG
|
|
108
|
+
}),
|
|
109
|
+
/* @__PURE__ */ jsx("div", {
|
|
110
|
+
className: "pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]",
|
|
111
|
+
style: { background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx("div", {
|
|
114
|
+
className: "pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]",
|
|
115
|
+
style: { background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { PageLoader };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { selectTriggerVariants } from "./select-trigger-variants.mjs";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
4
|
import { VariantProps } from "class-variance-authority";
|
|
4
|
-
import * as React from "react";
|
|
5
5
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
6
6
|
|
|
7
7
|
//#region src/components/select.d.ts
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/shimmer-text.d.ts
|
|
4
|
+
declare function ShimmerText({
|
|
5
|
+
children,
|
|
6
|
+
className
|
|
7
|
+
}: {
|
|
8
|
+
children: string | number;
|
|
9
|
+
className?: string;
|
|
10
|
+
}): _$react_jsx_runtime0.JSX.Element;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ShimmerText };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/shimmer-text.tsx
|
|
5
|
+
const shimmerStyle = {
|
|
6
|
+
background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
|
|
7
|
+
backgroundSize: "250% 100%, auto",
|
|
8
|
+
backgroundRepeat: "no-repeat, padding-box",
|
|
9
|
+
WebkitBackgroundClip: "text",
|
|
10
|
+
WebkitTextFillColor: "transparent",
|
|
11
|
+
backgroundClip: "text",
|
|
12
|
+
animation: "shimmer-text 2.5s linear infinite"
|
|
13
|
+
};
|
|
14
|
+
function ShimmerText({ children, className }) {
|
|
15
|
+
return /* @__PURE__ */ jsx("span", {
|
|
16
|
+
className: cn(className),
|
|
17
|
+
style: shimmerStyle,
|
|
18
|
+
children
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { ShimmerText };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Button } from "./button.mjs";
|
|
2
2
|
import { TooltipContent } from "./tooltip.mjs";
|
|
3
|
+
import * as React from "react";
|
|
3
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
5
|
import { VariantProps } from "class-variance-authority";
|
|
5
|
-
import * as React from "react";
|
|
6
6
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
7
7
|
|
|
8
8
|
//#region src/components/sidebar.d.ts
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useIsMobile } from "../hooks/use-mobile.mjs";
|
|
2
3
|
import { cn } from "../lib/cn.mjs";
|
|
3
4
|
import { Button } from "./button.mjs";
|
|
4
5
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
5
6
|
import { Separator } from "./separator.mjs";
|
|
6
7
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
|
|
7
|
-
import { useIsMobile } from "../hooks/use-mobile.mjs";
|
|
8
8
|
import { Skeleton } from "./skeleton.mjs";
|
|
9
|
+
import * as React from "react";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import { cva } from "class-variance-authority";
|
|
11
|
-
import * as React from "react";
|
|
12
12
|
import { Slot } from "@radix-ui/react-slot";
|
|
13
13
|
//#region src/components/sidebar.tsx
|
|
14
14
|
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/spinner.d.ts
|
|
6
6
|
declare const spinnerVariants: (props?: ({
|
|
7
|
-
variant?: "
|
|
7
|
+
variant?: "secondary" | "primary" | null | undefined;
|
|
8
8
|
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
9
9
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
10
|
interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}
|
|
@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/status-dot.d.ts
|
|
6
6
|
declare const statusDotVariants: (props?: ({
|
|
7
|
-
variant?: "destructive" | "
|
|
7
|
+
variant?: "destructive" | "warning" | "success" | "muted" | null | undefined;
|
|
8
8
|
pulse?: boolean | null | undefined;
|
|
9
9
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
10
|
interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/table.d.ts
|
|
5
5
|
declare function Table({
|
|
@@ -26,10 +26,19 @@ declare function TableHead({
|
|
|
26
26
|
className,
|
|
27
27
|
...props
|
|
28
28
|
}: React.ComponentProps<"th">): _$react_jsx_runtime0.JSX.Element;
|
|
29
|
+
interface TableCellProps extends React.ComponentProps<"td"> {
|
|
30
|
+
/**
|
|
31
|
+
* When true, the cell renders edge-to-edge so the child can act as the
|
|
32
|
+
* interactive surface (e.g. a button or popover trigger filling the cell).
|
|
33
|
+
* Defaults to false (standard padded cell).
|
|
34
|
+
*/
|
|
35
|
+
interactive?: boolean;
|
|
36
|
+
}
|
|
29
37
|
declare function TableCell({
|
|
30
38
|
className,
|
|
39
|
+
interactive,
|
|
31
40
|
...props
|
|
32
|
-
}:
|
|
41
|
+
}: TableCellProps): _$react_jsx_runtime0.JSX.Element;
|
|
33
42
|
declare function TableCaption({
|
|
34
43
|
className,
|
|
35
44
|
...props
|
|
@@ -47,10 +47,10 @@ function TableHead({ className, ...props }) {
|
|
|
47
47
|
...props
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
function TableCell({ className, ...props }) {
|
|
50
|
+
function TableCell({ className, interactive = false, ...props }) {
|
|
51
51
|
return /* @__PURE__ */ jsx("td", {
|
|
52
52
|
"data-slot": "table-cell",
|
|
53
|
-
className: cn("px-6 py-2
|
|
53
|
+
className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
|
|
54
54
|
...props
|
|
55
55
|
});
|
|
56
56
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
5
5
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
package/dist/components/tabs.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { createContext, use } from "react";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { createContext, use } from "react";
|
|
6
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
7
7
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
8
8
|
//#region src/components/tabs.tsx
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
4
4
|
import { Label } from "./label.mjs";
|
|
5
|
+
import * as React from "react";
|
|
5
6
|
import { Info } from "lucide-react";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import * as React from "react";
|
|
8
8
|
//#region src/components/textarea.tsx
|
|
9
9
|
function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
|
|
10
10
|
const generatedId = React.useId();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
4
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
5
5
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import * as React from "react";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import * as React 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([
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button } from "./button.mjs";
|
|
3
3
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
4
|
import { forwardRef } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Slottable } from "@radix-ui/react-slot";
|
|
7
7
|
//#region src/components/tooltip-icon-button.tsx
|
|
8
8
|
const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", ...rest }, ref) => {
|
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.a7cd1c2",
|
|
4
4
|
"description": "Alpic design system — shared UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"lucide-react": "^1.
|
|
26
|
+
"lucide-react": "^1.14.0",
|
|
27
27
|
"react": "^19.2.5",
|
|
28
28
|
"react-dom": "^19.2.5",
|
|
29
|
-
"react-hook-form": "^7.
|
|
29
|
+
"react-hook-form": "^7.74.0",
|
|
30
30
|
"sonner": "^2.0.7",
|
|
31
31
|
"tailwindcss": "^4.2.4",
|
|
32
32
|
"tw-animate-css": "^1.4.0"
|
|
@@ -59,12 +59,12 @@
|
|
|
59
59
|
"@tailwindcss/postcss": "^4.2.4",
|
|
60
60
|
"@types/react": "19.2.14",
|
|
61
61
|
"@types/react-dom": "19.2.3",
|
|
62
|
-
"lucide-react": "^1.
|
|
63
|
-
"react-hook-form": "^7.
|
|
62
|
+
"lucide-react": "^1.14.0",
|
|
63
|
+
"react-hook-form": "^7.74.0",
|
|
64
64
|
"shx": "^0.4.0",
|
|
65
65
|
"sonner": "^2.0.7",
|
|
66
66
|
"tailwindcss": "^4.2.4",
|
|
67
|
-
"tsdown": "^0.21.
|
|
67
|
+
"tsdown": "^0.21.10",
|
|
68
68
|
"tw-animate-css": "^1.4.0",
|
|
69
69
|
"typescript": "^6.0.3"
|
|
70
70
|
},
|
|
@@ -84,7 +84,9 @@ function Combobox(props: ComboboxProps) {
|
|
|
84
84
|
|
|
85
85
|
const onOpenChange = useCallback(
|
|
86
86
|
(newOpen: boolean) => {
|
|
87
|
-
if (!isOpenControlled)
|
|
87
|
+
if (!isOpenControlled) {
|
|
88
|
+
setUncontrolledOpen(newOpen);
|
|
89
|
+
}
|
|
88
90
|
controlledOnOpenChange?.(newOpen);
|
|
89
91
|
},
|
|
90
92
|
[isOpenControlled, controlledOnOpenChange],
|
|
@@ -105,7 +107,9 @@ function Combobox(props: ComboboxProps) {
|
|
|
105
107
|
|
|
106
108
|
const isSelected = useCallback(
|
|
107
109
|
(itemValue: string) => {
|
|
108
|
-
if (multiple)
|
|
110
|
+
if (multiple) {
|
|
111
|
+
return multiValues.includes(itemValue);
|
|
112
|
+
}
|
|
109
113
|
return singleValue === itemValue;
|
|
110
114
|
},
|
|
111
115
|
[multiple, singleValue, multiValues],
|
|
@@ -123,11 +127,15 @@ function Combobox(props: ComboboxProps) {
|
|
|
123
127
|
const next = multiValues.includes(itemValue)
|
|
124
128
|
? multiValues.filter((val) => val !== itemValue)
|
|
125
129
|
: [...multiValues, itemValue];
|
|
126
|
-
if (!isControlledMulti)
|
|
130
|
+
if (!isControlledMulti) {
|
|
131
|
+
setUncontrolledMultiValue(next);
|
|
132
|
+
}
|
|
127
133
|
onValueChangeMulti?.(next);
|
|
128
134
|
// Stay open in multi mode
|
|
129
135
|
} else {
|
|
130
|
-
if (!isControlledSingle)
|
|
136
|
+
if (!isControlledSingle) {
|
|
137
|
+
setUncontrolledSingleValue(itemValue);
|
|
138
|
+
}
|
|
131
139
|
onValueChangeSingle?.(itemValue);
|
|
132
140
|
onOpenChange(false);
|
|
133
141
|
}
|
|
@@ -145,9 +153,13 @@ function Combobox(props: ComboboxProps) {
|
|
|
145
153
|
|
|
146
154
|
const onDeselect = useCallback(
|
|
147
155
|
(itemValue: string) => {
|
|
148
|
-
if (!multiple)
|
|
156
|
+
if (!multiple) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
149
159
|
const next = multiValues.filter((val) => val !== itemValue);
|
|
150
|
-
if (!isControlledMulti)
|
|
160
|
+
if (!isControlledMulti) {
|
|
161
|
+
setUncontrolledMultiValue(next);
|
|
162
|
+
}
|
|
151
163
|
onValueChangeMulti?.(next);
|
|
152
164
|
},
|
|
153
165
|
[multiple, isControlledMulti, onValueChangeMulti, multiValues],
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/cn";
|
|
4
|
+
|
|
5
|
+
const CABLE_CAR_SVG = (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
viewBox="0 0 120 130"
|
|
9
|
+
width="240"
|
|
10
|
+
height="260"
|
|
11
|
+
aria-hidden="true"
|
|
12
|
+
className="block h-auto w-full"
|
|
13
|
+
>
|
|
14
|
+
<line x1="60" y1="3" x2="60" y2="58" stroke="#333" strokeWidth="4" />
|
|
15
|
+
<circle cx="60" cy="11" r="10" fill="#555" />
|
|
16
|
+
<rect x="5" y="58" width="110" height="64" rx="4" fill="#e90060" />
|
|
17
|
+
<rect x="5" y="58" width="110" height="20" rx="4" fill="#F5F0E8" />
|
|
18
|
+
<rect x="5" y="68" width="110" height="10" fill="#F5F0E8" />
|
|
19
|
+
<rect x="14" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
20
|
+
<rect x="47" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
21
|
+
<rect x="80" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
22
|
+
<rect x="5" y="115" width="110" height="7" rx="3" fill="#9f0042" />
|
|
23
|
+
</svg>
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
interface PageLoaderProps {
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function PageLoader({ className }: PageLoaderProps) {
|
|
31
|
+
return (
|
|
32
|
+
<div
|
|
33
|
+
className={cn("flex min-h-screen items-center justify-center bg-background", className)}
|
|
34
|
+
role="status"
|
|
35
|
+
aria-label="Loading Alpic…"
|
|
36
|
+
>
|
|
37
|
+
<div className="relative h-[120px] w-[200px]">
|
|
38
|
+
<div
|
|
39
|
+
className="absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]"
|
|
40
|
+
style={{ transform: "rotate(-15deg)", transformOrigin: "left center" }}
|
|
41
|
+
/>
|
|
42
|
+
<div className="absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]">
|
|
43
|
+
{CABLE_CAR_SVG}
|
|
44
|
+
</div>
|
|
45
|
+
<div
|
|
46
|
+
className="pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]"
|
|
47
|
+
style={{ background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }}
|
|
48
|
+
/>
|
|
49
|
+
<div
|
|
50
|
+
className="pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]"
|
|
51
|
+
style={{ background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }}
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export type { PageLoaderProps };
|
|
59
|
+
export { PageLoader };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import type React from "react";
|
|
4
|
+
|
|
5
|
+
import { cn } from "../lib/cn";
|
|
6
|
+
|
|
7
|
+
const shimmerStyle: React.CSSProperties = {
|
|
8
|
+
background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
|
|
9
|
+
backgroundSize: "250% 100%, auto",
|
|
10
|
+
backgroundRepeat: "no-repeat, padding-box",
|
|
11
|
+
WebkitBackgroundClip: "text",
|
|
12
|
+
WebkitTextFillColor: "transparent",
|
|
13
|
+
backgroundClip: "text",
|
|
14
|
+
animation: "shimmer-text 2.5s linear infinite",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export function ShimmerText({ children, className }: { children: string | number; className?: string }) {
|
|
18
|
+
return (
|
|
19
|
+
<span className={cn(className)} style={shimmerStyle}>
|
|
20
|
+
{children}
|
|
21
|
+
</span>
|
|
22
|
+
);
|
|
23
|
+
}
|
package/src/components/table.tsx
CHANGED
|
@@ -66,11 +66,25 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
|
66
66
|
);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
interface TableCellProps extends React.ComponentProps<"td"> {
|
|
70
|
+
/**
|
|
71
|
+
* When true, the cell renders edge-to-edge so the child can act as the
|
|
72
|
+
* interactive surface (e.g. a button or popover trigger filling the cell).
|
|
73
|
+
* Defaults to false (standard padded cell).
|
|
74
|
+
*/
|
|
75
|
+
interactive?: boolean;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function TableCell({ className, interactive = false, ...props }: TableCellProps) {
|
|
70
79
|
return (
|
|
71
80
|
<td
|
|
72
81
|
data-slot="table-cell"
|
|
73
|
-
className={cn(
|
|
82
|
+
className={cn(
|
|
83
|
+
"align-middle",
|
|
84
|
+
interactive ? "h-px p-0" : "px-6 py-2",
|
|
85
|
+
"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3",
|
|
86
|
+
className,
|
|
87
|
+
)}
|
|
74
88
|
{...props}
|
|
75
89
|
/>
|
|
76
90
|
);
|
|
@@ -8,7 +8,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
|
|
|
8
8
|
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
return () => {
|
|
11
|
-
if (timeoutRef.current)
|
|
11
|
+
if (timeoutRef.current) {
|
|
12
|
+
clearTimeout(timeoutRef.current);
|
|
13
|
+
}
|
|
12
14
|
};
|
|
13
15
|
}, []);
|
|
14
16
|
|
|
@@ -16,7 +18,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
|
|
|
16
18
|
(text: string) => {
|
|
17
19
|
navigator.clipboard.writeText(text).then(() => {
|
|
18
20
|
setIsCopied(true);
|
|
19
|
-
if (timeoutRef.current)
|
|
21
|
+
if (timeoutRef.current) {
|
|
22
|
+
clearTimeout(timeoutRef.current);
|
|
23
|
+
}
|
|
20
24
|
timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
|
|
21
25
|
});
|
|
22
26
|
},
|
|
@@ -190,8 +190,8 @@ export const AllVariants: Story = () => (
|
|
|
190
190
|
</TableRow>
|
|
191
191
|
</TableHeader>
|
|
192
192
|
<TableBody>
|
|
193
|
-
{USERS.slice(0, 3).map((user,
|
|
194
|
-
<TableRow key={user.id} data-state={
|
|
193
|
+
{USERS.slice(0, 3).map((user, index) => (
|
|
194
|
+
<TableRow key={user.id} data-state={index === 1 ? "selected" : undefined}>
|
|
195
195
|
<TableCell className="font-medium text-foreground">{user.name}</TableCell>
|
|
196
196
|
<TableCell className="text-subtle-foreground">{user.role}</TableCell>
|
|
197
197
|
<TableCell className="text-subtle-foreground">{user.email}</TableCell>
|
package/src/styles/tokens.css
CHANGED
|
@@ -113,6 +113,24 @@
|
|
|
113
113
|
--animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
@keyframes shimmer-text {
|
|
117
|
+
from {
|
|
118
|
+
background-position: 100% center;
|
|
119
|
+
}
|
|
120
|
+
to {
|
|
121
|
+
background-position: 0% center;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes alpic-ride {
|
|
126
|
+
0% {
|
|
127
|
+
transform: translate(0px, 0px);
|
|
128
|
+
}
|
|
129
|
+
100% {
|
|
130
|
+
transform: translate(237px, -64px);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
116
134
|
@keyframes accordion-down {
|
|
117
135
|
from {
|
|
118
136
|
height: 0;
|
|
@@ -146,14 +164,12 @@
|
|
|
146
164
|
@keyframes beacon-ring-pulse {
|
|
147
165
|
0%,
|
|
148
166
|
100% {
|
|
149
|
-
opacity: 0.
|
|
167
|
+
opacity: 0.55;
|
|
150
168
|
transform: scale(1);
|
|
151
|
-
filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
|
|
152
169
|
}
|
|
153
170
|
50% {
|
|
154
|
-
opacity:
|
|
171
|
+
opacity: 0.9;
|
|
155
172
|
transform: scale(1.02);
|
|
156
|
-
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
|
|
157
173
|
}
|
|
158
174
|
}
|
|
159
175
|
|