@pibit.ai/cure-design-system 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +275 -0
- package/dist/components.css +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +23 -0
- package/dist/node_modules/class-variance-authority/dist/index.js +35 -0
- package/dist/node_modules/clsx/dist/clsx.js +17 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +2765 -0
- package/dist/primitives/avatar/avatar.d.ts +32 -0
- package/dist/primitives/avatar/avatar.d.ts.map +1 -0
- package/dist/primitives/avatar/avatar.js +43 -0
- package/dist/primitives/avatar/index.d.ts +2 -0
- package/dist/primitives/avatar/index.d.ts.map +1 -0
- package/dist/primitives/badge/badge.d.ts +28 -0
- package/dist/primitives/badge/badge.d.ts.map +1 -0
- package/dist/primitives/badge/badge.js +43 -0
- package/dist/primitives/badge/index.d.ts +2 -0
- package/dist/primitives/badge/index.d.ts.map +1 -0
- package/dist/primitives/button/button.d.ts +34 -0
- package/dist/primitives/button/button.d.ts.map +1 -0
- package/dist/primitives/button/button.js +74 -0
- package/dist/primitives/button/index.d.ts +2 -0
- package/dist/primitives/button/index.d.ts.map +1 -0
- package/dist/primitives/checkbox/checkbox.d.ts +30 -0
- package/dist/primitives/checkbox/checkbox.d.ts.map +1 -0
- package/dist/primitives/checkbox/checkbox.js +49 -0
- package/dist/primitives/checkbox/index.d.ts +2 -0
- package/dist/primitives/checkbox/index.d.ts.map +1 -0
- package/dist/primitives/colors/index.d.ts +2 -0
- package/dist/primitives/colors/index.d.ts.map +1 -0
- package/dist/primitives/heading/heading.d.ts +39 -0
- package/dist/primitives/heading/heading.d.ts.map +1 -0
- package/dist/primitives/heading/heading.js +64 -0
- package/dist/primitives/heading/index.d.ts +2 -0
- package/dist/primitives/heading/index.d.ts.map +1 -0
- package/dist/primitives/icon/icon.d.ts +32 -0
- package/dist/primitives/icon/icon.d.ts.map +1 -0
- package/dist/primitives/icon/icon.js +19 -0
- package/dist/primitives/icon/index.d.ts +2 -0
- package/dist/primitives/icon/index.d.ts.map +1 -0
- package/dist/primitives/input/index.d.ts +2 -0
- package/dist/primitives/input/index.d.ts.map +1 -0
- package/dist/primitives/input/input.d.ts +46 -0
- package/dist/primitives/input/input.d.ts.map +1 -0
- package/dist/primitives/input/input.js +80 -0
- package/dist/primitives/text/index.d.ts +2 -0
- package/dist/primitives/text/index.d.ts.map +1 -0
- package/dist/primitives/text/text.d.ts +42 -0
- package/dist/primitives/text/text.d.ts.map +1 -0
- package/dist/primitives/text/text.js +78 -0
- package/dist/primitives/toggle/index.d.ts +2 -0
- package/dist/primitives/toggle/index.d.ts.map +1 -0
- package/dist/primitives/toggle/toggle.d.ts +28 -0
- package/dist/primitives/toggle/toggle.d.ts.map +1 -0
- package/dist/primitives/toggle/toggle.js +57 -0
- package/dist/utils/cn.d.ts +10 -0
- package/dist/utils/cn.d.ts.map +1 -0
- package/dist/utils/cn.js +8 -0
- package/package.json +104 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
declare const avatarVariants: (props?: ({
|
|
3
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
4
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
|
+
export interface AvatarProps extends VariantProps<typeof avatarVariants> {
|
|
6
|
+
/** Image source URL */
|
|
7
|
+
src?: string;
|
|
8
|
+
/** Alt text for image */
|
|
9
|
+
alt?: string;
|
|
10
|
+
/** Fallback text (usually initials) */
|
|
11
|
+
fallback?: string;
|
|
12
|
+
/** Additional CSS classes */
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Avatar component for user profile images
|
|
17
|
+
*
|
|
18
|
+
* Features:
|
|
19
|
+
* - Automatic fallback to initials
|
|
20
|
+
* - Multiple sizes
|
|
21
|
+
* - Handles loading states
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* <Avatar src="/user.jpg" alt="John Doe" fallback="JD" />
|
|
25
|
+
* <Avatar fallback="AB" size="lg" />
|
|
26
|
+
*/
|
|
27
|
+
export declare function Avatar({ src, alt, fallback, size, className }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare namespace Avatar {
|
|
29
|
+
var displayName: string;
|
|
30
|
+
}
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/primitives/avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;8EAYlB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW,2CAkB1E;yBAlBe,MAAM"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import * as a from "@radix-ui/react-avatar";
|
|
3
|
+
import { cva as n } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { cn as r } from "../../utils/cn.js";
|
|
5
|
+
const f = n("relative inline-flex shrink-0 overflow-hidden rounded-full", {
|
|
6
|
+
variants: {
|
|
7
|
+
size: {
|
|
8
|
+
sm: "h-8 w-8",
|
|
9
|
+
md: "h-10 w-10",
|
|
10
|
+
lg: "h-12 w-12",
|
|
11
|
+
xl: "h-16 w-16"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: {
|
|
15
|
+
size: "md"
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
function c({ src: t, alt: l, fallback: i, size: s, className: m }) {
|
|
19
|
+
return /* @__PURE__ */ o(a.Root, { className: r(f({ size: s }), m), children: [
|
|
20
|
+
/* @__PURE__ */ e(
|
|
21
|
+
a.Image,
|
|
22
|
+
{
|
|
23
|
+
src: t,
|
|
24
|
+
alt: l,
|
|
25
|
+
className: "h-full w-full object-cover"
|
|
26
|
+
}
|
|
27
|
+
),
|
|
28
|
+
/* @__PURE__ */ e(
|
|
29
|
+
a.Fallback,
|
|
30
|
+
{
|
|
31
|
+
className: r(
|
|
32
|
+
"flex h-full w-full items-center justify-center",
|
|
33
|
+
"bg-gray-200 text-gray-700 font-medium text-sm"
|
|
34
|
+
),
|
|
35
|
+
children: i
|
|
36
|
+
}
|
|
37
|
+
)
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
c.displayName = "Avatar";
|
|
41
|
+
export {
|
|
42
|
+
c as Avatar
|
|
43
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "primary" | "outline" | "default" | "error" | "success" | "warning" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export interface BadgeProps extends VariantProps<typeof badgeVariants> {
|
|
8
|
+
/** Badge content */
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
/** Additional CSS classes */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Icon to display before text */
|
|
13
|
+
icon?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Badge component for labels, tags, and status indicators
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* <Badge>Default</Badge>
|
|
20
|
+
* <Badge variant="success">Active</Badge>
|
|
21
|
+
* <Badge variant="error" size="sm">Error</Badge>
|
|
22
|
+
*/
|
|
23
|
+
export declare function Badge({ variant, size, className, children, icon, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare namespace Badge {
|
|
25
|
+
var displayName: string;
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,aAAa;;;8EAuBlB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACpE,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,IAAI,GACL,EAAE,UAAU,2CAOZ;yBAbe,KAAK"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsxs as n, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { cva as d } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
3
|
+
import { cn as m } from "../../utils/cn.js";
|
|
4
|
+
const g = d(
|
|
5
|
+
"inline-flex items-center gap-1 rounded-md font-medium",
|
|
6
|
+
{
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: "bg-gray-100 text-gray-800",
|
|
10
|
+
primary: "bg-brand-100 text-brand-800",
|
|
11
|
+
success: "bg-success-100 text-success-800",
|
|
12
|
+
warning: "bg-warning-100 text-warning-800",
|
|
13
|
+
error: "bg-error-100 text-error-800",
|
|
14
|
+
outline: "border border-gray-300 bg-white text-gray-700"
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
sm: "px-2 py-0.5 text-xs",
|
|
18
|
+
md: "px-2.5 py-1 text-sm",
|
|
19
|
+
lg: "px-3 py-1.5 text-sm"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "default",
|
|
24
|
+
size: "md"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
function x({
|
|
29
|
+
variant: r,
|
|
30
|
+
size: t,
|
|
31
|
+
className: a,
|
|
32
|
+
children: s,
|
|
33
|
+
icon: e
|
|
34
|
+
}) {
|
|
35
|
+
return /* @__PURE__ */ n("span", { className: m(g({ variant: r, size: t }), a), children: [
|
|
36
|
+
e && /* @__PURE__ */ i("span", { className: "inline-flex", children: e }),
|
|
37
|
+
s
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
x.displayName = "Badge";
|
|
41
|
+
export {
|
|
42
|
+
x as Badge
|
|
43
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { ButtonProps as AriaButtonProps } from 'react-aria-components';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
declare const buttonVariants: (props?: ({
|
|
5
|
+
variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
6
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
7
|
+
fullWidth?: boolean | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
export interface ButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof buttonVariants> {
|
|
10
|
+
/** Content of the button */
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/** Additional CSS classes */
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Button component built on React Aria for accessibility
|
|
17
|
+
*
|
|
18
|
+
* Features:
|
|
19
|
+
* - Keyboard navigation (Space/Enter)
|
|
20
|
+
* - Disabled state management
|
|
21
|
+
* - Focus management
|
|
22
|
+
* - Multiple variants and sizes
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* <Button>Click me</Button>
|
|
26
|
+
* <Button variant="secondary" size="lg">Large Button</Button>
|
|
27
|
+
* <Button isDisabled>Disabled</Button>
|
|
28
|
+
*/
|
|
29
|
+
export declare function Button({ variant, size, fullWidth, className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare namespace Button {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
33
|
+
export {};
|
|
34
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/primitives/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,IAAI,eAAe,EACpC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,cAAc;;;;8EAgDnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,EACxC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CASb;yBAhBe,MAAM"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { Button as a } from "react-aria-components";
|
|
3
|
+
import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { cn as b } from "../../utils/cn.js";
|
|
5
|
+
const l = g(
|
|
6
|
+
[
|
|
7
|
+
"inline-flex items-center justify-center gap-2",
|
|
8
|
+
"rounded-lg font-medium transition-colors",
|
|
9
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
10
|
+
"disabled:opacity-50 disabled:pointer-events-none"
|
|
11
|
+
],
|
|
12
|
+
{
|
|
13
|
+
variants: {
|
|
14
|
+
variant: {
|
|
15
|
+
primary: [
|
|
16
|
+
"bg-brand-600 text-white",
|
|
17
|
+
"hover:bg-brand-700",
|
|
18
|
+
"focus-visible:ring-brand-600"
|
|
19
|
+
],
|
|
20
|
+
secondary: [
|
|
21
|
+
"bg-gray-100 text-gray-900",
|
|
22
|
+
"hover:bg-gray-200",
|
|
23
|
+
"focus-visible:ring-gray-500"
|
|
24
|
+
],
|
|
25
|
+
destructive: [
|
|
26
|
+
"bg-error-600 text-white",
|
|
27
|
+
"hover:bg-error-700",
|
|
28
|
+
"focus-visible:ring-error-600"
|
|
29
|
+
],
|
|
30
|
+
outline: [
|
|
31
|
+
"border border-gray-300 bg-white",
|
|
32
|
+
"hover:bg-gray-50",
|
|
33
|
+
"focus-visible:ring-gray-500"
|
|
34
|
+
],
|
|
35
|
+
ghost: ["hover:bg-gray-100", "focus-visible:ring-gray-500"],
|
|
36
|
+
link: ["text-brand-600 underline-offset-4", "hover:underline"]
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
sm: "h-8 px-3 text-sm",
|
|
40
|
+
md: "h-10 px-4 text-sm",
|
|
41
|
+
lg: "h-11 px-6 text-base",
|
|
42
|
+
xl: "h-12 px-8 text-base"
|
|
43
|
+
},
|
|
44
|
+
fullWidth: {
|
|
45
|
+
true: "w-full"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
defaultVariants: {
|
|
49
|
+
variant: "primary",
|
|
50
|
+
size: "md"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
function u({
|
|
55
|
+
variant: r,
|
|
56
|
+
size: e,
|
|
57
|
+
fullWidth: t,
|
|
58
|
+
className: i,
|
|
59
|
+
children: o,
|
|
60
|
+
...n
|
|
61
|
+
}) {
|
|
62
|
+
return /* @__PURE__ */ s(
|
|
63
|
+
a,
|
|
64
|
+
{
|
|
65
|
+
className: b(l({ variant: r, size: e, fullWidth: t }), i),
|
|
66
|
+
...n,
|
|
67
|
+
children: o
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
u.displayName = "Button";
|
|
72
|
+
export {
|
|
73
|
+
u as Button
|
|
74
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import * as RadixCheckbox from '@radix-ui/react-checkbox';
|
|
3
|
+
export interface CheckboxProps extends Omit<RadixCheckbox.CheckboxProps, 'checked'> {
|
|
4
|
+
/** Checkbox label */
|
|
5
|
+
label?: ReactNode;
|
|
6
|
+
/** Description text */
|
|
7
|
+
description?: string;
|
|
8
|
+
/** Checked state */
|
|
9
|
+
checked?: boolean;
|
|
10
|
+
/** Additional CSS classes */
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Checkbox component built on Radix UI
|
|
15
|
+
*
|
|
16
|
+
* Features:
|
|
17
|
+
* - Accessible by default
|
|
18
|
+
* - Supports indeterminate state
|
|
19
|
+
* - Label and description support
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* <Checkbox label="Accept terms" />
|
|
23
|
+
* <Checkbox label="Subscribe" description="Get weekly updates" />
|
|
24
|
+
* <Checkbox checked={true} onCheckedChange={(checked) => {}} />
|
|
25
|
+
*/
|
|
26
|
+
export declare function Checkbox({ label, description, checked, className, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare namespace Checkbox {
|
|
28
|
+
var displayName: string;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/primitives/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAG1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,SAAS,CAAC;IACpD,qBAAqB;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,aAAa,2CAwCf;yBA/Ce,QAAQ"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import * as s from "@radix-ui/react-checkbox";
|
|
3
|
+
import { cn as o } from "../../utils/cn.js";
|
|
4
|
+
import { Icon as m } from "../icon/icon.js";
|
|
5
|
+
function b({
|
|
6
|
+
label: t,
|
|
7
|
+
description: r,
|
|
8
|
+
checked: c,
|
|
9
|
+
className: d,
|
|
10
|
+
id: n,
|
|
11
|
+
...l
|
|
12
|
+
}) {
|
|
13
|
+
const a = n || `checkbox-${Math.random().toString(36).slice(2, 9)}`;
|
|
14
|
+
return /* @__PURE__ */ i("div", { className: o("flex items-start gap-2", d), children: [
|
|
15
|
+
/* @__PURE__ */ e(
|
|
16
|
+
s.Root,
|
|
17
|
+
{
|
|
18
|
+
id: a,
|
|
19
|
+
checked: c,
|
|
20
|
+
className: o(
|
|
21
|
+
"h-4 w-4 shrink-0 rounded border border-gray-300 bg-white",
|
|
22
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600 focus-visible:ring-offset-2",
|
|
23
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
24
|
+
"data-[state=checked]:bg-brand-600 data-[state=checked]:border-brand-600",
|
|
25
|
+
"data-[state=indeterminate]:bg-brand-600 data-[state=indeterminate]:border-brand-600",
|
|
26
|
+
// Ensure checkbox is vertically aligned with first line of text
|
|
27
|
+
"mt-0.5"
|
|
28
|
+
),
|
|
29
|
+
...l,
|
|
30
|
+
children: /* @__PURE__ */ e(s.Indicator, { className: "flex items-center justify-center text-white", children: /* @__PURE__ */ e(m, { name: "Check", size: 12 }) })
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
(t || r) && /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
|
|
34
|
+
t && /* @__PURE__ */ e(
|
|
35
|
+
"label",
|
|
36
|
+
{
|
|
37
|
+
htmlFor: a,
|
|
38
|
+
className: "text-sm font-medium text-gray-700 cursor-pointer",
|
|
39
|
+
children: t
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
r && /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: r })
|
|
43
|
+
] })
|
|
44
|
+
] });
|
|
45
|
+
}
|
|
46
|
+
b.displayName = "Checkbox";
|
|
47
|
+
export {
|
|
48
|
+
b as Checkbox
|
|
49
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/colors/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
declare const headingVariants: (props?: ({
|
|
4
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
|
|
5
|
+
weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
|
|
6
|
+
color?: "primary" | "secondary" | "error" | "success" | "brand" | null | undefined;
|
|
7
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
export interface HeadingProps extends VariantProps<typeof headingVariants> {
|
|
9
|
+
/** Heading content */
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/** Heading level (1-6) */
|
|
12
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
13
|
+
/** Additional CSS classes */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** HTML element to render as (overrides level if needed) */
|
|
16
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Heading component for titles and section headers
|
|
20
|
+
*
|
|
21
|
+
* Features:
|
|
22
|
+
* - Semantic HTML (h1-h6)
|
|
23
|
+
* - Responsive font sizes
|
|
24
|
+
* - Weight variants
|
|
25
|
+
* - Semantic colors
|
|
26
|
+
* - Can override HTML element for accessibility
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* <Heading level={1}>Page Title</Heading>
|
|
30
|
+
* <Heading level={2} color="brand">Section Title</Heading>
|
|
31
|
+
* <Heading level={3} weight="bold">Subsection</Heading>
|
|
32
|
+
* <Heading level={2} as="h1">Styled as h2, semantic h1</Heading>
|
|
33
|
+
*/
|
|
34
|
+
export declare function Heading({ children, level, as, weight, color, className, }: HeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export declare namespace Heading {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
export {};
|
|
39
|
+
//# sourceMappingURL=heading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/primitives/heading/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,eAAe;;;;8EA6BnB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,YAAY,CAAC,OAAO,eAAe,CAAC;IACxE,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAS,EACT,EAAE,EACF,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,YAAY,2CAWd;yBAlBe,OAAO"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { cva as m } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
3
|
+
import { cn as s } from "../../utils/cn.js";
|
|
4
|
+
const d = m("font-semibold", {
|
|
5
|
+
variants: {
|
|
6
|
+
level: {
|
|
7
|
+
1: "text-4xl leading-tight tracking-tight",
|
|
8
|
+
// 36px - Page titles
|
|
9
|
+
2: "text-3xl leading-tight tracking-tight",
|
|
10
|
+
// 30px - Section titles
|
|
11
|
+
3: "text-2xl leading-snug",
|
|
12
|
+
// 24px - Subsection titles
|
|
13
|
+
4: "text-xl leading-snug",
|
|
14
|
+
// 20px - Card titles
|
|
15
|
+
5: "text-lg leading-normal",
|
|
16
|
+
// 18px - Small headings
|
|
17
|
+
6: "text-base leading-normal"
|
|
18
|
+
// 16px - Micro headings
|
|
19
|
+
},
|
|
20
|
+
weight: {
|
|
21
|
+
normal: "font-normal",
|
|
22
|
+
// 400
|
|
23
|
+
medium: "font-medium",
|
|
24
|
+
// 500
|
|
25
|
+
semibold: "font-semibold",
|
|
26
|
+
// 600
|
|
27
|
+
bold: "font-bold"
|
|
28
|
+
// 700
|
|
29
|
+
},
|
|
30
|
+
color: {
|
|
31
|
+
primary: "text-gray-900",
|
|
32
|
+
secondary: "text-gray-700",
|
|
33
|
+
brand: "text-brand-600",
|
|
34
|
+
error: "text-error-600",
|
|
35
|
+
success: "text-success-600"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
defaultVariants: {
|
|
39
|
+
level: 1,
|
|
40
|
+
weight: "semibold",
|
|
41
|
+
color: "primary"
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
function g({
|
|
45
|
+
children: e,
|
|
46
|
+
level: t = 1,
|
|
47
|
+
as: n,
|
|
48
|
+
weight: a,
|
|
49
|
+
color: r,
|
|
50
|
+
className: o
|
|
51
|
+
}) {
|
|
52
|
+
const i = n || `h${t}`;
|
|
53
|
+
return /* @__PURE__ */ l(
|
|
54
|
+
i,
|
|
55
|
+
{
|
|
56
|
+
className: s(d({ level: t, weight: a, color: r }), o),
|
|
57
|
+
children: e
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
g.displayName = "Heading";
|
|
62
|
+
export {
|
|
63
|
+
g as Heading
|
|
64
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as UntitledIcons from '@untitledui/icons';
|
|
2
|
+
/**
|
|
3
|
+
* Icon names from Untitled UI
|
|
4
|
+
* This type is auto-generated from the icon library
|
|
5
|
+
*/
|
|
6
|
+
export type IconName = keyof typeof UntitledIcons;
|
|
7
|
+
export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48;
|
|
8
|
+
export interface IconProps {
|
|
9
|
+
/** Name of the icon from Untitled UI library */
|
|
10
|
+
name: IconName;
|
|
11
|
+
/** Size in pixels */
|
|
12
|
+
size?: IconSize;
|
|
13
|
+
/** Additional CSS classes */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Color (use Tailwind text-* classes in className instead) */
|
|
16
|
+
color?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Icon component - Abstraction over Untitled UI icons
|
|
20
|
+
*
|
|
21
|
+
* ✅ This component ensures Untitled UI is replaceable
|
|
22
|
+
* ✅ Consumers never import from @untitledui/icons directly
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* <Icon name="ChevronDown" size={16} />
|
|
26
|
+
* <Icon name="SearchMd" size={20} className="text-gray-500" />
|
|
27
|
+
*/
|
|
28
|
+
export declare function Icon({ name, size, className, color }: IconProps): import("react/jsx-runtime").JSX.Element | null;
|
|
29
|
+
export declare namespace Icon {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAGnD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,aAAa,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,kDAgBpE;yBAhBe,IAAI"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import * as e from "@untitledui/icons";
|
|
3
|
+
import { cn as l } from "../../utils/cn.js";
|
|
4
|
+
function m({ name: n, size: o = 20, className: r, color: i }) {
|
|
5
|
+
const t = e[n];
|
|
6
|
+
return t ? /* @__PURE__ */ c(
|
|
7
|
+
t,
|
|
8
|
+
{
|
|
9
|
+
width: o,
|
|
10
|
+
height: o,
|
|
11
|
+
className: l(r),
|
|
12
|
+
color: i
|
|
13
|
+
}
|
|
14
|
+
) : (console.warn(`Icon "${n}" not found in Untitled UI library`), null);
|
|
15
|
+
}
|
|
16
|
+
m.displayName = "Icon";
|
|
17
|
+
export {
|
|
18
|
+
m as Icon
|
|
19
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { TextFieldProps } from 'react-aria-components';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
declare const inputVariants: (props?: ({
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
variant?: "default" | "error" | null | undefined;
|
|
7
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
export interface InputProps extends Omit<TextFieldProps, 'children'>, VariantProps<typeof inputVariants> {
|
|
9
|
+
/** Label text */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Placeholder text */
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
/** Description text below input */
|
|
14
|
+
description?: string;
|
|
15
|
+
/** Error message */
|
|
16
|
+
errorMessage?: string;
|
|
17
|
+
/** Input type */
|
|
18
|
+
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
19
|
+
/** Additional CSS classes for input */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** Left icon or element */
|
|
22
|
+
leftIcon?: ReactNode;
|
|
23
|
+
/** Right icon or element */
|
|
24
|
+
rightIcon?: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Input component built on React Aria TextField
|
|
28
|
+
*
|
|
29
|
+
* Features:
|
|
30
|
+
* - Label support
|
|
31
|
+
* - Error states
|
|
32
|
+
* - Description/hint text
|
|
33
|
+
* - Icon support
|
|
34
|
+
* - Accessible by default
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* <Input label="Email" type="email" placeholder="you@example.com" />
|
|
38
|
+
* <Input label="Password" type="password" isRequired />
|
|
39
|
+
* <Input errorMessage="This field is required" />
|
|
40
|
+
*/
|
|
41
|
+
export declare function Input({ label, placeholder, description, errorMessage, type, size, variant, className, leftIcon, rightIcon, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare namespace Input {
|
|
43
|
+
var displayName: string;
|
|
44
|
+
}
|
|
45
|
+
export {};
|
|
46
|
+
//# sourceMappingURL=input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,aAAa;;;8EA+BlB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3E,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,IAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CA6CZ;yBAzDe,KAAK"}
|