@aristobyte-ui/radio 1.0.67 → 1.0.70
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/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +0 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -11
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../index.ts","../../../node_modules/clsx/dist/clsx.mjs","../components/Radio.tsx","../components/RadioGroup.tsx"],"sourcesContent":["export * from \"./components\";\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface IRadio {\n children: React.ReactNode;\n value: string;\n checked?: boolean;\n onChange?: (value: string) => void;\n name?: string;\n disabled?: boolean;\n className?: string;\n highlightLabel?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"default\"\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n style?: React.CSSProperties;\n}\n\nexport const Radio: React.FC<IRadio> = ({\n children,\n value,\n checked,\n name,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"default\",\n alignLabel = \"right\",\n onChange,\n className,\n style,\n}) => {\n const handleChange = () => {\n if (!disabled && onChange) {\n onChange(value);\n }\n };\n\n const alignClasses: Record<string, string> = {\n top: \"flex-col\",\n right: \"flex-row\",\n bottom: \"flex-col\",\n left: \"flex-row\",\n };\n\n const controlOrder: Record<string, string> = {\n top: \"order-2\",\n right: \"\",\n bottom: \"\",\n left: \"order-2\",\n };\n\n return (\n <label\n className={clsx(\n \"flex items-center relative cursor-pointer select-none\",\n alignClasses[alignLabel],\n disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n `radio-size--${size}`,\n `radio-variant--${variant}`,\n `radio-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n className=\"peer sr-only\"\n />\n <span\n className={clsx(\n \"radio__control flex-shrink-0 rounded-full transition-all duration-200\",\n controlOrder[alignLabel]\n )}\n />\n {children && (\n <span\n className={clsx(\n \"ml-2 select-none\",\n highlightLabel && `text-${variant}`\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Radio, type IRadio } from \"./Radio\";\nimport clsx from \"clsx\";\n\nexport interface IRadioGroup {\n name: string;\n value: string;\n children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];\n onChange?: (newValue: string) => void;\n disabled?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n align?: \"horizontal\" | \"vertical\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n highlightLabel?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const RadioGroup: React.FC<IRadioGroup> = ({\n name,\n value,\n onChange,\n children,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"outline\",\n align = \"horizontal\",\n alignLabel = \"right\",\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const [currentValue, setCurrentValue] = React.useState<string>(value);\n\n const radios = React.Children.toArray(\n children\n ) as React.ReactElement<IRadio>[];\n\n const handleChange = (currentRadioValue: string) => {\n if (onChange) onChange(currentRadioValue);\n setCurrentValue(currentRadioValue);\n };\n\n return (\n <div\n key={uniqueId}\n className={clsx(\n \"radio-group\",\n `radio-group--${align}`,\n `radio-group-size--${size}`,\n `radio-group-variant--${variant}`,\n `radio-group-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n {radios.map(({ props }) => (\n <Radio\n {...props}\n key={`${name}-${props.value}-${uniqueId}`}\n name={`${name}-${props.value}-${uniqueId}`}\n checked={props.value === currentValue}\n onChange={() => handleChange(props.value)}\n disabled={props.disabled ?? disabled}\n size={props.size ?? size}\n variant={props.variant ?? variant}\n appearance={props.appearance ?? appearance}\n highlightLabel={props.highlightLabel ?? highlightLabel}\n alignLabel={props.alignLabel ?? alignLabel}\n />\n ))}\n </div>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../index.ts","../../../node_modules/clsx/dist/clsx.mjs","../components/Radio.tsx","../components/RadioGroup.tsx"],"sourcesContent":["export * from \"./components\";\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface IRadio {\n children: React.ReactNode;\n value: string;\n checked?: boolean;\n onChange?: (value: string) => void;\n name?: string;\n disabled?: boolean;\n className?: string;\n highlightLabel?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"default\"\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n style?: React.CSSProperties;\n}\n\nexport const Radio: React.FC<IRadio> = ({\n children,\n value,\n checked,\n name,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"default\",\n alignLabel = \"right\",\n onChange,\n className,\n style,\n}) => {\n const handleChange = () => {\n if (!disabled && onChange) {\n onChange(value);\n }\n };\n\n const alignClasses: Record<string, string> = {\n top: \"flex-col\",\n right: \"flex-row\",\n bottom: \"flex-col\",\n left: \"flex-row\",\n };\n\n const controlOrder: Record<string, string> = {\n top: \"order-2\",\n right: \"\",\n bottom: \"\",\n left: \"order-2\",\n };\n\n return (\n <label\n className={clsx(\n \"flex items-center relative cursor-pointer select-none\",\n alignClasses[alignLabel],\n disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n `radio-size--${size}`,\n `radio-variant--${variant}`,\n `radio-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n className=\"peer sr-only\"\n />\n <span\n className={clsx(\n \"radio__control flex-shrink-0 rounded-full transition-all duration-200\",\n controlOrder[alignLabel]\n )}\n />\n {children && (\n <span\n className={clsx(\n \"ml-2 select-none\",\n highlightLabel && `text-${variant}`\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Radio, type IRadio } from \"./Radio\";\nimport clsx from \"clsx\";\n\nexport interface IRadioGroup {\n name: string;\n value: string;\n children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];\n onChange?: (newValue: string) => void;\n disabled?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n align?: \"horizontal\" | \"vertical\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n highlightLabel?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const RadioGroup: React.FC<IRadioGroup> = ({\n name,\n value,\n onChange,\n children,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"outline\",\n align = \"horizontal\",\n alignLabel = \"right\",\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const [currentValue, setCurrentValue] = React.useState<string>(value);\n\n const radios = React.Children.toArray(\n children\n ) as React.ReactElement<IRadio>[];\n\n const handleChange = (currentRadioValue: string) => {\n if (onChange) onChange(currentRadioValue);\n setCurrentValue(currentRadioValue);\n };\n\n return (\n <div\n key={uniqueId}\n className={clsx(\n \"radio-group\",\n `radio-group--${align}`,\n `radio-group-size--${size}`,\n `radio-group-variant--${variant}`,\n `radio-group-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n {radios.map(({ props }) => (\n <Radio\n {...props}\n key={`${name}-${props.value}-${uniqueId}`}\n name={`${name}-${props.value}-${uniqueId}`}\n checked={props.value === currentValue}\n onChange={() => handleChange(props.value)}\n disabled={props.disabled ?? disabled}\n size={props.size ?? size}\n variant={props.variant ?? variant}\n appearance={props.appearance ?? appearance}\n highlightLabel={props.highlightLabel ?? highlightLabel}\n alignLabel={props.alignLabel ?? alignLabel}\n />\n ))}\n </div>\n );\n};\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/clsx/dist/clsx.mjs","../components/Radio.tsx","../components/RadioGroup.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface IRadio {\n children: React.ReactNode;\n value: string;\n checked?: boolean;\n onChange?: (value: string) => void;\n name?: string;\n disabled?: boolean;\n className?: string;\n highlightLabel?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"default\"\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n style?: React.CSSProperties;\n}\n\nexport const Radio: React.FC<IRadio> = ({\n children,\n value,\n checked,\n name,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"default\",\n alignLabel = \"right\",\n onChange,\n className,\n style,\n}) => {\n const handleChange = () => {\n if (!disabled && onChange) {\n onChange(value);\n }\n };\n\n const alignClasses: Record<string, string> = {\n top: \"flex-col\",\n right: \"flex-row\",\n bottom: \"flex-col\",\n left: \"flex-row\",\n };\n\n const controlOrder: Record<string, string> = {\n top: \"order-2\",\n right: \"\",\n bottom: \"\",\n left: \"order-2\",\n };\n\n return (\n <label\n className={clsx(\n \"flex items-center relative cursor-pointer select-none\",\n alignClasses[alignLabel],\n disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n `radio-size--${size}`,\n `radio-variant--${variant}`,\n `radio-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n className=\"peer sr-only\"\n />\n <span\n className={clsx(\n \"radio__control flex-shrink-0 rounded-full transition-all duration-200\",\n controlOrder[alignLabel]\n )}\n />\n {children && (\n <span\n className={clsx(\n \"ml-2 select-none\",\n highlightLabel && `text-${variant}`\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Radio, type IRadio } from \"./Radio\";\nimport clsx from \"clsx\";\n\nexport interface IRadioGroup {\n name: string;\n value: string;\n children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];\n onChange?: (newValue: string) => void;\n disabled?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n align?: \"horizontal\" | \"vertical\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n highlightLabel?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const RadioGroup: React.FC<IRadioGroup> = ({\n name,\n value,\n onChange,\n children,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"outline\",\n align = \"horizontal\",\n alignLabel = \"right\",\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const [currentValue, setCurrentValue] = React.useState<string>(value);\n\n const radios = React.Children.toArray(\n children\n ) as React.ReactElement<IRadio>[];\n\n const handleChange = (currentRadioValue: string) => {\n if (onChange) onChange(currentRadioValue);\n setCurrentValue(currentRadioValue);\n };\n\n return (\n <div\n key={uniqueId}\n className={clsx(\n \"radio-group\",\n `radio-group--${align}`,\n `radio-group-size--${size}`,\n `radio-group-variant--${variant}`,\n `radio-group-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n {radios.map(({ props }) => (\n <Radio\n {...props}\n key={`${name}-${props.value}-${uniqueId}`}\n name={`${name}-${props.value}-${uniqueId}`}\n checked={props.value === currentValue}\n onChange={() => handleChange(props.value)}\n disabled={props.disabled ?? disabled}\n size={props.size ?? size}\n variant={props.variant ?? variant}\n appearance={props.appearance ?? appearance}\n highlightLabel={props.highlightLabel ?? highlightLabel}\n alignLabel={props.alignLabel ?? alignLabel}\n />\n ))}\n </div>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../node_modules/clsx/dist/clsx.mjs","../components/Radio.tsx","../components/RadioGroup.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface IRadio {\n children: React.ReactNode;\n value: string;\n checked?: boolean;\n onChange?: (value: string) => void;\n name?: string;\n disabled?: boolean;\n className?: string;\n highlightLabel?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"default\"\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n style?: React.CSSProperties;\n}\n\nexport const Radio: React.FC<IRadio> = ({\n children,\n value,\n checked,\n name,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"default\",\n alignLabel = \"right\",\n onChange,\n className,\n style,\n}) => {\n const handleChange = () => {\n if (!disabled && onChange) {\n onChange(value);\n }\n };\n\n const alignClasses: Record<string, string> = {\n top: \"flex-col\",\n right: \"flex-row\",\n bottom: \"flex-col\",\n left: \"flex-row\",\n };\n\n const controlOrder: Record<string, string> = {\n top: \"order-2\",\n right: \"\",\n bottom: \"\",\n left: \"order-2\",\n };\n\n return (\n <label\n className={clsx(\n \"flex items-center relative cursor-pointer select-none\",\n alignClasses[alignLabel],\n disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n `radio-size--${size}`,\n `radio-variant--${variant}`,\n `radio-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n className=\"peer sr-only\"\n />\n <span\n className={clsx(\n \"radio__control flex-shrink-0 rounded-full transition-all duration-200\",\n controlOrder[alignLabel]\n )}\n />\n {children && (\n <span\n className={clsx(\n \"ml-2 select-none\",\n highlightLabel && `text-${variant}`\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Radio, type IRadio } from \"./Radio\";\nimport clsx from \"clsx\";\n\nexport interface IRadioGroup {\n name: string;\n value: string;\n children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];\n onChange?: (newValue: string) => void;\n disabled?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n align?: \"horizontal\" | \"vertical\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n highlightLabel?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const RadioGroup: React.FC<IRadioGroup> = ({\n name,\n value,\n onChange,\n children,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"outline\",\n align = \"horizontal\",\n alignLabel = \"right\",\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const [currentValue, setCurrentValue] = React.useState<string>(value);\n\n const radios = React.Children.toArray(\n children\n ) as React.ReactElement<IRadio>[];\n\n const handleChange = (currentRadioValue: string) => {\n if (onChange) onChange(currentRadioValue);\n setCurrentValue(currentRadioValue);\n };\n\n return (\n <div\n key={uniqueId}\n className={clsx(\n \"radio-group\",\n `radio-group--${align}`,\n `radio-group-size--${size}`,\n `radio-group-variant--${variant}`,\n `radio-group-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n {radios.map(({ props }) => (\n <Radio\n {...props}\n key={`${name}-${props.value}-${uniqueId}`}\n name={`${name}-${props.value}-${uniqueId}`}\n checked={props.value === currentValue}\n onChange={() => handleChange(props.value)}\n disabled={props.disabled ?? disabled}\n size={props.size ?? size}\n variant={props.variant ?? variant}\n appearance={props.appearance ?? appearance}\n highlightLabel={props.highlightLabel ?? highlightLabel}\n alignLabel={props.alignLabel ?? alignLabel}\n />\n ))}\n </div>\n );\n};\n"],"mappings":"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","names":["jsx"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/radio",
|
|
3
3
|
"description": "Composable and fully-typed Radio and RadioGroup components for AristoByteUI. Supports multiple variants, sizes, appearances, alignments, and optional label highlights, optimized for performance and developer experience.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.70",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "AristoByte <info@aristobyte.com>",
|
|
@@ -34,7 +34,6 @@
|
|
|
34
34
|
"form",
|
|
35
35
|
"input",
|
|
36
36
|
"frontend",
|
|
37
|
-
"scss",
|
|
38
37
|
"design-tokens"
|
|
39
38
|
],
|
|
40
39
|
"files": [
|
|
@@ -59,23 +58,17 @@
|
|
|
59
58
|
"check-types": "tsc --noEmit"
|
|
60
59
|
},
|
|
61
60
|
"dependencies": {
|
|
62
|
-
"esbuild-sass-plugin": "^3.3.1",
|
|
63
61
|
"react": "^19.1.0",
|
|
64
|
-
"react-dom": "^19.1.0"
|
|
65
|
-
"sass": "^1.89.0",
|
|
66
|
-
"tsup": "^8.5.0"
|
|
62
|
+
"react-dom": "^19.1.0"
|
|
67
63
|
},
|
|
68
64
|
"devDependencies": {
|
|
69
|
-
"@aristobyte-ui/eslint-config": "^1.0.
|
|
70
|
-
"@aristobyte-ui/typescript-config": "^1.0.
|
|
65
|
+
"@aristobyte-ui/eslint-config": "^1.0.70",
|
|
66
|
+
"@aristobyte-ui/typescript-config": "^1.0.70",
|
|
71
67
|
"@turbo/gen": "^2.5.0",
|
|
72
68
|
"@types/node": "^24.3.0",
|
|
73
69
|
"@types/react": "19.1.0",
|
|
74
70
|
"@types/react-dom": "19.1.1",
|
|
75
|
-
"autoprefixer": "^10.4.21",
|
|
76
71
|
"eslint": "^9.27.0",
|
|
77
|
-
"postcss": "^8.5.3",
|
|
78
|
-
"sass-embedded": "^1.91.0",
|
|
79
72
|
"tsup": "^8.5.0",
|
|
80
73
|
"typescript": "^5.8.3"
|
|
81
74
|
}
|