@oztix/roadie-components 2.0.0 → 2.0.2
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/Accordion.d.ts +42 -21
- package/dist/Accordion.d.ts.map +1 -0
- package/dist/Accordion.js +1 -2
- package/dist/Accordion.js.map +1 -1
- package/dist/Autocomplete.d.ts +120 -95
- package/dist/Autocomplete.d.ts.map +1 -0
- package/dist/Autocomplete.js +1 -2
- package/dist/Autocomplete.js.map +1 -1
- package/dist/Badge.d.ts +27 -16
- package/dist/Badge.d.ts.map +1 -0
- package/dist/Badge.js +1 -1
- package/dist/Badge.js.map +1 -1
- package/dist/Breadcrumb.d.ts +45 -23
- package/dist/Breadcrumb.d.ts.map +1 -0
- package/dist/Breadcrumb.js +1 -1
- package/dist/Breadcrumb.js.map +1 -1
- package/dist/Button-CDQ6ik0P.js +2 -0
- package/dist/Button-CDQ6ik0P.js.map +1 -0
- package/dist/Button-DdE0vCfo.js +2 -0
- package/dist/Button-DdE0vCfo.js.map +1 -0
- package/dist/Button-Dt1TGgrL.d.ts +26 -0
- package/dist/Button-Dt1TGgrL.d.ts.map +1 -0
- package/dist/Button.d.ts +3 -17
- package/dist/Button.js +1 -2
- package/dist/Card.d.ts +56 -30
- package/dist/Card.d.ts.map +1 -0
- package/dist/Card.js +1 -1
- package/dist/Card.js.map +1 -1
- package/dist/Code.d.ts +19 -13
- package/dist/Code.d.ts.map +1 -0
- package/dist/Code.js +1 -1
- package/dist/Code.js.map +1 -1
- package/dist/Combobox.d.ts +132 -101
- package/dist/Combobox.d.ts.map +1 -0
- package/dist/Combobox.js +1 -2
- package/dist/Combobox.js.map +1 -1
- package/dist/Field.d.ts +63 -46
- package/dist/Field.d.ts.map +1 -0
- package/dist/Field.js +1 -2
- package/dist/Field.js.map +1 -1
- package/dist/Fieldset.d.ts +34 -22
- package/dist/Fieldset.d.ts.map +1 -0
- package/dist/Fieldset.js +1 -2
- package/dist/Fieldset.js.map +1 -1
- package/dist/Highlight.d.ts +20 -15
- package/dist/Highlight.d.ts.map +1 -0
- package/dist/Highlight.js +1 -2
- package/dist/Highlight.js.map +1 -1
- package/dist/Indicator.d.ts +20 -12
- package/dist/Indicator.d.ts.map +1 -0
- package/dist/Indicator.js +1 -1
- package/dist/Indicator.js.map +1 -1
- package/dist/Input.d.ts +22 -14
- package/dist/Input.d.ts.map +1 -0
- package/dist/Input.js +1 -2
- package/dist/Input.js.map +1 -1
- package/dist/Label.d.ts +12 -8
- package/dist/Label.d.ts.map +1 -0
- package/dist/Label.js +1 -1
- package/dist/Label.js.map +1 -1
- package/dist/LinkButton-9nnOzX_0.js +2 -0
- package/dist/LinkButton-9nnOzX_0.js.map +1 -0
- package/dist/LinkButton.d.ts +2 -35
- package/dist/LinkButton.js +1 -2
- package/dist/Mark.d.ts +19 -12
- package/dist/Mark.d.ts.map +1 -0
- package/dist/Mark.js +1 -1
- package/dist/Mark.js.map +1 -1
- package/dist/Marquee.d.ts +27 -16
- package/dist/Marquee.d.ts.map +1 -0
- package/dist/Marquee.js +5 -2
- package/dist/Marquee.js.map +1 -1
- package/dist/Prose.d.ts +19 -12
- package/dist/Prose.d.ts.map +1 -0
- package/dist/Prose.js +1 -1
- package/dist/Prose.js.map +1 -1
- package/dist/RadioGroup.d.ts +64 -40
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RadioGroup.js +1 -2
- package/dist/RadioGroup.js.map +1 -1
- package/dist/Select.d.ts +150 -107
- package/dist/Select.d.ts.map +1 -0
- package/dist/Select.js +1 -2
- package/dist/Select.js.map +1 -1
- package/dist/Separator.d.ts +17 -12
- package/dist/Separator.d.ts.map +1 -0
- package/dist/Separator.js +1 -1
- package/dist/Separator.js.map +1 -1
- package/dist/SpotIllustration.d.ts +71 -50
- package/dist/SpotIllustration.d.ts.map +1 -0
- package/dist/SpotIllustration.js +1 -2
- package/dist/SpotIllustration.js.map +1 -1
- package/dist/Steps.d.ts +111 -72
- package/dist/Steps.d.ts.map +1 -0
- package/dist/Steps.js +1 -2
- package/dist/Steps.js.map +1 -1
- package/dist/Textarea.d.ts +22 -13
- package/dist/Textarea.d.ts.map +1 -0
- package/dist/Textarea.js +1 -2
- package/dist/Textarea.js.map +1 -1
- package/dist/index-0w-ydb3o.d.ts +50 -0
- package/dist/index-0w-ydb3o.d.ts.map +1 -0
- package/dist/index-C3_4djmE.d.ts +17 -0
- package/dist/index-C3_4djmE.d.ts.map +1 -0
- package/dist/index.d.ts +47 -49
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +23 -23
- package/dist/index.js.map +1 -1
- package/dist/variants-DTAwzBl3.js +2 -0
- package/dist/variants-DTAwzBl3.js.map +1 -0
- package/package.json +14 -8
- package/dist/Button-DagX1D_q.d.ts +0 -19
- package/dist/Button.js.map +0 -1
- package/dist/LinkButton.js.map +0 -1
- package/dist/_chunks/chunk-2MBFDJ6K.js +0 -3
- package/dist/_chunks/chunk-2MBFDJ6K.js.map +0 -1
- package/dist/_chunks/chunk-3HWPLULJ.js +0 -2
- package/dist/_chunks/chunk-3HWPLULJ.js.map +0 -1
- package/dist/_chunks/chunk-3NU36NBL.js +0 -3
- package/dist/_chunks/chunk-3NU36NBL.js.map +0 -1
- package/dist/_chunks/chunk-42UB7PQB.js +0 -3
- package/dist/_chunks/chunk-42UB7PQB.js.map +0 -1
- package/dist/_chunks/chunk-4LGCF3SN.js +0 -3
- package/dist/_chunks/chunk-4LGCF3SN.js.map +0 -1
- package/dist/_chunks/chunk-A6JSYXKN.js +0 -2
- package/dist/_chunks/chunk-A6JSYXKN.js.map +0 -1
- package/dist/_chunks/chunk-AFSDN4WI.js +0 -2
- package/dist/_chunks/chunk-AFSDN4WI.js.map +0 -1
- package/dist/_chunks/chunk-DRVUAPKN.js +0 -2
- package/dist/_chunks/chunk-DRVUAPKN.js.map +0 -1
- package/dist/_chunks/chunk-EKOEXSAP.js +0 -2
- package/dist/_chunks/chunk-EKOEXSAP.js.map +0 -1
- package/dist/_chunks/chunk-FQNVMKKV.js +0 -7
- package/dist/_chunks/chunk-FQNVMKKV.js.map +0 -1
- package/dist/_chunks/chunk-FSO4EAAY.js +0 -3
- package/dist/_chunks/chunk-FSO4EAAY.js.map +0 -1
- package/dist/_chunks/chunk-IEDKSZAQ.js +0 -3
- package/dist/_chunks/chunk-IEDKSZAQ.js.map +0 -1
- package/dist/_chunks/chunk-JBHYUOI2.js +0 -3
- package/dist/_chunks/chunk-JBHYUOI2.js.map +0 -1
- package/dist/_chunks/chunk-JGTZ3GCR.js +0 -2
- package/dist/_chunks/chunk-JGTZ3GCR.js.map +0 -1
- package/dist/_chunks/chunk-LHNOY24C.js +0 -2
- package/dist/_chunks/chunk-LHNOY24C.js.map +0 -1
- package/dist/_chunks/chunk-LMV3JECI.js +0 -3
- package/dist/_chunks/chunk-LMV3JECI.js.map +0 -1
- package/dist/_chunks/chunk-M4FEKBLW.js +0 -2
- package/dist/_chunks/chunk-M4FEKBLW.js.map +0 -1
- package/dist/_chunks/chunk-MDRAL676.js +0 -3
- package/dist/_chunks/chunk-MDRAL676.js.map +0 -1
- package/dist/_chunks/chunk-N2HGY7W7.js +0 -3
- package/dist/_chunks/chunk-N2HGY7W7.js.map +0 -1
- package/dist/_chunks/chunk-OIAETOZT.js +0 -3
- package/dist/_chunks/chunk-OIAETOZT.js.map +0 -1
- package/dist/_chunks/chunk-RXMWFJ6W.js +0 -3
- package/dist/_chunks/chunk-RXMWFJ6W.js.map +0 -1
- package/dist/_chunks/chunk-VSKUGXQG.js +0 -3
- package/dist/_chunks/chunk-VSKUGXQG.js.map +0 -1
- package/dist/_chunks/chunk-WOU2B425.js +0 -3
- package/dist/_chunks/chunk-WOU2B425.js.map +0 -1
- package/dist/_chunks/chunk-Y6TDYPCZ.js +0 -3
- package/dist/_chunks/chunk-Y6TDYPCZ.js.map +0 -1
- package/dist/_chunks/chunk-ZXR32FYA.js +0 -2
- package/dist/_chunks/chunk-ZXR32FYA.js.map +0 -1
package/dist/Textarea.d.ts
CHANGED
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as
|
|
3
|
-
import { ComponentProps } from
|
|
4
|
-
import
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import { ComponentProps } from "react";
|
|
4
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
5
|
|
|
6
|
+
//#region src/components/Textarea/index.d.ts
|
|
6
7
|
declare const textareaVariants: (props?: ({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} &
|
|
8
|
+
intent?: "neutral" | "brand" | "brand-secondary" | "accent" | "danger" | "success" | "warning" | "info" | null | undefined;
|
|
9
|
+
emphasis?: "normal" | "subtle" | null | undefined;
|
|
10
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
11
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
12
|
interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
12
|
-
|
|
13
|
+
autoResize?: boolean;
|
|
13
14
|
}
|
|
14
|
-
declare function Textarea({
|
|
15
|
+
declare function Textarea({
|
|
16
|
+
className,
|
|
17
|
+
intent,
|
|
18
|
+
emphasis,
|
|
19
|
+
size,
|
|
20
|
+
autoResize,
|
|
21
|
+
...props
|
|
22
|
+
}: TextareaProps): _$react_jsx_runtime0.JSX.Element;
|
|
15
23
|
declare namespace Textarea {
|
|
16
|
-
|
|
24
|
+
var displayName: string;
|
|
17
25
|
}
|
|
18
|
-
|
|
19
|
-
export { Textarea,
|
|
26
|
+
//#endregion
|
|
27
|
+
export { Textarea, TextareaProps, textareaVariants };
|
|
28
|
+
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","names":[],"sources":["../src/components/Textarea/index.tsx"],"mappings":";;;;;;cAUa,gBAAA,GAAgB,KAAA;;;;IAqB5B,iCAAA,CAAA,SAAA;AAAA,UAEgB,aAAA,SACP,IAAA,CAAK,cAAA,uBACX,YAAA,QAAoB,gBAAA;EACtB,UAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EACd,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAPA,QAAA;EAAA,IAAQ,WAAA;AAAA"}
|
package/dist/Textarea.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
export{b as Textarea,a as textareaVariants}from'./_chunks/chunk-OIAETOZT.js';import'./_chunks/chunk-4LGCF3SN.js';//# sourceMappingURL=Textarea.js.map
|
|
1
|
+
"use client";import{t as e}from"./variants-DTAwzBl3.js";import{cva as t}from"class-variance-authority";import{cn as n}from"@oztix/roadie-core/utils";import{jsx as r}from"react/jsx-runtime";const i=t(`w-full rounded-lg font-sans min-h-20 resize-y`,{variants:{intent:e,emphasis:{normal:`emphasis-sunken border border-subtle is-interactive-field`,subtle:`bg-subtle text-normal border border-transparent is-interactive-field`},size:{sm:`px-1.5 py-2 text-base`,md:`px-2 py-2.5 text-base`,lg:`px-2 py-3 text-base`}},defaultVariants:{emphasis:`normal`,size:`md`}});function a({className:e,intent:t,emphasis:a,size:o,autoResize:s,...c}){return r(`textarea`,{className:n(i({intent:t,emphasis:a,size:o}),s&&`[field-sizing:content] resize-none`,e),...c})}a.displayName=`Textarea`;export{a as Textarea,i as textareaVariants};
|
|
3
2
|
//# sourceMappingURL=Textarea.js.map
|
package/dist/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Textarea.js","names":[],"sources":["../src/components/Textarea/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps } from 'react'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@oztix/roadie-core/utils'\n\nimport { intentVariants } from '../../variants'\n\nexport const textareaVariants = cva(\n 'w-full rounded-lg font-sans min-h-20 resize-y',\n {\n variants: {\n intent: intentVariants,\n emphasis: {\n normal: 'emphasis-sunken border border-subtle is-interactive-field',\n subtle:\n 'bg-subtle text-normal border border-transparent is-interactive-field'\n },\n size: {\n sm: 'px-1.5 py-2 text-base',\n md: 'px-2 py-2.5 text-base',\n lg: 'px-2 py-3 text-base'\n }\n },\n defaultVariants: {\n emphasis: 'normal',\n size: 'md'\n }\n }\n)\n\nexport interface TextareaProps\n extends Omit<ComponentProps<'textarea'>, 'size'>,\n VariantProps<typeof textareaVariants> {\n autoResize?: boolean\n}\n\nexport function Textarea({\n className,\n intent,\n emphasis,\n size,\n autoResize,\n ...props\n}: TextareaProps) {\n return (\n <textarea\n className={cn(\n textareaVariants({ intent, emphasis, size }),\n autoResize && '[field-sizing:content] resize-none',\n className\n )}\n {...props}\n />\n )\n}\n\nTextarea.displayName = 'Textarea'\n"],"mappings":"6LAUA,MAAa,EAAmB,EAC9B,gDACA,CACE,SAAU,CACR,OAAQ,EACR,SAAU,CACR,OAAQ,4DACR,OACE,uEACH,CACD,KAAM,CACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,sBACL,CACF,CACD,gBAAiB,CACf,SAAU,SACV,KAAM,KACP,CACF,CACF,CAQD,SAAgB,EAAS,CACvB,YACA,SACA,WACA,OACA,aACA,GAAG,GACa,CAChB,OACE,EAAC,WAAD,CACE,UAAW,EACT,EAAiB,CAAE,SAAQ,WAAU,OAAM,CAAC,CAC5C,GAAc,qCACd,EACD,CACD,GAAI,EACJ,CAAA,CAIN,EAAS,YAAc"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { r as buttonVariants } from "./Button-Dt1TGgrL.js";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
import { ComponentProps, ElementType } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/LinkButton/LinkButton.d.ts
|
|
7
|
+
type LinkButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
8
|
+
type LinkButtonProps<T extends ElementType = 'a'> = {
|
|
9
|
+
as?: T;
|
|
10
|
+
intent?: VariantProps<typeof buttonVariants>['intent'];
|
|
11
|
+
emphasis?: VariantProps<typeof buttonVariants>['emphasis'];
|
|
12
|
+
size?: LinkButtonSize;
|
|
13
|
+
className?: string;
|
|
14
|
+
} & Omit<ComponentProps<T>, 'as' | 'intent' | 'emphasis' | 'size' | 'className'>;
|
|
15
|
+
declare function LinkButton<T extends ElementType = 'a'>({
|
|
16
|
+
as,
|
|
17
|
+
className,
|
|
18
|
+
intent,
|
|
19
|
+
emphasis,
|
|
20
|
+
size,
|
|
21
|
+
...props
|
|
22
|
+
}: LinkButtonProps<T>): _$react_jsx_runtime0.JSX.Element;
|
|
23
|
+
declare namespace LinkButton {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/components/LinkButton/LinkIconButton.d.ts
|
|
28
|
+
type LinkIconButtonSize = 'icon-xs' | 'icon-sm' | 'icon-md' | 'icon-lg';
|
|
29
|
+
type LinkIconButtonProps<T extends ElementType = 'a'> = {
|
|
30
|
+
as?: T;
|
|
31
|
+
'aria-label': string;
|
|
32
|
+
intent?: VariantProps<typeof buttonVariants>['intent'];
|
|
33
|
+
emphasis?: VariantProps<typeof buttonVariants>['emphasis'];
|
|
34
|
+
size?: LinkIconButtonSize;
|
|
35
|
+
className?: string;
|
|
36
|
+
} & Omit<ComponentProps<T>, 'as' | 'aria-label' | 'intent' | 'emphasis' | 'size' | 'className'>;
|
|
37
|
+
declare function LinkIconButton<T extends ElementType = 'a'>({
|
|
38
|
+
as,
|
|
39
|
+
className,
|
|
40
|
+
intent,
|
|
41
|
+
emphasis,
|
|
42
|
+
size,
|
|
43
|
+
...props
|
|
44
|
+
}: LinkIconButtonProps<T>): _$react_jsx_runtime0.JSX.Element;
|
|
45
|
+
declare namespace LinkIconButton {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
export { LinkButtonProps as i, LinkIconButtonProps as n, LinkButton as r, LinkIconButton as t };
|
|
50
|
+
//# sourceMappingURL=index-0w-ydb3o.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-0w-ydb3o.d.ts","names":[],"sources":["../src/components/LinkButton/LinkButton.tsx","../src/components/LinkButton/LinkIconButton.tsx"],"mappings":";;;;;;KAQK,cAAA;AAAA,KAEO,eAAA,WAA0B,WAAA;EACpC,EAAA,GAAK,CAAA;EACL,MAAA,GAAS,YAAA,QAAoB,cAAA;EAC7B,QAAA,GAAW,YAAA,QAAoB,cAAA;EAC/B,IAAA,GAAO,cAAA;EACP,SAAA;AAAA,IACE,IAAA,CAAK,cAAA,CAAe,CAAA;AAAA,iBAER,UAAA,WAAqB,WAAA,OAAA,CAAA;EACnC,EAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,eAAA,CAAgB,CAAA,IAAE,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAPL,UAAA;EAAA,IAAU,WAAA;AAAA;;;KCVrB,kBAAA;AAAA,KAEO,mBAAA,WAA8B,WAAA;EACxC,EAAA,GAAK,CAAA;EACL,YAAA;EACA,MAAA,GAAS,YAAA,QAAoB,cAAA;EAC7B,QAAA,GAAW,YAAA,QAAoB,cAAA;EAC/B,IAAA,GAAO,kBAAA;EACP,SAAA;AAAA,IACE,IAAA,CACF,cAAA,CAAe,CAAA;AAAA,iBAID,cAAA,WAAyB,WAAA,OAAA,CAAA;EACvC,EAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,CAAoB,CAAA,IAAE,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAPT,cAAA;EAAA,IAAc,WAAA;AAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { n as ButtonProps } from "./Button-Dt1TGgrL.js";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/Button/IconButton.d.ts
|
|
5
|
+
type IconButtonProps = Omit<ButtonProps, 'aria-label'> & {
|
|
6
|
+
'aria-label': string;
|
|
7
|
+
};
|
|
8
|
+
declare function IconButton({
|
|
9
|
+
size,
|
|
10
|
+
...props
|
|
11
|
+
}: IconButtonProps): _$react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare namespace IconButton {
|
|
13
|
+
var displayName: string;
|
|
14
|
+
}
|
|
15
|
+
//#endregion
|
|
16
|
+
export { IconButtonProps as n, IconButton as t };
|
|
17
|
+
//# sourceMappingURL=index-C3_4djmE.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-C3_4djmE.d.ts","names":[],"sources":["../src/components/Button/IconButton.tsx"],"mappings":";;;;KAIY,eAAA,GAAkB,IAAA,CAAK,WAAA;EACjC,YAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EAAa,IAAA;EAAA,GAAqB;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAA1D,UAAA;EAAA,IAAU,WAAA;AAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,53 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
import * as
|
|
26
|
-
import * as
|
|
27
|
-
|
|
28
|
-
export { ComboboxFilter as Filter, ComboboxFilterOptions as FilterOptions } from '@base-ui/react/combobox';
|
|
29
|
-
export { getThemeScript } from '@oztix/roadie-core/theme';
|
|
30
|
-
import 'class-variance-authority/types';
|
|
31
|
-
import '@base-ui/react/button';
|
|
32
|
-
import 'class-variance-authority';
|
|
33
|
-
import '@base-ui/react/select';
|
|
34
|
-
import '@base-ui/react/autocomplete';
|
|
35
|
-
import '@base-ui/react/radio';
|
|
36
|
-
import '@base-ui/react/radio-group';
|
|
1
|
+
import { Accordion, AccordionProps, accordionVariants } from "./Accordion.js";
|
|
2
|
+
import { Autocomplete, AutocompleteClearProps, AutocompleteCollectionProps, AutocompleteEmptyProps, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteInputGroupProps, AutocompleteInputProps, AutocompleteItemProps, AutocompleteListProps, AutocompletePopupProps, AutocompletePortalProps, AutocompletePositionerProps, AutocompleteProps, AutocompleteRootProps, AutocompleteStatusProps, AutocompleteTriggerProps, AutocompleteValueProps, autocompleteInputGroupVariants, useFilteredItems } from "./Autocomplete.js";
|
|
3
|
+
import { Badge, BadgeProps, badgeVariants } from "./Badge.js";
|
|
4
|
+
import { Breadcrumb, BreadcrumbSeparatorProps } from "./Breadcrumb.js";
|
|
5
|
+
import { n as ButtonProps, r as buttonVariants, t as Button } from "./Button-Dt1TGgrL.js";
|
|
6
|
+
import { n as IconButtonProps, t as IconButton } from "./index-C3_4djmE.js";
|
|
7
|
+
import { Card, CardProps, cardVariants } from "./Card.js";
|
|
8
|
+
import { Code, CodeProps, codeVariants } from "./Code.js";
|
|
9
|
+
import { Combobox, ComboboxClearProps, ComboboxCollectionProps, ComboboxEmptyProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputGroupProps, ComboboxInputProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxLabelProps, ComboboxListProps, ComboboxPopupProps, ComboboxPortalProps, ComboboxPositionerProps, ComboboxProps, ComboboxRootProps, ComboboxStatusProps, ComboboxTriggerProps, Filter as ComboboxFilter, FilterOptions as ComboboxFilterOptions, comboboxInputGroupVariants, useFilter } from "./Combobox.js";
|
|
10
|
+
import { Input, InputProps, inputVariants } from "./Input.js";
|
|
11
|
+
import { Label, LabelProps } from "./Label.js";
|
|
12
|
+
import { Textarea, TextareaProps, textareaVariants } from "./Textarea.js";
|
|
13
|
+
import { Field, FieldErrorTextProps, FieldHelperTextProps, FieldLabelProps, FieldProps, useFieldContext, useFieldInputProps } from "./Field.js";
|
|
14
|
+
import { Fieldset, FieldsetErrorTextProps, FieldsetHelperTextProps, FieldsetLegendProps, FieldsetProps } from "./Fieldset.js";
|
|
15
|
+
import { Mark, MarkProps, markVariants } from "./Mark.js";
|
|
16
|
+
import { Highlight, HighlightProps } from "./Highlight.js";
|
|
17
|
+
import { OptionalIndicator, OptionalIndicatorProps, RequiredIndicator, RequiredIndicatorProps } from "./Indicator.js";
|
|
18
|
+
import { i as LinkButtonProps, n as LinkIconButtonProps, r as LinkButton, t as LinkIconButton } from "./index-0w-ydb3o.js";
|
|
19
|
+
import { Marquee, MarqueeProps } from "./Marquee.js";
|
|
20
|
+
import { Prose, ProseProps, proseVariants } from "./Prose.js";
|
|
21
|
+
import { RadioGroup, RadioGroupErrorTextProps, RadioGroupHelperTextProps, RadioGroupItemProps, RadioGroupLabelProps, RadioGroupProps, radioGroupItemVariants, radioGroupVariants } from "./RadioGroup.js";
|
|
22
|
+
import { Select, SelectContentProps, SelectErrorTextProps, SelectGroupLabelProps, SelectGroupProps, SelectHelperTextProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectRootProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerProps, SelectValueProps, selectTriggerVariants } from "./Select.js";
|
|
23
|
+
import { Separator, SeparatorProps, separatorVariants } from "./Separator.js";
|
|
24
|
+
import { Steps, StepsItemProps, StepsProps, UseStepsProps, UseStepsReturn, stepsVariants, useSteps } from "./Steps.js";
|
|
25
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
26
|
+
import * as React from "react";
|
|
27
|
+
import { getThemeScript } from "@oztix/roadie-core/theme";
|
|
37
28
|
|
|
29
|
+
//#region src/providers/ThemeProvider.d.ts
|
|
38
30
|
interface ThemeContextType {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
accentColor: string;
|
|
32
|
+
setAccentColor: (color: string) => void;
|
|
33
|
+
isDark: boolean;
|
|
34
|
+
setDark: (dark: boolean) => void;
|
|
43
35
|
}
|
|
44
36
|
interface ThemeProviderProps {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
children: React.ReactNode;
|
|
38
|
+
defaultAccentColor?: string;
|
|
39
|
+
/** Initial dark mode state when no stored preference exists (default: false) */
|
|
40
|
+
defaultDark?: boolean;
|
|
41
|
+
/** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */
|
|
42
|
+
followSystem?: boolean;
|
|
51
43
|
}
|
|
52
44
|
/**
|
|
53
45
|
* Generate a <style> tag string for server-side rendering.
|
|
@@ -55,7 +47,13 @@ interface ThemeProviderProps {
|
|
|
55
47
|
* plus hex fallbacks for older browsers.
|
|
56
48
|
*/
|
|
57
49
|
declare function getAccentStyleTag(accentHex: string, id?: string): Promise<string>;
|
|
58
|
-
declare function ThemeProvider({
|
|
50
|
+
declare function ThemeProvider({
|
|
51
|
+
children,
|
|
52
|
+
defaultAccentColor,
|
|
53
|
+
defaultDark,
|
|
54
|
+
followSystem
|
|
55
|
+
}: ThemeProviderProps): _$react_jsx_runtime0.JSX.Element;
|
|
59
56
|
declare function useTheme(): ThemeContextType;
|
|
60
|
-
|
|
61
|
-
export { ThemeProvider, type ThemeProviderProps, getAccentStyleTag, useTheme };
|
|
57
|
+
//#endregion
|
|
58
|
+
export { Accordion, type AccordionProps, Autocomplete, type AutocompleteClearProps, type AutocompleteCollectionProps, type AutocompleteEmptyProps, type AutocompleteGroupLabelProps, type AutocompleteGroupProps, type AutocompleteInputGroupProps, type AutocompleteInputProps, type AutocompleteItemProps, type AutocompleteListProps, type AutocompletePopupProps, type AutocompletePortalProps, type AutocompletePositionerProps, type AutocompleteProps, type AutocompleteRootProps, type AutocompleteStatusProps, type AutocompleteTriggerProps, type AutocompleteValueProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbSeparatorProps, Button, type ButtonProps, Card, type CardProps, Code, type CodeProps, Combobox, type ComboboxClearProps, type ComboboxCollectionProps, type ComboboxEmptyProps, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemIndicatorProps, type ComboboxItemProps, type ComboboxLabelProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, type ComboboxRootProps, type ComboboxStatusProps, type ComboboxTriggerProps, Field, type FieldErrorTextProps, type FieldHelperTextProps, type FieldLabelProps, type FieldProps, Fieldset, type FieldsetErrorTextProps, type FieldsetHelperTextProps, type FieldsetLegendProps, type FieldsetProps, type ComboboxFilter as Filter, type ComboboxFilterOptions as FilterOptions, Highlight, type HighlightProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LinkButton, type LinkButtonProps, LinkIconButton, type LinkIconButtonProps, Mark, type MarkProps, Marquee, type MarqueeProps, OptionalIndicator, type OptionalIndicatorProps, Prose, type ProseProps, RadioGroup, type RadioGroupErrorTextProps, type RadioGroupHelperTextProps, type RadioGroupItemProps, type RadioGroupLabelProps, type RadioGroupProps, RequiredIndicator, type RequiredIndicatorProps, Select, type SelectContentProps, type SelectErrorTextProps, type SelectGroupLabelProps, type SelectGroupProps, type SelectHelperTextProps, type SelectIconProps, type SelectItemIndicatorProps, type SelectItemProps, type SelectItemTextProps, type SelectLabelProps, type SelectPopupProps, type SelectPortalProps, type SelectPositionerProps, type SelectProps, type SelectRootProps, type SelectScrollDownArrowProps, type SelectScrollUpArrowProps, type SelectTriggerProps, type SelectValueProps, Separator, type SeparatorProps, Steps, type StepsItemProps, type StepsProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, type UseStepsProps, type UseStepsReturn, accordionVariants, autocompleteInputGroupVariants, badgeVariants, buttonVariants, cardVariants, codeVariants, comboboxInputGroupVariants, getAccentStyleTag, getThemeScript, inputVariants, markVariants, proseVariants, radioGroupItemVariants, radioGroupVariants, selectTriggerVariants, separatorVariants, stepsVariants, textareaVariants, useFieldContext, useFieldInputProps, useFilter, useFilteredItems, useSteps, useTheme };
|
|
59
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/providers/ThemeProvider.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyBU,gBAAA;EACR,WAAA;EACA,cAAA,GAAiB,KAAA;EACjB,MAAA;EACA,OAAA,GAAU,IAAA;AAAA;AAAA,UAOK,kBAAA;EACf,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,kBAAA;;EAEA,WAAA;;EAEA,YAAA;AAAA;;;;;;iBAYoB,iBAAA,CACpB,SAAA,UACA,EAAA,YACC,OAAA;AAAA,iBAiEa,aAAA,CAAA;EACd,QAAA;EACA,kBAAA;EACA,WAAA;EACA;AAAA,GACC,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoIL,QAAA,CAAA,GAAQ,gBAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
`),s=
|
|
3
|
-
`),
|
|
4
|
-
`),
|
|
5
|
-
`);return
|
|
1
|
+
import{n as e,t}from"./Button-CDQ6ik0P.js";import{t as n}from"./Button-DdE0vCfo.js";import{n as r,t as i}from"./LinkButton-9nnOzX_0.js";import{Code as a,codeVariants as o}from"./Code.js";import{Mark as s,markVariants as c}from"./Mark.js";import{Highlight as l}from"./Highlight.js";import{Prose as u,proseVariants as d}from"./Prose.js";import{Accordion as ee,accordionVariants as f}from"./Accordion.js";import{Badge as p,badgeVariants as m}from"./Badge.js";import{Breadcrumb as h}from"./Breadcrumb.js";import{Card as g,cardVariants as _}from"./Card.js";import{Separator as te,separatorVariants as ne}from"./Separator.js";import{Marquee as v}from"./Marquee.js";import{Steps as y,stepsVariants as b,useSteps as x}from"./Steps.js";import{OptionalIndicator as S,RequiredIndicator as C}from"./Indicator.js";import{Label as w}from"./Label.js";import{Input as T,inputVariants as E}from"./Input.js";import{Textarea as D,textareaVariants as O}from"./Textarea.js";import{Field as k,useFieldContext as A,useFieldInputProps as j}from"./Field.js";import{Select as M,selectTriggerVariants as N}from"./Select.js";import{Combobox as P,comboboxInputGroupVariants as F,useFilter as I}from"./Combobox.js";import{Autocomplete as re,autocompleteInputGroupVariants as L,useFilteredItems as R}from"./Autocomplete.js";import{RadioGroup as z,radioGroupItemVariants as B,radioGroupVariants as V}from"./RadioGroup.js";import{Fieldset as H}from"./Fieldset.js";import{jsx as U}from"react/jsx-runtime";import*as W from"react";import{generateAccentScale as G,generateNeutralScale as K,getOklchChroma as q,getOklchHue as J}from"@oztix/roadie-core/colors";import{getThemeScript as Y}from"@oztix/roadie-core/theme";const X=`theme`,ie=typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`color`,`oklch(0 0 0)`),Z=W.createContext(void 0);async function ae(e,t=`roadie-accent-theme`){let n=await G(e),r=await K(e),i=Math.round(await J(e)),a=+(await q(e)).toFixed(4),o=n.light.map((e,t)=>`--color-accent-${t}: ${e};`).join(`
|
|
2
|
+
`),s=n.dark.map((e,t)=>`--color-accent-${t}: ${e};`).join(`
|
|
3
|
+
`),c=r.light.map((e,t)=>`--color-neutral-${t}: ${e};`).join(`
|
|
4
|
+
`),l=r.dark.map((e,t)=>`--color-neutral-${t}: ${e};`).join(`
|
|
5
|
+
`);return`<style id="${t.replace(/[<>"&]/g,``)}">
|
|
6
6
|
:root {
|
|
7
|
-
--accent-hue: ${
|
|
8
|
-
--accent-chroma: ${
|
|
9
|
-
${
|
|
10
|
-
${
|
|
7
|
+
--accent-hue: ${i};
|
|
8
|
+
--accent-chroma: ${a};
|
|
9
|
+
${c}
|
|
10
|
+
${o}
|
|
11
11
|
}
|
|
12
12
|
.dark {
|
|
13
|
-
${
|
|
13
|
+
${l}
|
|
14
14
|
${s}
|
|
15
15
|
}
|
|
16
|
-
</style>`}function
|
|
16
|
+
</style>`}function Q(e){document.documentElement.classList.toggle(`dark`,e),document.documentElement.style.colorScheme=e?`dark`:`light`}function $(){try{return localStorage.getItem(X)}catch{return null}}function oe(e){try{localStorage.setItem(X,e?`dark`:`light`)}catch{}}function se({children:e,defaultAccentColor:t=`#0091EB`,defaultDark:n=!1,followSystem:r=!1}){let[i,a]=W.useState(t),[o,s]=W.useState(n);W.useEffect(()=>{let e=$();if(e){s(e===`dark`);return}if(r){let e=window.matchMedia(`(prefers-color-scheme: dark)`).matches;s(e),Q(e)}else s(document.documentElement.classList.contains(`dark`))},[]),W.useEffect(()=>{if(!r)return;let e=window.matchMedia(`(prefers-color-scheme: dark)`),t=e=>{$()||(s(e.matches),Q(e.matches))};return e.addEventListener(`change`,t),()=>e.removeEventListener(`change`,t)},[r]);let c=W.useCallback(e=>{s(e),Q(e),oe(e)},[]);W.useEffect(()=>{let e=!1;async function t(){let t=Math.round(await J(i)),n=+(await q(i)).toFixed(4);if(e||document.getElementById(`roadie-accent-theme`)?.textContent?.includes(`--accent-hue: ${t}`))return;let r;if(ie)r=`
|
|
17
17
|
:root {
|
|
18
|
-
--accent-hue: ${
|
|
19
|
-
--accent-chroma: ${
|
|
18
|
+
--accent-hue: ${t};
|
|
19
|
+
--accent-chroma: ${n};
|
|
20
20
|
}
|
|
21
|
-
`;else
|
|
22
|
-
`),
|
|
23
|
-
`)
|
|
24
|
-
`),F=g.dark.map((n,c)=>`--color-neutral-${c}: ${n};`).join(`
|
|
25
|
-
`);f=`
|
|
21
|
+
`;else{let t=await G(i),n=await K(i);if(e)return;let a=t.light.map((e,t)=>`--color-accent-${t}: ${e};`).join(`
|
|
22
|
+
`),o=t.dark.map((e,t)=>`--color-accent-${t}: ${e};`).join(`
|
|
23
|
+
`);r=`
|
|
26
24
|
:root {
|
|
27
|
-
${
|
|
28
|
-
|
|
25
|
+
${n.light.map((e,t)=>`--color-neutral-${t}: ${e};`).join(`
|
|
26
|
+
`)}
|
|
27
|
+
${a}
|
|
29
28
|
}
|
|
30
29
|
.dark {
|
|
31
|
-
${
|
|
32
|
-
|
|
30
|
+
${n.dark.map((e,t)=>`--color-neutral-${t}: ${e};`).join(`
|
|
31
|
+
`)}
|
|
32
|
+
${o}
|
|
33
33
|
}
|
|
34
|
-
|
|
34
|
+
`}let a=document.getElementById(`roadie-accent-theme`);a||(a=document.createElement(`style`),a.id=`roadie-accent-theme`,document.head.appendChild(a)),a.textContent=r}return t(),()=>{e=!0}},[i]);let l=W.useMemo(()=>({accentColor:i,setAccentColor:a,isDark:o,setDark:c}),[i,o,c]);return U(Z.Provider,{value:l,children:e})}function ce(){let e=W.useContext(Z);if(!e)throw Error(`useTheme must be used within a ThemeProvider`);return e}export{ee as Accordion,re as Autocomplete,p as Badge,h as Breadcrumb,t as Button,g as Card,a as Code,P as Combobox,k as Field,H as Fieldset,l as Highlight,n as IconButton,T as Input,w as Label,r as LinkButton,i as LinkIconButton,s as Mark,v as Marquee,S as OptionalIndicator,u as Prose,z as RadioGroup,C as RequiredIndicator,M as Select,te as Separator,y as Steps,D as Textarea,se as ThemeProvider,f as accordionVariants,L as autocompleteInputGroupVariants,m as badgeVariants,e as buttonVariants,_ as cardVariants,o as codeVariants,F as comboboxInputGroupVariants,ae as getAccentStyleTag,Y as getThemeScript,E as inputVariants,c as markVariants,d as proseVariants,B as radioGroupItemVariants,V as radioGroupVariants,N as selectTriggerVariants,ne as separatorVariants,b as stepsVariants,O as textareaVariants,A as useFieldContext,j as useFieldInputProps,I as useFilter,R as useFilteredItems,x as useSteps,ce as useTheme};
|
|
35
35
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/providers/ThemeProvider.tsx"],"names":["DEFAULT_ACCENT","THEME_STORAGE_KEY","supportsOklch","ThemeContext","getAccentStyleTag","accentHex","id","result","generateAccentScale","neutral","generateNeutralScale","hue","getOklchHue","chroma","getOklchChroma","accentVars","hex","i","darkAccentVars","neutralVars","darkNeutralVars","applyDark","dark","getStoredTheme","storeTheme","ThemeProvider","children","defaultAccentColor","defaultDark","followSystem","accentColor","setAccentColor","isDark","setIsDarkState","stored","prefersDark","domDark","mq","handler","e","setDark","cancelled","updateAccent","css","style","value","jsx","useTheme","context"],"mappings":"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","file":"index.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n generateAccentScale,\n generateNeutralScale,\n getOklchChroma,\n getOklchHue\n} from '@oztix/roadie-core/colors'\n\nexport { getThemeScript } from '@oztix/roadie-core/theme'\n\nconst DEFAULT_ACCENT = '#0091EB' // Oztix Blue\nconst THEME_STORAGE_KEY = 'theme'\n\nconst supportsOklch =\n typeof CSS !== 'undefined' &&\n typeof CSS.supports === 'function' &&\n CSS.supports('color', 'oklch(0 0 0)')\n\n// ---------------------------------------------------------------------------\n// Theme context (accent color + dark mode)\n// ---------------------------------------------------------------------------\n\ninterface ThemeContextType {\n accentColor: string\n setAccentColor: (color: string) => void\n isDark: boolean\n setDark: (dark: boolean) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(\n undefined\n)\n\nexport interface ThemeProviderProps {\n children: React.ReactNode\n defaultAccentColor?: string\n /** Initial dark mode state when no stored preference exists (default: false) */\n defaultDark?: boolean\n /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */\n followSystem?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// SSR helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Generate a <style> tag string for server-side rendering.\n * Sets --accent-hue and --accent-chroma for CSS-native theming,\n * plus hex fallbacks for older browsers.\n */\nexport async function getAccentStyleTag(\n accentHex: string,\n id = 'roadie-accent-theme'\n): Promise<string> {\n const result = await generateAccentScale(accentHex)\n const neutral = await generateNeutralScale(accentHex)\n const hue = Math.round(await getOklchHue(accentHex))\n const chroma = +(await getOklchChroma(accentHex)).toFixed(4)\n\n // Hex fallbacks for accent (non-oklch browsers)\n const accentVars = result.light\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n ')\n const darkAccentVars = result.dark\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n ')\n // Hex fallbacks for neutral (non-oklch browsers)\n const neutralVars = neutral.light\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n ')\n const darkNeutralVars = neutral.dark\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n ')\n\n const safeId = id.replace(/[<>\"&]/g, '')\n return `<style id=\"${safeId}\">\n :root {\n --accent-hue: ${hue};\n --accent-chroma: ${chroma};\n ${neutralVars}\n ${accentVars}\n }\n .dark {\n ${darkNeutralVars}\n ${darkAccentVars}\n }\n</style>`\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode helpers\n// ---------------------------------------------------------------------------\n\nfunction applyDark(dark: boolean) {\n document.documentElement.classList.toggle('dark', dark)\n document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): string | null {\n try {\n return localStorage.getItem(THEME_STORAGE_KEY)\n } catch {\n return null\n }\n}\n\nfunction storeTheme(dark: boolean) {\n try {\n localStorage.setItem(THEME_STORAGE_KEY, dark ? 'dark' : 'light')\n } catch {\n // localStorage unavailable\n }\n}\n\n// ---------------------------------------------------------------------------\n// ThemeProvider\n// ---------------------------------------------------------------------------\n\nexport function ThemeProvider({\n children,\n defaultAccentColor = DEFAULT_ACCENT,\n defaultDark = false,\n followSystem = false\n}: ThemeProviderProps) {\n const [accentColor, setAccentColor] = React.useState(defaultAccentColor)\n\n // Initialise dark mode from prop — inline script may have already set .dark\n const [isDark, setIsDarkState] = React.useState(defaultDark)\n\n // Sync with DOM on mount\n React.useEffect(() => {\n const stored = getStoredTheme()\n if (stored) {\n setIsDarkState(stored === 'dark')\n return\n }\n\n // No stored preference — check OS preference or DOM state\n if (followSystem) {\n const prefersDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches\n setIsDarkState(prefersDark)\n applyDark(prefersDark)\n } else {\n const domDark = document.documentElement.classList.contains('dark')\n setIsDarkState(domDark)\n }\n }, []) // mount-only: followSystem/defaultDark are expected to be static\n\n // Listen for OS preference changes when followSystem is true\n React.useEffect(() => {\n if (!followSystem) return\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n // Only follow system if user hasn't explicitly chosen\n if (getStoredTheme()) return\n setIsDarkState(e.matches)\n applyDark(e.matches)\n }\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [followSystem])\n\n // Explicit toggle — persists to localStorage and applies to DOM\n const setDark = React.useCallback((dark: boolean) => {\n setIsDarkState(dark)\n applyDark(dark)\n storeTheme(dark)\n }, [])\n\n // Accent color effect — skip if SSR already injected matching values\n React.useEffect(() => {\n let cancelled = false\n\n async function updateAccent() {\n const hue = Math.round(await getOklchHue(accentColor))\n const chroma = +(await getOklchChroma(accentColor)).toFixed(4)\n\n if (cancelled) return\n\n // Skip regeneration if existing style tag already has matching values\n const existing = document.getElementById('roadie-accent-theme')\n if (existing?.textContent?.includes(`--accent-hue: ${hue}`)) {\n return\n }\n\n let css: string\n\n if (supportsOklch) {\n css = `\n :root {\n --accent-hue: ${hue};\n --accent-chroma: ${chroma};\n }\n `\n } else {\n const result = await generateAccentScale(accentColor)\n const neutral = await generateNeutralScale(accentColor)\n\n if (cancelled) return\n\n const accentVars = result.light\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n')\n const darkAccentVars = result.dark\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n')\n const neutralVars = neutral.light\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n')\n const darkNeutralVars = neutral.dark\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n')\n\n css = `\n :root {\n ${neutralVars}\n ${accentVars}\n }\n .dark {\n ${darkNeutralVars}\n ${darkAccentVars}\n }\n `\n }\n\n let style = document.getElementById('roadie-accent-theme')\n if (!style) {\n style = document.createElement('style')\n style.id = 'roadie-accent-theme'\n document.head.appendChild(style)\n }\n style.textContent = css\n }\n\n updateAccent()\n return () => {\n cancelled = true\n }\n }, [accentColor])\n\n const value = React.useMemo(\n () => ({ accentColor, setAccentColor, isDark, setDark }),\n [accentColor, isDark, setDark]\n )\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\nexport function useTheme() {\n const context = React.useContext(ThemeContext)\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider')\n }\n return context\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/providers/ThemeProvider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n generateAccentScale,\n generateNeutralScale,\n getOklchChroma,\n getOklchHue\n} from '@oztix/roadie-core/colors'\n\nexport { getThemeScript } from '@oztix/roadie-core/theme'\n\nconst DEFAULT_ACCENT = '#0091EB' // Oztix Blue\nconst THEME_STORAGE_KEY = 'theme'\n\nconst supportsOklch =\n typeof CSS !== 'undefined' &&\n typeof CSS.supports === 'function' &&\n CSS.supports('color', 'oklch(0 0 0)')\n\n// ---------------------------------------------------------------------------\n// Theme context (accent color + dark mode)\n// ---------------------------------------------------------------------------\n\ninterface ThemeContextType {\n accentColor: string\n setAccentColor: (color: string) => void\n isDark: boolean\n setDark: (dark: boolean) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(\n undefined\n)\n\nexport interface ThemeProviderProps {\n children: React.ReactNode\n defaultAccentColor?: string\n /** Initial dark mode state when no stored preference exists (default: false) */\n defaultDark?: boolean\n /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */\n followSystem?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// SSR helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Generate a <style> tag string for server-side rendering.\n * Sets --accent-hue and --accent-chroma for CSS-native theming,\n * plus hex fallbacks for older browsers.\n */\nexport async function getAccentStyleTag(\n accentHex: string,\n id = 'roadie-accent-theme'\n): Promise<string> {\n const result = await generateAccentScale(accentHex)\n const neutral = await generateNeutralScale(accentHex)\n const hue = Math.round(await getOklchHue(accentHex))\n const chroma = +(await getOklchChroma(accentHex)).toFixed(4)\n\n // Hex fallbacks for accent (non-oklch browsers)\n const accentVars = result.light\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n ')\n const darkAccentVars = result.dark\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n ')\n // Hex fallbacks for neutral (non-oklch browsers)\n const neutralVars = neutral.light\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n ')\n const darkNeutralVars = neutral.dark\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n ')\n\n const safeId = id.replace(/[<>\"&]/g, '')\n return `<style id=\"${safeId}\">\n :root {\n --accent-hue: ${hue};\n --accent-chroma: ${chroma};\n ${neutralVars}\n ${accentVars}\n }\n .dark {\n ${darkNeutralVars}\n ${darkAccentVars}\n }\n</style>`\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode helpers\n// ---------------------------------------------------------------------------\n\nfunction applyDark(dark: boolean) {\n document.documentElement.classList.toggle('dark', dark)\n document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): string | null {\n try {\n return localStorage.getItem(THEME_STORAGE_KEY)\n } catch {\n return null\n }\n}\n\nfunction storeTheme(dark: boolean) {\n try {\n localStorage.setItem(THEME_STORAGE_KEY, dark ? 'dark' : 'light')\n } catch {\n // localStorage unavailable\n }\n}\n\n// ---------------------------------------------------------------------------\n// ThemeProvider\n// ---------------------------------------------------------------------------\n\nexport function ThemeProvider({\n children,\n defaultAccentColor = DEFAULT_ACCENT,\n defaultDark = false,\n followSystem = false\n}: ThemeProviderProps) {\n const [accentColor, setAccentColor] = React.useState(defaultAccentColor)\n\n // Initialise dark mode from prop — inline script may have already set .dark\n const [isDark, setIsDarkState] = React.useState(defaultDark)\n\n // Sync with DOM on mount\n React.useEffect(() => {\n const stored = getStoredTheme()\n if (stored) {\n setIsDarkState(stored === 'dark')\n return\n }\n\n // No stored preference — check OS preference or DOM state\n if (followSystem) {\n const prefersDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches\n setIsDarkState(prefersDark)\n applyDark(prefersDark)\n } else {\n const domDark = document.documentElement.classList.contains('dark')\n setIsDarkState(domDark)\n }\n }, []) // mount-only: followSystem/defaultDark are expected to be static\n\n // Listen for OS preference changes when followSystem is true\n React.useEffect(() => {\n if (!followSystem) return\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n // Only follow system if user hasn't explicitly chosen\n if (getStoredTheme()) return\n setIsDarkState(e.matches)\n applyDark(e.matches)\n }\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [followSystem])\n\n // Explicit toggle — persists to localStorage and applies to DOM\n const setDark = React.useCallback((dark: boolean) => {\n setIsDarkState(dark)\n applyDark(dark)\n storeTheme(dark)\n }, [])\n\n // Accent color effect — skip if SSR already injected matching values\n React.useEffect(() => {\n let cancelled = false\n\n async function updateAccent() {\n const hue = Math.round(await getOklchHue(accentColor))\n const chroma = +(await getOklchChroma(accentColor)).toFixed(4)\n\n if (cancelled) return\n\n // Skip regeneration if existing style tag already has matching values\n const existing = document.getElementById('roadie-accent-theme')\n if (existing?.textContent?.includes(`--accent-hue: ${hue}`)) {\n return\n }\n\n let css: string\n\n if (supportsOklch) {\n css = `\n :root {\n --accent-hue: ${hue};\n --accent-chroma: ${chroma};\n }\n `\n } else {\n const result = await generateAccentScale(accentColor)\n const neutral = await generateNeutralScale(accentColor)\n\n if (cancelled) return\n\n const accentVars = result.light\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n')\n const darkAccentVars = result.dark\n .map((hex, i) => `--color-accent-${i}: ${hex};`)\n .join('\\n')\n const neutralVars = neutral.light\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n')\n const darkNeutralVars = neutral.dark\n .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n .join('\\n')\n\n css = `\n :root {\n ${neutralVars}\n ${accentVars}\n }\n .dark {\n ${darkNeutralVars}\n ${darkAccentVars}\n }\n `\n }\n\n let style = document.getElementById('roadie-accent-theme')\n if (!style) {\n style = document.createElement('style')\n style.id = 'roadie-accent-theme'\n document.head.appendChild(style)\n }\n style.textContent = css\n }\n\n updateAccent()\n return () => {\n cancelled = true\n }\n }, [accentColor])\n\n const value = React.useMemo(\n () => ({ accentColor, setAccentColor, isDark, setDark }),\n [accentColor, isDark, setDark]\n )\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\nexport function useTheme() {\n const context = React.useContext(ThemeContext)\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider')\n }\n return context\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variants-DTAwzBl3.js","names":[],"sources":["../src/variants.ts"],"sourcesContent":["/**\n * Shared CVA variant maps used across multiple components.\n */\nexport const intentVariants = {\n neutral: 'intent-neutral',\n brand: 'intent-brand',\n 'brand-secondary': 'intent-brand-secondary',\n accent: 'intent-accent',\n danger: 'intent-danger',\n success: 'intent-success',\n warning: 'intent-warning',\n info: 'intent-info'\n} as const\n"],"mappings":"AAGA,MAAa,EAAiB,CAC5B,QAAS,iBACT,MAAO,eACP,kBAAmB,yBACnB,OAAQ,gBACR,OAAQ,gBACR,QAAS,iBACT,QAAS,iBACT,KAAM,cACP"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oztix/roadie-components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "React components for the Roadie Design System",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -29,18 +29,21 @@
|
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"@ark-ui/react": "^5.0.0",
|
|
32
|
+
"@base-ui/react": "^1.0.0",
|
|
33
|
+
"class-variance-authority": "^0.7.1",
|
|
32
34
|
"@phosphor-icons/react": "^2.0.0",
|
|
33
35
|
"react": "^19.0.0",
|
|
34
36
|
"react-dom": "^19.0.0"
|
|
35
37
|
},
|
|
36
38
|
"dependencies": {
|
|
37
|
-
"@
|
|
38
|
-
"class-variance-authority": "^0.7.1",
|
|
39
|
-
"@oztix/roadie-core": "2.0.0"
|
|
39
|
+
"@oztix/roadie-core": "2.0.1"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
+
"@arethetypeswrong/cli": "0.18.2",
|
|
42
43
|
"@ark-ui/react": "5.35.0",
|
|
43
|
-
"@
|
|
44
|
+
"@base-ui/react": "1.3.0",
|
|
45
|
+
"class-variance-authority": "0.7.1",
|
|
46
|
+
"@phosphor-icons/react": "2.1.10",
|
|
44
47
|
"@size-limit/preset-small-lib": "12.0.1",
|
|
45
48
|
"@testing-library/jest-dom": "6.9.1",
|
|
46
49
|
"@testing-library/react": "16.3.0",
|
|
@@ -54,7 +57,7 @@
|
|
|
54
57
|
"jsdom": "27.0.1",
|
|
55
58
|
"size-limit": "12.0.1",
|
|
56
59
|
"svgo": "4.0.0",
|
|
57
|
-
"
|
|
60
|
+
"tsdown": "0.21.7",
|
|
58
61
|
"vitest": "4.0.4"
|
|
59
62
|
},
|
|
60
63
|
"author": {
|
|
@@ -73,10 +76,13 @@
|
|
|
73
76
|
}
|
|
74
77
|
},
|
|
75
78
|
"scripts": {
|
|
76
|
-
"build": "
|
|
79
|
+
"build": "tsdown && pnpm check:dts && pnpm check:exports",
|
|
80
|
+
"build:quiet": "tsdown --log-level warn",
|
|
81
|
+
"check:dts": "! grep -r 'ComponentProps<typeof' dist/*.d.ts dist/**/*.d.ts 2>/dev/null || (echo 'ERROR: dist .d.ts files contain ComponentProps<typeof> — use named prop types instead' && exit 1)",
|
|
82
|
+
"check:exports": "attw --pack . --profile esm-only",
|
|
77
83
|
"build:spotillustration": "node scripts/svg-to-spot-illustration.cjs",
|
|
78
84
|
"clean": "rm -rf node_modules dist",
|
|
79
|
-
"dev": "
|
|
85
|
+
"dev": "tsdown --watch --log-level warn",
|
|
80
86
|
"test": "vitest run",
|
|
81
87
|
"test:watch": "vitest",
|
|
82
88
|
"test:coverage": "vitest run --coverage",
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
-
import { ComponentProps } from 'react';
|
|
4
|
-
import { Button as Button$1 } from '@base-ui/react/button';
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
declare const buttonVariants: (props?: ({
|
|
8
|
-
intent?: "neutral" | "brand" | "brand-secondary" | "accent" | "danger" | "success" | "warning" | "info" | null | undefined;
|
|
9
|
-
emphasis?: "strong" | "normal" | "subtle" | "subtler" | null | undefined;
|
|
10
|
-
size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
|
|
11
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
|
-
interface ButtonProps extends ComponentProps<typeof Button$1>, VariantProps<typeof buttonVariants> {
|
|
13
|
-
}
|
|
14
|
-
declare function Button({ className, intent, emphasis, size, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
15
|
-
declare namespace Button {
|
|
16
|
-
var displayName: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { Button as B, type ButtonProps as a, buttonVariants as b };
|
package/dist/Button.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"Button.js"}
|
package/dist/LinkButton.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"LinkButton.js"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import {useRef,useEffect,useCallback}from'react';import {Steps}from'@ark-ui/react/steps';export{useSteps as a}from'@ark-ui/react/steps';import {CheckIcon}from'@phosphor-icons/react';import {cva}from'class-variance-authority';import {cn}from'@oztix/roadie-core/utils';import {jsx,jsxs}from'react/jsx-runtime';var R=cva("grid w-full gap-4",{variants:{direction:{horizontal:"",vertical:"grid-cols-[auto_1fr] gap-3"}},defaultVariants:{direction:"horizontal"}});function d({direction:t,className:e,...a}){return jsx(Steps.Root,{orientation:t==="vertical"?"vertical":"horizontal",className:cn(R({direction:t,className:e})),...a})}d.displayName="Steps";function m({className:t,...e}){return jsx(Steps.List,{className:cn("flex items-start justify-start rounded-xl bg-subtler px-4 py-3","data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-2",t),...e})}m.displayName="Steps.List";function g({className:t,invalid:e,...a}){let T=Steps.Item,i=useRef(null),l=useRef(e);useEffect(()=>{if(e&&!l.current){let n=i.current?.querySelector('[data-part="trigger"]');n&&(n.classList.remove("animate-shake"),n.offsetWidth,n.classList.add("animate-shake"));}l.current=e;},[e]);let N=useCallback(n=>{let p=n.currentTarget.querySelector('[data-part="trigger"]');!p||!(p.getAttribute("tabindex")==="-1"&&p.hasAttribute("data-incomplete"))||(p.classList.remove("animate-shake"),p.offsetWidth,p.classList.add("animate-shake"));},[]);return jsx(T,{ref:i,className:cn("group/step-item flex flex-1 items-center last:flex-none","data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",t),"data-invalid":e||void 0,onClick:N,...a})}g.displayName="Steps.Item";function u({className:t,...e}){return jsx(Steps.Trigger,{className:cn("group/step flex cursor-pointer flex-col items-center gap-1 rounded-md border-none bg-transparent px-3 py-3 transition-all duration-200 ease-out","data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-2","data-current:intent-accent",t),...e})}u.displayName="Steps.Trigger";function f({className:t,children:e,...a}){return jsxs(Steps.Indicator,{className:cn("flex size-10 shrink-0 items-center justify-center rounded-full border text-lg font-black outline-0 outline-offset-0 outline-[color-mix(in_oklch,var(--color-accent-9)_var(--focus-ring-opacity),transparent)] transition-all duration-200 ease-out","border-subtle bg-raised text-subtler","group-hover/step:outline-[length:var(--focus-ring-width)]","data-current:border-normal data-current:bg-subtle data-current:text-subtle","data-complete:emphasis-strong","group-data-invalid/step-item:emphasis-normal group-data-invalid/step-item:border-normal group-data-invalid/step-item:bg-subtle group-data-invalid/step-item:text-subtle group-data-invalid/step-item:intent-danger",t),...a,children:[jsx("span",{className:"group-data-complete/step:hidden group-data-invalid/step-item:!block",children:e}),jsx(CheckIcon,{weight:"bold",className:"hidden size-5 group-data-complete/step:block group-data-invalid/step-item:!hidden"})]})}f.displayName="Steps.Indicator";function S({className:t,...e}){return jsx(Steps.Separator,{className:cn("h-0.5 flex-1 bg-subtle transition-all duration-200 ease-out md:bottom-0 md:translate-y-5.5","data-complete:bg-strong","data-[orientation=vertical]:ml-4 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-0.5",t),...e})}S.displayName="Steps.Separator";function P({className:t,...e}){let a=Steps.Content;return jsx(a,{className:cn(t),...e})}P.displayName="Steps.Content";function v({className:t,...e}){return jsx(Steps.CompletedContent,{className:cn(t),...e})}v.displayName="Steps.CompletedContent";function x({className:t,...e}){return jsx(Steps.NextTrigger,{className:cn(t),...e})}x.displayName="Steps.NextTrigger";function y({className:t,...e}){return jsx(Steps.PrevTrigger,{className:cn(t),...e})}y.displayName="Steps.PrevTrigger";function C({className:t,...e}){return jsx(Steps.Progress,{className:cn("relative h-1 w-full overflow-hidden rounded-sm bg-subtle","after:absolute after:inset-y-0 after:left-0 after:w-[calc(var(--percent)*1%)] after:bg-strong after:transition-[width] after:duration-300 after:ease-out",t),...e})}C.displayName="Steps.Progress";function b({className:t,...e}){return jsx("span",{className:cn("hidden text-sm font-bold md:block","group-data-incomplete/step:text-subtle","group-data-current/step:text-subtle","group-data-complete/step:text-normal","group-data-invalid/step-item:text-subtle group-data-invalid/step-item:intent-danger",t),...e})}b.displayName="Steps.TriggerText";var U=Object.assign(d,{List:m,Item:g,Trigger:u,TriggerText:b,Indicator:f,Separator:S,Content:P,CompletedContent:v,NextTrigger:x,PrevTrigger:y,Progress:C,Context:Steps.Context,ItemContext:Steps.ItemContext,RootProvider:Steps.RootProvider});export{R as b,U as c};//# sourceMappingURL=chunk-2MBFDJ6K.js.map
|
|
3
|
-
//# sourceMappingURL=chunk-2MBFDJ6K.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Steps/index.tsx"],"names":["stepsVariants","cva","StepsRoot","direction","className","props","jsx","ArkSteps","cn","StepsList","StepsItem","invalid","Item","itemRef","useRef","prevInvalid","useEffect","trigger","handleClick","useCallback","e","StepsTrigger","StepsIndicator","children","jsxs","CheckIcon","StepsSeparator","StepsContent","Content","StepsCompletedContent","StepsNextTrigger","StepsPrevTrigger","StepsProgress","StepsTriggerText","Steps"],"mappings":"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","file":"chunk-2MBFDJ6K.js","sourcesContent":["'use client'\n\nimport { type ComponentProps, useCallback, useEffect, useRef } from 'react'\n\nimport {\n Steps as ArkSteps,\n type UseStepsProps,\n type UseStepsReturn,\n useSteps\n} from '@ark-ui/react/steps'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@oztix/roadie-core/utils'\n\n/* ─── Re-exports ─── */\n\nexport { useSteps, type UseStepsProps, type UseStepsReturn }\n\n/* ─── Root variants ─── */\n\nexport const stepsVariants = cva('grid w-full gap-4', {\n variants: {\n direction: {\n horizontal: '',\n vertical: 'grid-cols-[auto_1fr] gap-3'\n }\n },\n defaultVariants: {\n direction: 'horizontal'\n }\n})\n\n/* ─── Root ─── */\n\nexport interface StepsProps\n extends Omit<ComponentProps<typeof ArkSteps.Root>, 'orientation'>,\n VariantProps<typeof stepsVariants> {}\n\nfunction StepsRoot({ direction, className, ...props }: StepsProps) {\n return (\n <ArkSteps.Root\n orientation={direction === 'vertical' ? 'vertical' : 'horizontal'}\n className={cn(stepsVariants({ direction, className }))}\n {...props}\n />\n )\n}\n\nStepsRoot.displayName = 'Steps'\n\n/* ─── List ─── */\n\ntype StepsListProps = ComponentProps<typeof ArkSteps.List>\n\nfunction StepsList({ className, ...props }: StepsListProps) {\n return (\n <ArkSteps.List\n className={cn(\n 'flex items-start justify-start rounded-xl bg-subtler px-4 py-3',\n 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-2',\n className\n )}\n {...props}\n />\n )\n}\n\nStepsList.displayName = 'Steps.List'\n\n/* ─── Item ─── */\n\nexport interface StepsItemProps {\n index: number\n invalid?: boolean\n className?: string\n children?: React.ReactNode\n}\n\ninterface StepsItemInternalProps extends StepsItemProps {\n ref?: React.Ref<HTMLDivElement>\n onClick?: React.MouseEventHandler<HTMLDivElement>\n}\n\nfunction StepsItem({ className, invalid, ...props }: StepsItemProps) {\n // Ark UI's types lose `index` in the HTMLProps intersection (upstream bug).\n // Cast is safe — index is required by the Zag.js state machine at runtime.\n const Item = ArkSteps.Item as React.ComponentType<\n Omit<StepsItemInternalProps, 'invalid'>\n >\n\n const itemRef = useRef<HTMLDivElement>(null)\n const prevInvalid = useRef(invalid)\n\n useEffect(() => {\n if (invalid && !prevInvalid.current) {\n const trigger = itemRef.current?.querySelector(\n '[data-part=\"trigger\"]'\n ) as HTMLElement | null\n if (trigger) {\n trigger.classList.remove('animate-shake')\n void trigger.offsetWidth\n trigger.classList.add('animate-shake')\n }\n }\n prevInvalid.current = invalid\n }, [invalid])\n\n const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n const trigger = (e.currentTarget as HTMLElement).querySelector(\n '[data-part=\"trigger\"]'\n ) as HTMLElement | null\n if (!trigger) return\n // In linear mode, Ark sets tabindex=\"-1\" on non-current triggers\n // and the onClick returns early — the step doesn't change.\n // We detect this by checking tabindex and data-incomplete.\n const isLocked =\n trigger.getAttribute('tabindex') === '-1' &&\n trigger.hasAttribute('data-incomplete')\n if (!isLocked) return\n trigger.classList.remove('animate-shake')\n void trigger.offsetWidth\n trigger.classList.add('animate-shake')\n }, [])\n\n return (\n <Item\n ref={itemRef}\n className={cn(\n 'group/step-item flex flex-1 items-center last:flex-none',\n 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n className\n )}\n data-invalid={invalid || undefined}\n onClick={handleClick}\n {...props}\n />\n )\n}\n\nStepsItem.displayName = 'Steps.Item'\n\n/* ─── Trigger ─── */\n\ntype StepsTriggerProps = ComponentProps<typeof ArkSteps.Trigger>\n\nfunction StepsTrigger({ className, ...props }: StepsTriggerProps) {\n return (\n <ArkSteps.Trigger\n className={cn(\n 'group/step flex cursor-pointer flex-col items-center gap-1 rounded-md border-none bg-transparent px-3 py-3 transition-all duration-200 ease-out',\n 'data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-2',\n 'data-current:intent-accent',\n className\n )}\n {...props}\n />\n )\n}\n\nStepsTrigger.displayName = 'Steps.Trigger'\n\n/* ─── Indicator ─── */\n\ntype StepsIndicatorProps = ComponentProps<typeof ArkSteps.Indicator>\n\nfunction StepsIndicator({\n className,\n children,\n ...props\n}: StepsIndicatorProps) {\n return (\n <ArkSteps.Indicator\n className={cn(\n 'flex size-10 shrink-0 items-center justify-center rounded-full border text-lg font-black outline-0 outline-offset-0 outline-[color-mix(in_oklch,var(--color-accent-9)_var(--focus-ring-opacity),transparent)] transition-all duration-200 ease-out',\n 'border-subtle bg-raised text-subtler',\n 'group-hover/step:outline-[length:var(--focus-ring-width)]',\n 'data-current:border-normal data-current:bg-subtle data-current:text-subtle',\n 'data-complete:emphasis-strong',\n 'group-data-invalid/step-item:emphasis-normal group-data-invalid/step-item:border-normal group-data-invalid/step-item:bg-subtle group-data-invalid/step-item:text-subtle group-data-invalid/step-item:intent-danger',\n className\n )}\n {...props}\n >\n <span className='group-data-complete/step:hidden group-data-invalid/step-item:!block'>\n {children}\n </span>\n <CheckIcon\n weight='bold'\n className='hidden size-5 group-data-complete/step:block group-data-invalid/step-item:!hidden'\n />\n </ArkSteps.Indicator>\n )\n}\n\nStepsIndicator.displayName = 'Steps.Indicator'\n\n/* ─── Separator ─── */\n\ntype StepsSeparatorProps = ComponentProps<typeof ArkSteps.Separator>\n\nfunction StepsSeparator({ className, ...props }: StepsSeparatorProps) {\n return (\n <ArkSteps.Separator\n className={cn(\n 'h-0.5 flex-1 bg-subtle transition-all duration-200 ease-out md:bottom-0 md:translate-y-5.5',\n 'data-complete:bg-strong',\n 'data-[orientation=vertical]:ml-4 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-0.5',\n className\n )}\n {...props}\n />\n )\n}\n\nStepsSeparator.displayName = 'Steps.Separator'\n\n/* ─── Content ─── */\n\ninterface StepsContentProps {\n index: number\n className?: string\n children?: React.ReactNode\n}\n\nfunction StepsContent({ className, ...props }: StepsContentProps) {\n const Content = ArkSteps.Content as React.ComponentType<StepsContentProps>\n return <Content className={cn(className)} {...props} />\n}\n\nStepsContent.displayName = 'Steps.Content'\n\n/* ─── CompletedContent ─── */\n\ntype StepsCompletedContentProps = ComponentProps<\n typeof ArkSteps.CompletedContent\n>\n\nfunction StepsCompletedContent({\n className,\n ...props\n}: StepsCompletedContentProps) {\n return <ArkSteps.CompletedContent className={cn(className)} {...props} />\n}\n\nStepsCompletedContent.displayName = 'Steps.CompletedContent'\n\n/* ─── NextTrigger ─── */\n\ntype StepsNextTriggerProps = ComponentProps<typeof ArkSteps.NextTrigger>\n\nfunction StepsNextTrigger({ className, ...props }: StepsNextTriggerProps) {\n return <ArkSteps.NextTrigger className={cn(className)} {...props} />\n}\n\nStepsNextTrigger.displayName = 'Steps.NextTrigger'\n\n/* ─── PrevTrigger ─── */\n\ntype StepsPrevTriggerProps = ComponentProps<typeof ArkSteps.PrevTrigger>\n\nfunction StepsPrevTrigger({ className, ...props }: StepsPrevTriggerProps) {\n return <ArkSteps.PrevTrigger className={cn(className)} {...props} />\n}\n\nStepsPrevTrigger.displayName = 'Steps.PrevTrigger'\n\n/* ─── Progress ─── */\n\ntype StepsProgressProps = ComponentProps<typeof ArkSteps.Progress>\n\nfunction StepsProgress({ className, ...props }: StepsProgressProps) {\n return (\n <ArkSteps.Progress\n className={cn(\n 'relative h-1 w-full overflow-hidden rounded-sm bg-subtle',\n 'after:absolute after:inset-y-0 after:left-0 after:w-[calc(var(--percent)*1%)] after:bg-strong after:transition-[width] after:duration-300 after:ease-out',\n className\n )}\n {...props}\n />\n )\n}\n\nStepsProgress.displayName = 'Steps.Progress'\n\n/* ─── TriggerText ─── */\n\ntype StepsTriggerTextProps = ComponentProps<'span'>\n\nfunction StepsTriggerText({ className, ...props }: StepsTriggerTextProps) {\n return (\n <span\n className={cn(\n 'hidden text-sm font-bold md:block',\n 'group-data-incomplete/step:text-subtle',\n 'group-data-current/step:text-subtle',\n 'group-data-complete/step:text-normal',\n 'group-data-invalid/step-item:text-subtle group-data-invalid/step-item:intent-danger',\n className\n )}\n {...props}\n />\n )\n}\n\nStepsTriggerText.displayName = 'Steps.TriggerText'\n\n/* ─── Compound export ─── */\n\nexport const Steps = Object.assign(StepsRoot, {\n List: StepsList,\n Item: StepsItem,\n Trigger: StepsTrigger,\n TriggerText: StepsTriggerText,\n Indicator: StepsIndicator,\n Separator: StepsSeparator,\n Content: StepsContent,\n CompletedContent: StepsCompletedContent,\n NextTrigger: StepsNextTrigger,\n PrevTrigger: StepsPrevTrigger,\n Progress: StepsProgress,\n Context: ArkSteps.Context,\n ItemContext: ArkSteps.ItemContext,\n RootProvider: ArkSteps.RootProvider\n})\n"]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import {a}from'./chunk-4LGCF3SN.js';import {Button}from'@base-ui/react/button';import {cva}from'class-variance-authority';import {cn}from'@oztix/roadie-core/utils';import {jsx}from'react/jsx-runtime';var p=cva("btn is-interactive",{variants:{intent:a,emphasis:{strong:"emphasis-strong",normal:"emphasis-normal",subtle:"emphasis-subtle",subtler:"emphasis-subtler"},size:{xs:"btn-xs",sm:"btn-sm",md:"btn-md",lg:"btn-lg","icon-xs":"btn-icon-xs","icon-sm":"btn-icon-sm","icon-md":"btn-icon-md","icon-lg":"btn-icon-lg"}},defaultVariants:{emphasis:"normal",size:"md"}});function u({className:o,intent:s,emphasis:i,size:e,...t}){return jsx(Button,{nativeButton:!t.render,className:cn(p({intent:s,emphasis:i,size:e,className:o})),...t})}u.displayName="Button";export{p as a,u as b};//# sourceMappingURL=chunk-3HWPLULJ.js.map
|
|
2
|
-
//# sourceMappingURL=chunk-3HWPLULJ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Button/Button.tsx"],"names":["buttonVariants","cva","intentVariants","Button","className","intent","emphasis","size","props","jsx","ButtonPrimitive","cn"],"mappings":"wMAWO,IAAMA,CAAAA,CAAiBC,GAAAA,CAAI,oBAAA,CAAsB,CACtD,QAAA,CAAU,CACR,MAAA,CAAQC,CAAAA,CACR,QAAA,CAAU,CACR,OAAQ,iBAAA,CACR,MAAA,CAAQ,iBAAA,CACR,MAAA,CAAQ,iBAAA,CACR,OAAA,CAAS,kBACX,CAAA,CACA,IAAA,CAAM,CACJ,EAAA,CAAI,QAAA,CACJ,EAAA,CAAI,SACJ,EAAA,CAAI,QAAA,CACJ,EAAA,CAAI,QAAA,CACJ,SAAA,CAAW,aAAA,CACX,UAAW,aAAA,CACX,SAAA,CAAW,aAAA,CACX,SAAA,CAAW,aACb,CACF,EACA,eAAA,CAAiB,CACf,SAAU,QAAA,CACV,IAAA,CAAM,IACR,CACF,CAAC,EAMM,SAASC,CAAAA,CAAO,CACrB,UAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,EACA,GAAGC,CACL,CAAA,CAAgB,CACd,OACEC,GAAAA,CAACC,OAAA,CACC,YAAA,CAAc,CAACF,CAAAA,CAAM,MAAA,CACrB,SAAA,CAAWG,GAAGX,CAAAA,CAAe,CAAE,MAAA,CAAAK,CAAAA,CAAQ,QAAA,CAAAC,CAAAA,CAAU,KAAAC,CAAAA,CAAM,SAAA,CAAAH,CAAU,CAAC,CAAC,CAAA,CAClE,GAAGI,CAAAA,CACN,CAEJ,CAEAL,CAAAA,CAAO,WAAA,CAAc,QAAA","file":"chunk-3HWPLULJ.js","sourcesContent":["'use client'\n\nimport type { ComponentProps } from 'react'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@oztix/roadie-core/utils'\n\nimport { intentVariants } from '../../variants'\n\nexport const buttonVariants = cva('btn is-interactive', {\n variants: {\n intent: intentVariants,\n emphasis: {\n strong: 'emphasis-strong',\n normal: 'emphasis-normal',\n subtle: 'emphasis-subtle',\n subtler: 'emphasis-subtler'\n },\n size: {\n xs: 'btn-xs',\n sm: 'btn-sm',\n md: 'btn-md',\n lg: 'btn-lg',\n 'icon-xs': 'btn-icon-xs',\n 'icon-sm': 'btn-icon-sm',\n 'icon-md': 'btn-icon-md',\n 'icon-lg': 'btn-icon-lg'\n }\n },\n defaultVariants: {\n emphasis: 'normal',\n size: 'md'\n }\n})\n\nexport interface ButtonProps\n extends ComponentProps<typeof ButtonPrimitive>,\n VariantProps<typeof buttonVariants> {}\n\nexport function Button({\n className,\n intent,\n emphasis,\n size,\n ...props\n}: ButtonProps) {\n return (\n <ButtonPrimitive\n nativeButton={!props.render}\n className={cn(buttonVariants({ intent, emphasis, size, className }))}\n {...props}\n />\n )\n}\n\nButton.displayName = 'Button'\n"]}
|