@accelint/design-toolkit 2.4.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkbox/styles.js +1 -1
- package/dist/components/checkbox/styles.js.map +1 -1
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/styles.d.ts +12 -0
- package/dist/components/input/styles.js +1 -1
- package/dist/components/input/styles.js.map +1 -1
- package/dist/index.css +13 -87
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +416 -396
- package/dist/tokens/themes.css +60 -60
- package/dist/variants/variants.css +58 -0
- package/dist/variants/variants.d.ts +2 -0
- package/package.json +4 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';var c=tv({slots:{group:["group/checkbox-group flex gap-xs","orientation-horizontal:flex-wrap","orientation-vertical:flex-col"],groupLabel:"w-full",checkbox:["group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3","disabled:cursor-not-allowed"],control:["my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive","group-enabled/checkbox:fg-info-subtle","group-enabled/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight","group-enabled/checkbox:group-indeterminate/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight","group-enabled/checkbox:group-selected/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover","group-disabled/checkbox:outline-interactive-disabled","group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled"],label:["text-body-s text-interactive-default","group-disabled/checkbox:text-interactive-disabled"]}});export{c as CheckboxStyles};//# sourceMappingURL=styles.js.map
|
|
1
|
+
import {tv}from'./../../lib/utils.js';var c=tv({slots:{group:["group/checkbox-group flex gap-xs","orientation-horizontal:flex-wrap","orientation-vertical:flex-col"],groupLabel:"w-full",checkbox:["group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3","disabled:cursor-not-allowed"],control:["my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive","group-enabled/checkbox:fg-info-subtle","group-enabled/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight","group-enabled/checkbox:group-indeterminate/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight","group-enabled/checkbox:group-selected/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover","group-disabled/checkbox:outline-interactive-disabled","group-disabled/checkbox:group-indeterminate/checkbox:fg-inverse-light group-disabled/checkbox:group-indeterminate/checkbox:bg-interactive-disabled","group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled"],label:["text-body-s text-interactive-default","group-disabled/checkbox:text-interactive-disabled"]}});export{c as CheckboxStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/checkbox/styles.ts"],"names":[
|
|
1
|
+
{"version":3,"sources":["../../../src/components/checkbox/styles.ts"],"names":[],"mappings":"+CAeS,CACL,KAAA,CAAO,CACL,KAAA,CAAA,CAAA,kCACA,CAAA,kEAGF,CAAA,CAAA,mBACA,CAAA,wKAEE,CAAA,sCAGA,CAAA,CAAA,kIAEA,CAAA,uEACA,CAAA,gNAEA,CAAA,oGACA,CAAA,mOAEA,CAAA,+FACA,CAAA,sJAEA,CAAA,oJACA,CAAA,0IAEF,CAAO,CACL,6CACA,CAAA,mDAGL,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const CheckboxStyles = tv({\n slots: {\n group: [\n 'group/checkbox-group flex gap-xs',\n 'orientation-horizontal:flex-wrap',\n 'orientation-vertical:flex-col',\n ],\n groupLabel: 'w-full',\n checkbox: [\n 'group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3',\n 'disabled:cursor-not-allowed',\n ],\n control: [\n 'my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive',\n 'group-enabled/checkbox:fg-info-subtle',\n 'group-enabled/checkbox:group-focus/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight',\n 'group-enabled/checkbox:group-indeterminate/checkbox:group-focus/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight',\n 'group-enabled/checkbox:group-selected/checkbox:group-focus/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-disabled/checkbox:outline-interactive-disabled',\n 'group-disabled/checkbox:group-indeterminate/checkbox:fg-inverse-light group-disabled/checkbox:group-indeterminate/checkbox:bg-interactive-disabled',\n 'group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled',\n ],\n label: [\n 'text-body-s text-interactive-default',\n 'group-disabled/checkbox:text-interactive-disabled',\n ],\n },\n});\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import'client-only';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import {createContext}from'react';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {InputStyles,InputStylesDefaults}from'./styles.js';import {jsxs,jsx}from'react/jsx-runtime';var {container:
|
|
1
|
+
import'client-only';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import {createContext}from'react';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {InputStyles,InputStylesDefaults}from'./styles.js';import {jsxs,jsx}from'react/jsx-runtime';var {container:w,sizer:A,input:B,clear:F}=InputStyles(),h={target:{value:""}},K=createContext(null);function k({ref:t,...a}){[a,t]=useContextProps(a,t??null,InputContext),[a,t]=useContextProps(a,t??null,K);let{classNames:r,autoSize:s,defaultValue:f="",disabled:p,placeholder:d,readOnly:m,required:I,size:g,type:l=InputStylesDefaults.type,value:x,isClearable:n,isInvalid:E,onChange:y,onKeyDown:P,...N}=a,[i,b]=useControlledState(x,f,y),z=(`${i??""}`.length||d?.length)??0,o=i==null||i==="";function c(e){y?.(e),e.defaultPrevented||b(e.target.value);}return jsxs("div",{className:w({className:r?.container,autoSize:s,type:l,isClearable:n,isEmpty:o}),"data-disabled":p||null,"data-invalid":E||null,"data-length":z,"data-placeholder":!!d&&o||null,"data-readonly":m||null,"data-required":I||null,"data-size":g,children:[jsx("div",{className:A({className:r?.sizer,autoSize:s,type:l,isClearable:n,isEmpty:o}),children:jsx(Input,{...N,ref:t,className:composeRenderProps(r?.input,e=>B({className:e,autoSize:s,type:l,isClearable:n,isEmpty:o})),disabled:p,placeholder:d,readOnly:m,required:I,type:l,value:i,onChange:c,onKeyDown:e=>{P?.(e),n&&!e.defaultPrevented&&e.key==="Escape"&&c(h);}})}),n&&jsx(Button,{className:composeRenderProps(r?.clear,e=>F({className:e,autoSize:s,type:l,isClearable:n,isEmpty:o})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:p,onPress:()=>{c(h),t?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})}k.displayName="Input";export{k as Input,K as InputContext};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/input/index.tsx"],"names":["InputStyles","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/input/index.tsx"],"names":["InputStyles","clearInputEvent","InputContext","createContext","props","ref","useContextProps","q","InputStylesDefaults","O","rest","value","setValue","useControlledState","valueProp","defaultValue","onChange","length","isEmpty","event","R","classNames","disabled","isInvalid","placeholder","readOnly","required","jsx","u","AriaInput","V","className","input","onKeyDown","isClearable","Button","H","clear","Icon","L","CancelFill","Input"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { CancelFill } from '@accelint/icons';\nimport { useControlledState } from '@react-stately/utils';\nimport { type ChangeEvent, createContext } from 'react';\nimport {\n Input as AriaInput,\n InputContext as AriaInputContext,\n type ContextValue,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { InputStyles, InputStylesDefaults } from './styles';\nimport type { InputProps } from './types';\n\nconst { container, sizer, input, clear } = InputStyles();\n\n// TODO: Improve this implementation so it is more of a realistic event\nconst clearInputEvent = {\n target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\nexport const InputContext =\n createContext<ContextValue<InputProps, HTMLInputElement>>(null);\n\nexport function Input({ ref, ...props }: InputProps) {\n [props, ref] = useContextProps(props, ref ?? null, AriaInputContext);\n [props, ref] = useContextProps(props, ref ?? null, InputContext);\n\n const {\n classNames,\n autoSize,\n defaultValue = '',\n disabled,\n placeholder,\n readOnly,\n required,\n size,\n type = InputStylesDefaults.type,\n value: valueProp,\n isClearable,\n isInvalid,\n onChange,\n onKeyDown,\n ...rest\n } = props;\n\n const [value, setValue] = useControlledState(\n valueProp,\n defaultValue,\n onChange,\n );\n const length = (`${value ?? ''}`.length || placeholder?.length) ?? 0;\n const isEmpty = value == null || value === '';\n\n function handleChange(event: ChangeEvent<HTMLInputElement>) {\n onChange?.(event);\n\n if (!event.defaultPrevented) {\n setValue(event.target.value);\n }\n }\n\n return (\n <div\n className={container({\n className: classNames?.container,\n autoSize,\n type,\n isClearable,\n isEmpty,\n })}\n data-disabled={disabled || null}\n data-invalid={isInvalid || null}\n data-length={length}\n data-placeholder={(!!placeholder && isEmpty) || null}\n data-readonly={readOnly || null}\n data-required={required || null}\n data-size={size}\n >\n <div\n className={sizer({\n className: classNames?.sizer,\n autoSize,\n type,\n isClearable,\n isEmpty,\n })}\n >\n <AriaInput\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.input, (className) =>\n input({ className, autoSize, type, isClearable, isEmpty }),\n )}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n type={type}\n value={value}\n onChange={handleChange}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n\n if (\n isClearable &&\n !event.defaultPrevented &&\n event.key === 'Escape'\n ) {\n handleChange(clearInputEvent);\n }\n }}\n />\n </div>\n {isClearable && (\n <Button\n className={composeRenderProps(classNames?.clear, (className) =>\n clear({ className, autoSize, type, isClearable, isEmpty }),\n )}\n excludeFromTabOrder\n size='small'\n variant='icon'\n isDisabled={disabled}\n onPress={() => {\n handleChange(clearInputEvent);\n\n ref?.current?.focus();\n }}\n >\n <Icon>\n <CancelFill />\n </Icon>\n </Button>\n )}\n </div>\n );\n}\nInput.displayName = 'Input';\n"]}
|
|
@@ -4,6 +4,10 @@ declare const InputStylesDefaults: {
|
|
|
4
4
|
readonly type: "text";
|
|
5
5
|
};
|
|
6
6
|
declare const InputStyles: tailwind_variants.TVReturnType<{
|
|
7
|
+
autoSize: {
|
|
8
|
+
false: string;
|
|
9
|
+
true: string;
|
|
10
|
+
};
|
|
7
11
|
type: {
|
|
8
12
|
button: string;
|
|
9
13
|
checkbox: string;
|
|
@@ -52,6 +56,10 @@ declare const InputStyles: tailwind_variants.TVReturnType<{
|
|
|
52
56
|
input: string[];
|
|
53
57
|
clear: string[];
|
|
54
58
|
}, undefined, {
|
|
59
|
+
autoSize: {
|
|
60
|
+
false: string;
|
|
61
|
+
true: string;
|
|
62
|
+
};
|
|
55
63
|
type: {
|
|
56
64
|
button: string;
|
|
57
65
|
checkbox: string;
|
|
@@ -100,6 +108,10 @@ declare const InputStyles: tailwind_variants.TVReturnType<{
|
|
|
100
108
|
input: string[];
|
|
101
109
|
clear: string[];
|
|
102
110
|
}, tailwind_variants.TVReturnType<{
|
|
111
|
+
autoSize: {
|
|
112
|
+
false: string;
|
|
113
|
+
true: string;
|
|
114
|
+
};
|
|
103
115
|
type: {
|
|
104
116
|
button: string;
|
|
105
117
|
checkbox: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';var t={type:"text"},i=tv({slots:{container:"group/input grid items-center [--length:attr(data-length_type(<number>),0)] [grid-template-columns:minmax(0,1fr)_min-content]",sizer:["[grid-column:1/-1] [grid-row:1]","font-display group-size-medium/input:text-body-s group-size-small/input:text-body-xs"],input:["block w-full rounded-medium py-xs pr-[calc(var(--room)+var(--spacing-s))] pl-s font-display text-default-light outline outline-interactive","enabled:group-focus/input:outline-highlight","enabled:group-hover/input:outline-interactive-hover","enabled:group-invalid/input:outline-serious","disabled:cursor-not-allowed disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled"],clear:["[grid-column:2/-1] [grid-row:1]","group-size-medium/input:mr-xs group-size-small/input:mr-xxs","enabled:fg-interactive enabled:bg-transparent","enabled:focus:fg-interactive-hover enabled:focus:bg-transparent","enabled:hover:fg-interactive-hover enabled:hover:bg-transparent"]},variants:{type:{button:"",checkbox:"",color:"",date:"","datetime-local":"",email:"",file:"",hidden:"",image:"",month:"",number:{input:"[appearance:textfield] placeholder:text-default-dark [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"},password:"",radio:"",range:"",reset:"",search:"",submit:"",tel:"",text:"",time:"",url:"",week:""},isClearable:{false:{container:"[--room:0px]"},true:{container:"[--room:20px]"}},isEmpty:{false:{clear:"group-not-focus-within/input:hidden"},true:{clear:"hidden"}}},compoundVariants:[{type:["number","text"],className:{sizer:["group-size-medium/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-s-spacing))+(var(--spacing-s)*2)+var(--room))]
|
|
1
|
+
import {tv}from'./../../lib/utils.js';var t={type:"text"},i=tv({slots:{container:"group/input grid items-center [--length:attr(data-length_type(<number>),0)] [grid-template-columns:minmax(0,1fr)_min-content]",sizer:["[grid-column:1/-1] [grid-row:1]","font-display group-size-medium/input:text-body-s group-size-small/input:text-body-xs"],input:["block w-full rounded-medium py-xs pr-[calc(var(--room)+var(--spacing-s))] pl-s font-display text-default-light outline outline-interactive","enabled:group-focus/input:outline-highlight","enabled:group-hover/input:outline-interactive-hover","enabled:group-invalid/input:outline-serious","disabled:cursor-not-allowed disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled"],clear:["[grid-column:2/-1] [grid-row:1]","group-size-medium/input:mr-xs group-size-small/input:mr-xxs","enabled:fg-interactive enabled:bg-transparent","enabled:focus:fg-interactive-hover enabled:focus:bg-transparent","enabled:hover:fg-interactive-hover enabled:hover:bg-transparent"]},variants:{autoSize:{false:"",true:""},type:{button:"",checkbox:"",color:"",date:"","datetime-local":"",email:"",file:"",hidden:"",image:"",month:"",number:{input:"[appearance:textfield] placeholder:text-default-dark [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"},password:"",radio:"",range:"",reset:"",search:"",submit:"",tel:"",text:"",time:"",url:"",week:""},isClearable:{false:{container:"[--room:0px]"},true:{container:"[--room:20px]"}},isEmpty:{false:{clear:"group-not-focus-within/input:hidden"},true:{clear:"hidden"}}},compoundVariants:[{type:["color","date","datetime-local","email","number","password","search","tel","text","time","url"],className:{sizer:["group-size-medium/input:min-w-[160px] group-size-medium/input:max-w-[400px]","group-size-medium/input:min-w-[80px] group-size-small/input:max-w-[200px]"]}},{autoSize:true,type:["number","text"],className:{sizer:["group-size-medium/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-s-spacing))+(var(--spacing-s)*2)+var(--room))]","group-size-small/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))] group-size-small/input:min-w-[calc(2ch+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))]"]}}],defaultVariants:t});export{i as InputStyles,t as InputStylesDefaults};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/input/styles.ts"],"names":[],"mappings":"sCAeE,IAAA,CAAM,CAAA,CAAA,IACR,CAAA,MAGE,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/input/styles.ts"],"names":["e"],"mappings":"sCAeE,IAAA,CAAM,CAAA,CAAA,IACR,CAAA,MAGE,CAAA,CAAA,CAAA,CAAAA,EAAA,CAAO,CACL,KAAA,CAAA,CAAA,SACE,CAAA,+HACK,CACL,KAAA,CAAA,CAAA,iCACA,CAAA,uFAEK,CACL,KAAA,CAAA,CAAA,0LAEA,CAAA,qDACA,CAAA,2KAGF,CAAO,CACL,KAAA,CAAA,CAAA,+FAEA,CAAA,+CACA,CAAA,8IAKF,CAAA,CAAA,QACE,CAAO,MACP,CAAA,EAAM,CACR,IACA,CAAA,EAAM,CACJ,OAAQ,MACR,CAAA,EAAA,CAAA,QACA,CAAA,EAAO,MACP,CAAA,EAAM,CAAA,wBAEN,CAAA,EAAO,MACP,CAAA,EAAM,CAAA,IACN,CAAA,EAAA,CAAQ,SACD,CAAA,KACP,CAAA,EAAO,MACP,CAAA,EAAA,CAAQ,OAEJ,CAAA,KAAA,CAAA,oJAEJ,CAAA,CAAA,WACO,CAAA,KACP,CAAA,EAAO,MACP,CAAA,EAAO,CAAA,SACC,MACR,CAAA,EAAA,CAAQ,MACR,CAAK,GACL,GAAA,CAAA,EAAM,CAAA,IACN,CAAA,EAAM,CAAA,KACD,EAAA,CACL,GAAA,CAAA,EAAM,CACR,oBAEE,CAAO,CACL,KAAA,CAAA,CAAA,SAAW,CAAA,cAEP,CACJ,CAAA,IAAA,CAAA,CAAA,SAAW,CAAA,eAGf,CAAA,CAAA,CAAA,OACE,CAAO,CACL,MAAO,CAAA,KAAA,CAAA,qCAEH,CACJ,MAAO,CAAA,KAAA,CAAA,QAIb,CAAA,CAAA,CAAA,CAAA,gBAEI,CAAM,CACJ,CAAA,IAAA,CAAA,CAAA,QAEA,MAAA,CAAA,gBACA,CAAA,gBAEA,CAAA,UACA,CAAA,QAEA,CAAA,KAAA,CACA,MAAA,CACA,MACF,CACA,gBACE,CAAO,CACL,KAAA,CAAA,CAAA,6EACA,CAAA,2EAKJ,CAAA,CAAA,CAAA,CAAA,CAAA,QACA,CAAA,IAAO,eAAgB,CAAA,iBAErB,CAAO,CACL,KAAA,CAAA,CAAA,2ZAMR,CAAA,CAAA,CAAA,CAAA,CAAA,eACD,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const InputStylesDefaults = {\n type: 'text',\n} as const;\n\nexport const InputStyles = tv({\n slots: {\n container:\n 'group/input grid items-center [--length:attr(data-length_type(<number>),0)] [grid-template-columns:minmax(0,1fr)_min-content]',\n sizer: [\n '[grid-column:1/-1] [grid-row:1]',\n 'font-display group-size-medium/input:text-body-s group-size-small/input:text-body-xs',\n ],\n input: [\n 'block w-full rounded-medium py-xs pr-[calc(var(--room)+var(--spacing-s))] pl-s font-display text-default-light outline outline-interactive',\n 'enabled:group-focus/input:outline-highlight',\n 'enabled:group-hover/input:outline-interactive-hover',\n 'enabled:group-invalid/input:outline-serious',\n 'disabled:cursor-not-allowed disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled',\n ],\n clear: [\n '[grid-column:2/-1] [grid-row:1]',\n 'group-size-medium/input:mr-xs group-size-small/input:mr-xxs',\n 'enabled:fg-interactive enabled:bg-transparent',\n 'enabled:focus:fg-interactive-hover enabled:focus:bg-transparent',\n 'enabled:hover:fg-interactive-hover enabled:hover:bg-transparent',\n ],\n },\n variants: {\n autoSize: {\n false: '',\n true: '',\n },\n type: {\n button: '',\n checkbox: '',\n color: '',\n date: '',\n 'datetime-local': '',\n email: '',\n file: '',\n hidden: '',\n image: '',\n month: '',\n number: {\n input:\n '[appearance:textfield] placeholder:text-default-dark [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n },\n password: '',\n radio: '',\n range: '',\n reset: '',\n search: '',\n submit: '',\n tel: '',\n text: '',\n time: '',\n url: '',\n week: '',\n },\n isClearable: {\n false: {\n container: '[--room:0px]',\n },\n true: {\n container: '[--room:20px]',\n },\n },\n isEmpty: {\n false: {\n clear: 'group-not-focus-within/input:hidden',\n },\n true: {\n clear: 'hidden',\n },\n },\n },\n compoundVariants: [\n {\n type: [\n 'color',\n 'date',\n 'datetime-local',\n 'email',\n 'number',\n 'password',\n 'search',\n 'tel',\n 'text',\n 'time',\n 'url',\n ],\n className: {\n sizer: [\n 'group-size-medium/input:min-w-[160px] group-size-medium/input:max-w-[400px]',\n 'group-size-medium/input:min-w-[80px] group-size-small/input:max-w-[200px]',\n ],\n },\n },\n {\n autoSize: true,\n type: ['number', 'text'],\n className: {\n sizer: [\n 'group-size-medium/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-s-spacing))+(var(--spacing-s)*2)+var(--room))]',\n 'group-size-small/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))] group-size-small/input:min-w-[calc(2ch+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))]',\n ],\n },\n },\n ],\n defaultVariants: InputStylesDefaults,\n});\n"]}
|
package/dist/index.css
CHANGED
|
@@ -22,95 +22,21 @@
|
|
|
22
22
|
--color-current: currentColor;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
@custom-variant placement-left (&[data-placement~="left"]);
|
|
27
|
-
@custom-variant placement-right (&[data-placement~="right"]);
|
|
28
|
-
@custom-variant placement-top (&[data-placement~="top"]);
|
|
29
|
-
@custom-variant placement-bottom (&[data-placement~="bottom"]);
|
|
25
|
+
@import './variants/variants.css';
|
|
30
26
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
@custom-variant
|
|
38
|
-
@custom-variant type-year (&[data-type="year"]);
|
|
39
|
-
@custom-variant type-month (&[data-type="month"]);
|
|
40
|
-
@custom-variant type-day (&[data-type="day"]);
|
|
41
|
-
|
|
42
|
-
@custom-variant layout-grid (&[data-layout="grid"]);
|
|
43
|
-
@custom-variant layout-stack (&[data-layout="stack"]);
|
|
44
|
-
|
|
45
|
-
@custom-variant orientation-horizontal (&[data-orientation="horizontal"]);
|
|
46
|
-
@custom-variant orientation-vertical (&[data-orientation="vertical"]);
|
|
47
|
-
|
|
48
|
-
@custom-variant selection-single (&[data-selection-mode="single"]);
|
|
49
|
-
@custom-variant selection-multiple (&[data-selection-mode="multiple"]);
|
|
50
|
-
|
|
51
|
-
@custom-variant resizable-right (&[data-resizable-direction="right"]);
|
|
52
|
-
@custom-variant resizable-left (&[data-resizable-direction="left"]);
|
|
53
|
-
@custom-variant resizable-both (&[data-resizable-direction="both"]);
|
|
54
|
-
|
|
55
|
-
@custom-variant sort-ascending (&[data-sort-direction="ascending"]);
|
|
56
|
-
@custom-variant sort-descending (&[data-sort-direction="descending"]);
|
|
57
|
-
|
|
58
|
-
@custom-variant allows-removing (&[data-allows-removing]);
|
|
59
|
-
@custom-variant allows-sorting (&[data-allows-sorting]);
|
|
60
|
-
@custom-variant allows-dragging (&[data-allows-dragging]);
|
|
61
|
-
|
|
62
|
-
@custom-variant has-submenu (&[data-has-submenu]);
|
|
63
|
-
@custom-variant has-child-items (&[data-has-child-items]);
|
|
64
|
-
|
|
65
|
-
@custom-variant open (&:is([open], [data-open]), &:open);
|
|
66
|
-
@custom-variant expanded (&:is([expanded], [data-expanded]));
|
|
67
|
-
|
|
68
|
-
@custom-variant entering (&[data-entering]);
|
|
69
|
-
@custom-variant exiting (&[data-exiting]);
|
|
70
|
-
|
|
71
|
-
@custom-variant indeterminate (&[data-indeterminate], &:indeterminate);
|
|
72
|
-
|
|
73
|
-
@custom-variant placeholder-shown (&[data-placeholder], &:placeholder-shown);
|
|
74
|
-
|
|
75
|
-
@custom-variant current (&[data-current]);
|
|
76
|
-
|
|
77
|
-
@custom-variant optional (&:not([required], [data-required]), &:optional);
|
|
78
|
-
@custom-variant required (&:is([required], [data-required]), &:required);
|
|
79
|
-
|
|
80
|
-
@custom-variant unavailable (&[data-unavailable]);
|
|
81
|
-
|
|
82
|
-
@custom-variant invalid (&:is([invalid], [data-invalid]), &:invalid);
|
|
83
|
-
|
|
84
|
-
@custom-variant read-only (&:is([readonly], [data-readonly]), &:read-only);
|
|
85
|
-
|
|
86
|
-
@custom-variant outside-month (&[data-outside-month]);
|
|
87
|
-
@custom-variant outside-visible-range (&[data-outside-visible-range]);
|
|
88
|
-
|
|
89
|
-
@custom-variant pending (&[data-pending]);
|
|
90
|
-
|
|
91
|
-
@custom-variant empty (&[data-empty], &:empty);
|
|
92
|
-
|
|
93
|
-
@custom-variant focus-within (&[data-focus-within], &:focus-within);
|
|
94
|
-
|
|
95
|
-
@custom-variant hover (&[data-hovered], &:hover);
|
|
96
|
-
|
|
97
|
-
@custom-variant focus (&[data-focused], &:focus);
|
|
98
|
-
@custom-variant focus-visible (&[data-focus-visible], &:focus-visible);
|
|
99
|
-
|
|
100
|
-
@custom-variant pressed (&[data-pressed], &:active);
|
|
101
|
-
|
|
102
|
-
@custom-variant selected (&[data-selected], &:checked);
|
|
103
|
-
@custom-variant selection-start (&[data-selection-start]);
|
|
104
|
-
@custom-variant selection-end (&[data-selection-end]);
|
|
105
|
-
|
|
106
|
-
@custom-variant dragging (&[data-dragging]);
|
|
107
|
-
@custom-variant drop-target (&[data-drop-target]);
|
|
108
|
-
|
|
109
|
-
@custom-variant resizing (&[data-resizing]);
|
|
110
|
-
|
|
111
|
-
@custom-variant enabled (&:not([disabled], [data-disabled]), &:enabled);
|
|
112
|
-
@custom-variant disabled (&:is([disabled], [data-disabled]), &:disabled);
|
|
27
|
+
/**
|
|
28
|
+
* Provides an escalation selector allowing for easier bump in specificity
|
|
29
|
+
* instead of having to target the same level established by a previous style.
|
|
30
|
+
*
|
|
31
|
+
* Can be stacked if necessary, just don't get carried away with power.
|
|
32
|
+
*/
|
|
33
|
+
@custom-variant sudo (&&);
|
|
113
34
|
|
|
35
|
+
/**
|
|
36
|
+
* DesignTK chooses to implement outlines instead of borders to make it so
|
|
37
|
+
* that the style doesn't impact box model dimensions. This way elements with
|
|
38
|
+
* or without a "border" are consistently sized based on content and padding alone
|
|
39
|
+
*/
|
|
114
40
|
@utility outline {
|
|
115
41
|
outline-offset: -1px;
|
|
116
42
|
}
|