@accelint/design-toolkit 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion/index.d.ts +2 -2
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/avatar/index.d.ts +4 -4
- package/dist/components/badge/index.d.ts +2 -2
- package/dist/components/box/index.d.ts +3 -3
- package/dist/components/checkbox/index.d.ts +2 -2
- package/dist/components/chip/index.d.ts +2 -2
- package/dist/components/color-picker/index.d.ts +21 -0
- package/dist/components/color-picker/index.js +2 -0
- package/dist/components/color-picker/index.js.map +1 -0
- package/dist/components/combobox/index.d.ts +41 -0
- package/dist/components/combobox/index.js +2 -0
- package/dist/components/combobox/index.js.map +1 -0
- package/dist/components/date-field/index.d.ts +28 -0
- package/dist/components/date-field/index.js +2 -0
- package/dist/components/date-field/index.js.map +1 -0
- package/dist/components/dialog/index.d.ts +40 -0
- package/dist/components/dialog/index.js +2 -0
- package/dist/components/dialog/index.js.map +1 -0
- package/dist/components/icon/index.js +1 -1
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/query-builder/action-element.d.ts +6 -0
- package/dist/components/query-builder/action-element.js +2 -0
- package/dist/components/query-builder/action-element.js.map +1 -0
- package/dist/components/query-builder/constants.d.ts +3 -0
- package/dist/components/query-builder/constants.js +2 -0
- package/dist/components/query-builder/constants.js.map +1 -0
- package/dist/components/query-builder/example-configuration.d.ts +30 -0
- package/dist/components/query-builder/example-configuration.js +2 -0
- package/dist/components/query-builder/example-configuration.js.map +1 -0
- package/dist/components/query-builder/group.d.ts +8 -0
- package/dist/components/query-builder/group.js +2 -0
- package/dist/components/query-builder/group.js.map +1 -0
- package/dist/components/query-builder/index.d.ts +44 -0
- package/dist/components/query-builder/index.js +2 -0
- package/dist/components/query-builder/index.js.map +1 -0
- package/dist/components/query-builder/rule.d.ts +6 -0
- package/dist/components/query-builder/rule.js +2 -0
- package/dist/components/query-builder/rule.js.map +1 -0
- package/dist/components/query-builder/utils.d.ts +14 -0
- package/dist/components/query-builder/utils.js +2 -0
- package/dist/components/query-builder/utils.js.map +1 -0
- package/dist/components/query-builder/value-editor.d.ts +6 -0
- package/dist/components/query-builder/value-editor.js +2 -0
- package/dist/components/query-builder/value-editor.js.map +1 -0
- package/dist/components/query-builder/value-selector.d.ts +6 -0
- package/dist/components/query-builder/value-selector.js +2 -0
- package/dist/components/query-builder/value-selector.js.map +1 -0
- package/dist/components/radio/index.d.ts +2 -2
- package/dist/components/radio/index.js +1 -1
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/search-field/index.d.ts +19 -0
- package/dist/components/search-field/index.js +2 -0
- package/dist/components/search-field/index.js.map +1 -0
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/tabs/index.d.ts +33 -0
- package/dist/components/tabs/index.js +2 -0
- package/dist/components/tabs/index.js.map +1 -0
- package/dist/components/text-area/index.js +1 -1
- package/dist/components/text-area/index.js.map +1 -1
- package/dist/components/text-field/index.js +1 -1
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/tooltip/index.d.ts +2 -2
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/index.css +54 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +1 -1
- package/dist/lib/react.d.ts +15 -3
- package/dist/lib/react.js +4 -1
- package/dist/lib/react.js.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +641 -0
- package/dist/types/types.d.ts +11 -0
- package/dist/types/types.js +2 -0
- package/dist/types/types.js.map +1 -0
- package/package.json +19 -3
@@ -1,2 +1,2 @@
|
|
1
|
-
import'client-only';import {TextField,Text,useContextProps,TextAreaContext,TextArea}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {cva}from'cva';import {Label}from'../label/index.js';import {jsxs,jsx}from'react/jsx-runtime';var c=cva(["block w-full rounded-medium p-s font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:"text-body-s",small:"text-body-xs"},isClearable:{true:"",false:""}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isClearable:true,isDisabled:false,size:"medium",className:"pr-xl"}],defaultVariants:{isClearable:false,size:"medium"}}),p=({className:r,ref:s=null,selectOnFocus:l=false,size:t="medium",...e})=>([e,s]=useContextProps(e,s,TextAreaContext),e.readOnly?jsx("span",{className:cn(c({isDisabled:false,isReadOnly:e.readOnly,size:t,className:r})),children:e.value||"\xA0"}):jsx("div",{className:"relative flex items-center",children:jsx(TextArea,{...e,onFocus:i=>{l&&s.current?.select(),e.onFocus?.(i);},ref:s,className:({isDisabled:i,isInvalid:o})=>cn(c({isDisabled:i,isInvalid:o,isReadOnly:e.readOnly,size:t,className:r}))})}));p.displayName="TextArea.Input";function F({className:r,description:s,errorMessage:l,isDisabled:t,isInvalid:e,isReadOnly:i,label:o,placeholder:f,size:
|
1
|
+
import'client-only';import {TextField,Text,useContextProps,TextAreaContext,TextArea}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {cva}from'cva';import {Label}from'../label/index.js';import {jsxs,jsx}from'react/jsx-runtime';var c=cva(["block w-full rounded-medium p-s font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:"text-body-s",small:"text-body-xs"},isClearable:{true:"",false:""}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isClearable:true,isDisabled:false,size:"medium",className:"pr-xl"}],defaultVariants:{isClearable:false,size:"medium"}}),p=({className:r,ref:s=null,selectOnFocus:l=false,size:t="medium",...e})=>([e,s]=useContextProps(e,s,TextAreaContext),e.readOnly?jsx("span",{className:cn(c({isDisabled:false,isReadOnly:e.readOnly,size:t,className:r})),children:e.value||"\xA0"}):jsx("div",{className:"relative flex items-center",children:jsx(TextArea,{...e,onFocus:i=>{l&&s.current?.select(),e.onFocus?.(i);},ref:s,className:({isDisabled:i,isInvalid:o})=>cn(c({isDisabled:i,isInvalid:o,isReadOnly:e.readOnly,size:t,className:r}))})}));p.displayName="TextArea.Input";function F({className:r,description:s,errorMessage:l,isDisabled:t,isInvalid:e,isReadOnly:i,label:o,placeholder:f,size:d="medium",...u}){let m=d==="small",A=!(m||e)||t,y=e&&!t&&!i;return jsxs(TextField,{...u,isDisabled:t,isInvalid:e,isReadOnly:i,className:"flex flex-col gap-xs",children:[!m&&jsx(Label,{className:"empty:hidden",isDisabled:t,isOptional:!u.isRequired,children:o}),jsx(p,{className:r,placeholder:f,size:d}),A&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",t&&"fg-disabled"]),slot:"description",children:s}),y&&jsx(Text,{className:"fg-serious text-body-xs empty:hidden",slot:"errorMessage",children:l})]})}F.displayName="TextArea";export{F as TextArea};//# sourceMappingURL=index.js.map
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/text-area/index.tsx"],"names":["g","
|
1
|
+
{"version":3,"sources":["../../../src/components/text-area/index.tsx"],"names":["g","ref","size","props","TextAreaContext","jsx","cn","T","e","isInvalid","textAreaStyles","n","className","Input","TextArea","description","errorMessage","label","placeholder","isSmall","shouldShowDescription","isDisabled","shouldShowError","isReadOnly","jsxs","b","Label","a","AriaText","x"],"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\nimport 'client-only';\nimport {\n Text as AriaText,\n TextArea as AriaTextArea,\n type TextAreaProps as AriaTextAreaProps,\n TextField as AriaTextField,\n type TextFieldProps as AriaTextFieldProps,\n TextAreaContext,\n useContextProps,\n} from 'react-aria-components';\n\nimport { cn } from '@/lib/utils';\nimport { type VariantProps, cva } from 'cva';\nimport type { ForwardedRef } from 'react';\nimport { Label } from '../label';\n\nconst textAreaStyles = cva(\n ['block w-full rounded-medium p-s font-display outline outline-interactive'],\n {\n variants: {\n isDisabled: {\n true: 'text-disabled outline-interactive-disabled placeholder:text-disabled',\n false:\n 'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight',\n },\n isInvalid: {\n true: 'outline-serious',\n },\n isReadOnly: {\n true: 'rounded-none p-0 outline-none',\n },\n size: {\n medium: 'text-body-s',\n small: 'text-body-xs',\n },\n isClearable: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n isDisabled: true,\n isInvalid: true,\n className: 'outline-interactive-disabled',\n },\n {\n isClearable: true,\n isDisabled: false,\n size: 'medium',\n className: 'pr-xl',\n },\n ],\n defaultVariants: {\n isClearable: false,\n size: 'medium',\n },\n },\n);\n\ninterface InputProps\n extends VariantProps<typeof textAreaStyles>,\n Omit<AriaTextAreaProps, 'size'> {\n selectOnFocus?: boolean;\n ref?: ForwardedRef<HTMLTextAreaElement>;\n}\n\nconst Input = ({\n className,\n ref = null,\n selectOnFocus = false,\n size = 'medium',\n ...props\n}: InputProps) => {\n [props, ref] = useContextProps(props, ref, TextAreaContext);\n\n if (props.readOnly) {\n return (\n <span\n className={cn(\n textAreaStyles({\n isDisabled: false,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )}\n >\n {props.value || '\\u00A0'}\n </span>\n );\n }\n\n return (\n <div className='relative flex items-center'>\n <AriaTextArea\n {...props}\n onFocus={(e) => {\n if (selectOnFocus) {\n ref.current?.select();\n }\n\n props.onFocus?.(e);\n }}\n ref={ref}\n className={({ isDisabled, isInvalid }) =>\n cn(\n textAreaStyles({\n isDisabled,\n isInvalid,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )\n }\n />\n </div>\n );\n};\nInput.displayName = 'TextArea.Input';\n\nexport interface TextAreaProps\n extends Omit<\n VariantProps<typeof textAreaStyles>,\n 'isDisabled' | 'isInvalid' | 'isReadOnly'\n >,\n Omit<AriaTextFieldProps, 'className'>,\n Omit<InputProps, keyof AriaTextFieldProps> {\n className?: string;\n description?: string;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n}\n\nexport function TextArea({\n className,\n description,\n errorMessage,\n isDisabled,\n isInvalid,\n isReadOnly,\n label,\n placeholder,\n size = 'medium',\n ...props\n}: TextAreaProps) {\n const isSmall = size === 'small';\n const shouldShowDescription = !(isSmall || isInvalid) || isDisabled;\n const shouldShowError = isInvalid && !isDisabled && !isReadOnly;\n\n return (\n <AriaTextField\n {...(props as AriaTextFieldProps)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n className={'flex flex-col gap-xs'}\n >\n {!isSmall && (\n <Label\n className='empty:hidden'\n isDisabled={isDisabled}\n isOptional={!props.isRequired}\n >\n {label}\n </Label>\n )}\n <Input className={className} placeholder={placeholder} size={size} />\n {shouldShowDescription && (\n <AriaText\n className={cn([\n 'fg-default-dark text-body-xs empty:hidden',\n isDisabled && 'fg-disabled',\n ])}\n slot='description'\n >\n {description}\n </AriaText>\n )}\n {shouldShowError && (\n <AriaText\n className='fg-serious text-body-xs empty:hidden'\n slot='errorMessage'\n >\n {errorMessage}\n </AriaText>\n )}\n </AriaTextField>\n );\n}\nTextArea.displayName = 'TextArea';\n"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import'client-only';import {TextField,Text,useContextProps,InputContext,Input,Button}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {CancelFill}from'@accelint/icons';import {cva}from'cva';import {useEffect}from'react';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {jsxs,jsx}from'react/jsx-runtime';var f=cva(["block w-full rounded-medium px-s py-xs font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:"text-body-s",small:"text-body-xs"},isClearable:{true:"",false:""}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isClearable:true,isDisabled:false,size:"medium",className:"pr-xl"}],defaultVariants:{isClearable:false,size:"medium"}}),y={target:{value:""}},k=({className:r,isClearable:
|
1
|
+
import'client-only';import {TextField,Text,useContextProps,InputContext,Input,Button}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {CancelFill}from'@accelint/icons';import {cva}from'cva';import {useEffect}from'react';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {jsxs,jsx}from'react/jsx-runtime';var f=cva(["block w-full rounded-medium px-s py-xs font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious focus:outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:"text-body-s",small:"text-body-xs"},isClearable:{true:"",false:""}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isClearable:true,isDisabled:false,size:"medium",className:"pr-xl"}],defaultVariants:{isClearable:false,size:"medium"}}),y={target:{value:""}},k=({className:r,isClearable:l=true,ref:t=null,selectOnFocus:o=false,size:a="medium",...e})=>{[e,t]=useContextProps(e,t,InputContext),useEffect(()=>{function i(n){l&&n.key==="Escape"&&e.onChange?.(y);}return t.current?.addEventListener("keydown",i),()=>t.current?.removeEventListener("keydown",i)},[l,e.onChange,t]);let d=!e.readOnly&&e.value&&a!=="small"&&l&&!e.disabled;return e.readOnly?jsx("span",{className:cn(f({isClearable:false,isDisabled:false,isReadOnly:e.readOnly,size:a,className:r})),children:e.value||"\xA0"}):jsxs("div",{className:"relative flex items-center",children:[jsx(Input,{onFocus:i=>{o&&t.current?.select(),e.onFocus?.(i);},ref:t,className:({isDisabled:i,isInvalid:n})=>cn(f({isClearable:l,isDisabled:i,isInvalid:n,isReadOnly:e.readOnly,size:a,className:r}))}),d&&jsx(Button,{className:"fg-default-dark icon-size-m hover:fg-interactive-hover absolute right-[5px] cursor-pointer",excludeFromTabOrder:true,onPress:()=>{e.onChange?.(y),t.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})};function M({className:r,isClearable:l=true,description:t,errorMessage:o,isDisabled:a,isInvalid:e,isReadOnly:d,label:i,placeholder:n,size:m="medium",...u}){let p=m==="small",b=t&&(!(p||e)||a),v=o&&e&&!a&&!d;return jsxs(TextField,{...u,isDisabled:a,isInvalid:e,isReadOnly:d,className:"flex flex-col gap-xs",children:[!p&&jsx(Label,{className:"empty:hidden",isDisabled:a,isOptional:!u.isRequired,children:i}),jsx(k,{className:r,isClearable:l,placeholder:n,size:m,...u}),b&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",a&&"fg-disabled"]),slot:"description",children:t}),v&&jsx(Text,{className:"fg-serious text-body-xs empty:hidden",slot:"errorMessage",children:o})]})}export{M as TextField};//# sourceMappingURL=index.js.map
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["C","className","ref","size","useContextProps","props","InputContext","useEffect","I","handleKeyPressed","shouldShowClearButton","isClearable","jsx","l","cn","c","jsxs","h","g","e","isDisabled","isInvalid","Button","P","N","O","TextField","description","label","isSmall","shouldShowError","errorMessage","AriaTextField","isReadOnly","placeholder","shouldShowDescription","AriaText","p"],"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\nimport 'client-only';\nimport {\n Input as AriaInput,\n type InputProps as AriaInputProps,\n Text as AriaText,\n TextField as AriaTextField,\n type TextFieldProps as AriaTextFieldProps,\n Button,\n InputContext,\n useContextProps,\n} from 'react-aria-components';\n\nimport { cn } from '@/lib/utils';\nimport { CancelFill } from '@accelint/icons';\nimport { type VariantProps, cva } from 'cva';\nimport { type ChangeEvent, type ForwardedRef, useEffect } from 'react';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\n\nconst textFieldStyles = cva(\n [\n 'block w-full rounded-medium px-s py-xs font-display outline outline-interactive',\n ],\n {\n variants: {\n isDisabled: {\n true: 'text-disabled outline-interactive-disabled placeholder:text-disabled',\n false:\n 'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight',\n },\n isInvalid: {\n true: 'outline-serious',\n },\n isReadOnly: {\n true: 'rounded-none p-0 outline-none',\n },\n size: {\n medium: 'text-body-s',\n small: 'text-body-xs',\n },\n isClearable: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n isDisabled: true,\n isInvalid: true,\n className: 'outline-interactive-disabled',\n },\n {\n isClearable: true,\n isDisabled: false,\n size: 'medium',\n className: 'pr-xl',\n },\n ],\n defaultVariants: {\n isClearable: false,\n size: 'medium',\n },\n },\n);\n\ninterface InputProps\n extends VariantProps<typeof textFieldStyles>,\n Omit<AriaInputProps, 'size'> {\n isClearable?: boolean;\n selectOnFocus?: boolean;\n ref?: ForwardedRef<HTMLInputElement>;\n}\n\nconst clearInputEvent = {\n target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\nconst Input = ({\n className,\n isClearable = true,\n ref = null,\n selectOnFocus = false,\n size = 'medium',\n ...props\n}: InputProps) => {\n [props, ref] = useContextProps(props, ref, InputContext);\n\n useEffect(() => {\n function handleKeyPressed(e: KeyboardEvent) {\n if (isClearable && e.key === 'Escape') {\n props.onChange?.(clearInputEvent);\n }\n }\n\n ref.current?.addEventListener('keydown', handleKeyPressed);\n\n return () => ref.current?.removeEventListener('keydown', handleKeyPressed);\n }, [isClearable, props.onChange, ref]);\n\n const shouldShowClearButton =\n !props.readOnly &&\n props.value &&\n size !== 'small' &&\n isClearable &&\n !props.disabled;\n\n if (props.readOnly) {\n return (\n <span\n className={cn(\n textFieldStyles({\n isClearable: false,\n isDisabled: false,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )}\n >\n {props.value || '\\u00A0'}\n </span>\n );\n }\n\n return (\n <div className='relative flex items-center'>\n <AriaInput\n {...props}\n onFocus={(e) => {\n if (selectOnFocus) {\n ref.current?.select();\n }\n\n props.onFocus?.(e);\n }}\n ref={ref}\n className={({ isDisabled, isInvalid }) =>\n cn(\n textFieldStyles({\n isClearable,\n isDisabled,\n isInvalid,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )\n }\n />\n {shouldShowClearButton && (\n <Button\n className='fg-default-dark icon-size-m hover:fg-interactive-hover absolute right-[5px] cursor-pointer'\n excludeFromTabOrder\n onPress={() => {\n props.onChange?.(clearInputEvent);\n ref.current?.focus();\n }}\n >\n <Icon>\n <CancelFill />\n </Icon>\n </Button>\n )}\n </div>\n );\n};\n\nexport interface TextFieldProps\n extends Omit<\n VariantProps<typeof textFieldStyles>,\n 'isDisabled' | 'isInvalid' | 'isReadOnly'\n >,\n Omit<AriaTextFieldProps, 'className'>,\n Omit<InputProps, keyof AriaTextFieldProps> {\n className?: string;\n isClearable?: boolean;\n description?: string;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n}\n\nexport function TextField({\n className,\n isClearable = true,\n description,\n errorMessage,\n isDisabled,\n isInvalid,\n isReadOnly,\n label,\n placeholder,\n size = 'medium',\n ...props\n}: TextFieldProps) {\n const isSmall = size === 'small';\n const shouldShowDescription =\n description && (!(isSmall || isInvalid) || isDisabled);\n const shouldShowError =\n errorMessage && isInvalid && !isDisabled && !isReadOnly;\n\n return (\n <AriaTextField\n {...(props as TextFieldProps)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n className={'flex flex-col gap-xs'}\n >\n {!isSmall && (\n <Label\n className='empty:hidden'\n isDisabled={isDisabled}\n isOptional={!props.isRequired}\n >\n {label}\n </Label>\n )}\n <Input\n className={className}\n isClearable={isClearable}\n placeholder={placeholder}\n size={size}\n {...(props as InputProps)}\n />\n {shouldShowDescription && (\n <AriaText\n className={cn([\n 'fg-default-dark text-body-xs empty:hidden',\n isDisabled && 'fg-disabled',\n ])}\n slot='description'\n >\n {description}\n </AriaText>\n )}\n {shouldShowError && (\n <AriaText\n className='fg-serious text-body-xs empty:hidden'\n slot='errorMessage'\n >\n {errorMessage}\n </AriaText>\n )}\n </AriaTextField>\n );\n}\n"]}
|
1
|
+
{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["C","isClearable","ref","size","props","InputContext","useEffect","I","handleKeyPressed","e","shouldShowClearButton","jsx","s","c","jsxs","h","isDisabled","isInvalid","Button","P","N","O","TextField","description","label","isSmall","shouldShowError","errorMessage","AriaTextField","isReadOnly","className","placeholder","shouldShowDescription","AriaText","x"],"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\nimport 'client-only';\nimport {\n Input as AriaInput,\n type InputProps as AriaInputProps,\n Text as AriaText,\n TextField as AriaTextField,\n type TextFieldProps as AriaTextFieldProps,\n Button,\n InputContext,\n useContextProps,\n} from 'react-aria-components';\n\nimport { cn } from '@/lib/utils';\nimport { CancelFill } from '@accelint/icons';\nimport { type VariantProps, cva } from 'cva';\nimport { type ChangeEvent, type ForwardedRef, useEffect } from 'react';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\n\nconst textFieldStyles = cva(\n [\n 'block w-full rounded-medium px-s py-xs font-display outline outline-interactive',\n ],\n {\n variants: {\n isDisabled: {\n true: 'text-disabled outline-interactive-disabled placeholder:text-disabled',\n false:\n 'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight',\n },\n isInvalid: {\n true: 'outline-serious focus:outline-serious',\n },\n isReadOnly: {\n true: 'rounded-none p-0 outline-none',\n },\n size: {\n medium: 'text-body-s',\n small: 'text-body-xs',\n },\n isClearable: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n isDisabled: true,\n isInvalid: true,\n className: 'outline-interactive-disabled',\n },\n {\n isClearable: true,\n isDisabled: false,\n size: 'medium',\n className: 'pr-xl',\n },\n ],\n defaultVariants: {\n isClearable: false,\n size: 'medium',\n },\n },\n);\n\ninterface InputProps\n extends VariantProps<typeof textFieldStyles>,\n Omit<AriaInputProps, 'size'> {\n isClearable?: boolean;\n selectOnFocus?: boolean;\n ref?: ForwardedRef<HTMLInputElement>;\n}\n\nconst clearInputEvent = {\n target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\nconst Input = ({\n className,\n isClearable = true,\n ref = null,\n selectOnFocus = false,\n size = 'medium',\n ...props\n}: InputProps) => {\n [props, ref] = useContextProps(props, ref, InputContext);\n\n useEffect(() => {\n function handleKeyPressed(e: KeyboardEvent) {\n if (isClearable && e.key === 'Escape') {\n props.onChange?.(clearInputEvent);\n }\n }\n\n ref.current?.addEventListener('keydown', handleKeyPressed);\n\n return () => ref.current?.removeEventListener('keydown', handleKeyPressed);\n }, [isClearable, props.onChange, ref]);\n\n const shouldShowClearButton =\n !props.readOnly &&\n props.value &&\n size !== 'small' &&\n isClearable &&\n !props.disabled;\n\n if (props.readOnly) {\n return (\n <span\n className={cn(\n textFieldStyles({\n isClearable: false,\n isDisabled: false,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )}\n >\n {props.value || '\\u00A0'}\n </span>\n );\n }\n\n return (\n <div className='relative flex items-center'>\n <AriaInput\n onFocus={(e) => {\n if (selectOnFocus) {\n ref.current?.select();\n }\n\n props.onFocus?.(e);\n }}\n ref={ref}\n className={({ isDisabled, isInvalid }) =>\n cn(\n textFieldStyles({\n isClearable,\n isDisabled,\n isInvalid,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )\n }\n />\n {shouldShowClearButton && (\n <Button\n className='fg-default-dark icon-size-m hover:fg-interactive-hover absolute right-[5px] cursor-pointer'\n excludeFromTabOrder\n onPress={() => {\n props.onChange?.(clearInputEvent);\n ref.current?.focus();\n }}\n >\n <Icon>\n <CancelFill />\n </Icon>\n </Button>\n )}\n </div>\n );\n};\n\nexport interface TextFieldProps\n extends Omit<\n VariantProps<typeof textFieldStyles>,\n 'isDisabled' | 'isInvalid' | 'isReadOnly'\n >,\n Omit<AriaTextFieldProps, 'className'>,\n Omit<InputProps, keyof AriaTextFieldProps> {\n className?: string;\n isClearable?: boolean;\n description?: string;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n}\n\nexport function TextField({\n className,\n isClearable = true,\n description,\n errorMessage,\n isDisabled,\n isInvalid,\n isReadOnly,\n label,\n placeholder,\n size = 'medium',\n ...props\n}: TextFieldProps) {\n const isSmall = size === 'small';\n const shouldShowDescription =\n description && (!(isSmall || isInvalid) || isDisabled);\n const shouldShowError =\n errorMessage && isInvalid && !isDisabled && !isReadOnly;\n\n return (\n <AriaTextField\n {...(props as TextFieldProps)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n className={'flex flex-col gap-xs'}\n >\n {!isSmall && (\n <Label\n className='empty:hidden'\n isDisabled={isDisabled}\n isOptional={!props.isRequired}\n >\n {label}\n </Label>\n )}\n <Input\n className={className}\n isClearable={isClearable}\n placeholder={placeholder}\n size={size}\n {...(props as InputProps)}\n />\n {shouldShowDescription && (\n <AriaText\n className={cn([\n 'fg-default-dark text-body-xs empty:hidden',\n isDisabled && 'fg-disabled',\n ])}\n slot='description'\n >\n {description}\n </AriaText>\n )}\n {shouldShowError && (\n <AriaText\n className='fg-serious text-body-xs empty:hidden'\n slot='errorMessage'\n >\n {errorMessage}\n </AriaText>\n )}\n </AriaTextField>\n );\n}\n"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
2
|
import * as cva_types from 'cva/types';
|
3
3
|
import { VariantProps } from 'cva';
|
4
|
-
import
|
4
|
+
import React__default from 'react';
|
5
5
|
import { TooltipTriggerComponentProps, Focusable, TooltipProps as TooltipProps$1 } from 'react-aria-components';
|
6
6
|
|
7
7
|
declare const tooltipStyles: (props?: cva_types.ClassProp | undefined) => string;
|
@@ -20,7 +20,7 @@ declare namespace Tooltip {
|
|
20
20
|
displayName: string;
|
21
21
|
};
|
22
22
|
}
|
23
|
-
interface TooltipTriggerProps extends
|
23
|
+
interface TooltipTriggerProps extends React__default.ComponentProps<typeof Focusable> {
|
24
24
|
}
|
25
25
|
declare const TooltipTrigger: {
|
26
26
|
({ children, ...props }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import {containsExactChildren}from'./../../lib/react.js';import {cn}from'./../../lib/utils.js';import {cva}from'cva';import {TooltipTrigger,Focusable,Tooltip}from'react-aria-components';import {jsx}from'react/jsx-runtime';var n=cva("fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay");function e({children:o,closeDelay:t=0,delay:r=400,...p}){return containsExactChildren({children:o,componentName:e.displayName,restrictions:{[i.displayName]:1,[s.displayName]:1}}),jsx(TooltipTrigger,{closeDelay:t,delay:r,...p,children:o})}e.displayName="Tooltip";e.as=(o,t)=>cn(n({...o,className:t}));var i=({children:o,...t})=>jsx(Focusable,{...t,children:o});i.displayName="Tooltip.Trigger";var s=({children:o,className:t,offset:r=5,placement:p="bottom",...T})=>jsx(Tooltip,{...T,className:cn(n({className:t})),offset:r,placement:p,children:o});s.displayName="Tooltip.Body";e.Trigger=i;e.Body=s;export{e as Tooltip,s as TooltipBody,i as TooltipTrigger};//# sourceMappingURL=index.js.map
|
1
|
+
import {containsExactChildren}from'./../../lib/react.js';import {cn}from'./../../lib/utils.js';import {cva}from'cva';import {TooltipTrigger,Focusable,Tooltip}from'react-aria-components';import {jsx}from'react/jsx-runtime';var n=cva("fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay");function e({children:o,closeDelay:t=0,delay:r=400,...p}){return containsExactChildren({children:o,componentName:e.displayName,restrictions:{[i.displayName]:{min:1,max:1},[s.displayName]:{min:1,max:1}}}),jsx(TooltipTrigger,{closeDelay:t,delay:r,...p,children:o})}e.displayName="Tooltip";e.as=(o,t)=>cn(n({...o,className:t}));var i=({children:o,...t})=>jsx(Focusable,{...t,children:o});i.displayName="Tooltip.Trigger";var s=({children:o,className:t,offset:r=5,placement:p="bottom",...T})=>jsx(Tooltip,{...T,className:cn(n({className:t})),offset:r,placement:p,children:o});s.displayName="Tooltip.Body";e.Trigger=i;e.Body=s;export{e as Tooltip,s as TooltipBody,i as TooltipTrigger};//# sourceMappingURL=index.js.map
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["closeDelay","containsExactChildren","m","Tooltip","
|
1
|
+
{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["y","children","closeDelay","containsExactChildren","m","Tooltip","TooltipBody","jsx","RACTooltipTrigger","l","delay","props","tooltipStyles","TooltipTrigger","className","placement","a","offset"],"mappings":"8NAyBA,IAAA,CAAA,CAAAA,GAAA,CAAA,2KAKE,CAAAC,CAAAA,SACA,WAAAC,CAAa,CAAA,CAAA,UACL,CAAA,CAAA,CACR,OAEA,CAAA,CAAA,CAAA,GAAA,CAAAC,GACE,CAAA,CAAA,CAAA,CAAA,OACAC,qBAAeC,CAAAA,CAAAA,QAAAA,CAAAA,CAAAA,CAAAA,cACf,CAAc,CAAA,WAAA,CACZ,cAA2B,CAAG,CAAA,CAAE,WAAe,EAC/C,CAACC,GAAY,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAW,EAAG,CAAE,WAAe,EAEhD,CAAC,GAGCC,CAACC,EAAA,GAAkB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,GAAA,CAAYP,eAAY,CAAOQ,UAAWC,CAC1D,CAAA,CAAA,KAAA,CAAA,CAAA,CAAAV,GAGP,CACAI,CAAQ,QAAA,CAAA,CAAA,CAAA,CAAA,CAAc,aACd,CAAA,SAGAO,CAAAA,CAAAA,CAAc,EAAKD,CAAAA,CAAAA,CAAAA,CAAO,aAAW,CAAC,CAKvC,SAA0B,CAAAV,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,IAAAA,CAAU,GAAGU,QACpC,CAAA,CAAW,CAAGA,GAAAA,CAAQ,mBAAAV,GAAS,CAEzCY,SAA6B,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,WAAA,CAAA,iBAK3B,CAAAZ,KACA,CAAAa,CAAAA,CAAAA,QAAAA,CACA,WACA,UAAAC,CAAY,CAAA,CAAA,CAAA,SACTJ,CAAAA,CACL,SAGO,CAAGA,GAAAA,CACJ,oBAAcC,CAAAA,CAAc,SAAE,CAAAI,EAAAF,CAAU,CAAC,CAAC,UAClCG,CACR,WAEC,CAAA,CAAA,CAAA,SACH,CAAA,CAGJX,SAA0B,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,WAAA,CAAA,eAGlB,CAAOA,CAAAA,OAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,IAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["import { containsExactChildren } from '@/lib/react';\nimport { cn } from '@/lib/utils';\nimport { type VariantProps, cva } from 'cva';\n/*\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 */\nimport type React from 'react';\nimport {\n Focusable,\n Tooltip as RACTooltip,\n type TooltipProps as RACTooltipProps,\n TooltipTrigger as RACTooltipTrigger,\n type TooltipTriggerComponentProps,\n} from 'react-aria-components';\n\nconst tooltipStyles = cva(\n 'fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay',\n);\n\nexport interface TooltipProps extends TooltipTriggerComponentProps {}\n\nexport function Tooltip({\n children,\n closeDelay = 0,\n delay = 400,\n ...props\n}: TooltipProps) {\n containsExactChildren({\n children,\n componentName: Tooltip.displayName,\n restrictions: {\n [TooltipTrigger.displayName]: { min: 1, max: 1 },\n [TooltipBody.displayName]: { min: 1, max: 1 },\n },\n });\n\n return (\n <RACTooltipTrigger closeDelay={closeDelay} delay={delay} {...props}>\n {children}\n </RACTooltipTrigger>\n );\n}\nTooltip.displayName = 'Tooltip';\nTooltip.as = (\n props: VariantProps<typeof tooltipStyles>,\n className?: string | string[],\n) => cn(tooltipStyles({ ...props, className }));\n\nexport interface TooltipTriggerProps\n extends React.ComponentProps<typeof Focusable> {}\n\nexport const TooltipTrigger = ({ children, ...props }: TooltipTriggerProps) => {\n return <Focusable {...props}>{children}</Focusable>;\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport interface TooltipBodyProps extends RACTooltipProps {}\n\nexport const TooltipBody = ({\n children,\n className,\n offset = 5,\n placement = 'bottom',\n ...props\n}: TooltipBodyProps) => {\n return (\n <RACTooltip\n {...props}\n className={cn(tooltipStyles({ className }))}\n offset={offset}\n placement={placement}\n >\n {children}\n </RACTooltip>\n );\n};\nTooltipBody.displayName = 'Tooltip.Body';\n\nTooltip.Trigger = TooltipTrigger;\nTooltip.Body = TooltipBody;\n"]}
|
package/dist/index.css
CHANGED
@@ -363,3 +363,57 @@
|
|
363
363
|
--icon-color: --value([ *]);
|
364
364
|
--icon-color: --value(--color- *);
|
365
365
|
}
|
366
|
+
|
367
|
+
@layer components {
|
368
|
+
.hide-cancel::-webkit-search-cancel-button {
|
369
|
+
display: none;
|
370
|
+
}
|
371
|
+
|
372
|
+
/**
|
373
|
+
* Rule line only applicable to the QueryBuilder component
|
374
|
+
*/
|
375
|
+
.queryBuilder .rule-lines::before {
|
376
|
+
content: '';
|
377
|
+
width: 10px;
|
378
|
+
position: absolute;
|
379
|
+
top: 0;
|
380
|
+
bottom: 0;
|
381
|
+
left: 50%;
|
382
|
+
background-image:
|
383
|
+
repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)),
|
384
|
+
repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
|
385
|
+
background-position: left -1px, center;
|
386
|
+
background-repeat: repeat-y, repeat-x;
|
387
|
+
background-size: 1px 4px, 4px 1px;
|
388
|
+
}
|
389
|
+
|
390
|
+
.queryBuilder .group > span.rule-lines:last-of-type::before {
|
391
|
+
content: '';
|
392
|
+
width: 10px;
|
393
|
+
position: absolute;
|
394
|
+
top: 0;
|
395
|
+
bottom: 50%;
|
396
|
+
left: 50%;
|
397
|
+
background-image:
|
398
|
+
repeating-linear-gradient(to bottom,var(--neutral-04), var(--neutral-04)),
|
399
|
+
repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
|
400
|
+
background-position: left -1px, bottom;
|
401
|
+
background-repeat: repeat-y, repeat-x;
|
402
|
+
background-size: 1px 4px, 4px 1px;
|
403
|
+
}
|
404
|
+
|
405
|
+
.queryBuilder .group > span.rule-lines:last-of-type:has(~ div.group)::before {
|
406
|
+
content: '';
|
407
|
+
width: 10px;
|
408
|
+
position: absolute;
|
409
|
+
top: 0;
|
410
|
+
bottom: 0;
|
411
|
+
left: 50%;
|
412
|
+
background-image:
|
413
|
+
repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)),
|
414
|
+
repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
|
415
|
+
background-position: left -1px, center;
|
416
|
+
background-repeat: repeat-y, repeat-x;
|
417
|
+
background-size: 1px 4px, 4px 1px;
|
418
|
+
}
|
419
|
+
}
|
package/dist/index.d.ts
CHANGED
@@ -7,23 +7,39 @@ export { Checkbox, CheckboxGroupProps, CheckboxProps } from './components/checkb
|
|
7
7
|
export { Chip, ChipListProps, ChipProps, DeletableChip, SelectableChip } from './components/chip/index.js';
|
8
8
|
export { ClassificationBadge, ClassificationBadgeProps } from './components/classification-badge/index.js';
|
9
9
|
export { ClassificationBanner, ClassificationBannerProps } from './components/classification-banner/index.js';
|
10
|
+
export { ColorPicker, ColorPickerProps, useColorPickerState } from './components/color-picker/index.js';
|
11
|
+
export { ComboBox, ComboBoxProps, ComboBoxSection } from './components/combobox/index.js';
|
12
|
+
export { DateField, DateFieldProps } from './components/date-field/index.js';
|
13
|
+
export { Dialog, DialogProps, DialogTitle } from './components/dialog/index.js';
|
10
14
|
export { FloatingButton, FloatingButtonProps } from './components/floating-button/index.js';
|
11
15
|
export { Icon, IconProps } from './components/icon/index.js';
|
12
16
|
export { IconButton, IconButtonProps } from './components/icon-button/index.js';
|
13
17
|
export { Label } from './components/label/index.js';
|
18
|
+
export { ClassNames, DefaultRQBProps, Field, QueryBuilder, QueryBuilderContextType, QueryBuilderProps, QueryBuilderValueEditors, RuleGroupType } from './components/query-builder/index.js';
|
14
19
|
export { Radio, RadioGroupProps, RadioProps } from './components/radio/index.js';
|
20
|
+
export { SearchField, SearchFieldProps } from './components/search-field/index.js';
|
15
21
|
export { Switch, SwitchProps } from './components/switch/index.js';
|
22
|
+
export { TabListProps, TabPanelProps, TabProps, Tabs, TabsProps } from './components/tabs/index.js';
|
16
23
|
export { TextArea, TextAreaProps } from './components/text-area/index.js';
|
17
24
|
export { TextField, TextFieldProps } from './components/text-field/index.js';
|
18
25
|
export { ToggleIconButton, ToggleIconButtonProps } from './components/toggle-icon-button/index.js';
|
19
26
|
export { Tooltip, TooltipBody, TooltipBodyProps, TooltipProps, TooltipTrigger, TooltipTriggerProps } from './components/tooltip/index.js';
|
20
27
|
export { containsExactChildren, expectsIconWrapper } from './lib/react.js';
|
21
28
|
export { cn, twMerge } from './lib/utils.js';
|
29
|
+
export { MenuItem } from './types/types.js';
|
22
30
|
import 'react/jsx-runtime';
|
23
31
|
import 'cva/types';
|
24
32
|
import 'react';
|
25
33
|
import 'react-aria-components';
|
26
34
|
import 'cva';
|
27
35
|
import '@radix-ui/react-avatar';
|
36
|
+
import '@internationalized/date';
|
37
|
+
import './components/query-builder/value-selector.js';
|
38
|
+
import 'react-querybuilder';
|
39
|
+
import './components/query-builder/value-editor.js';
|
40
|
+
import './components/query-builder/group.js';
|
41
|
+
import './components/query-builder/rule.js';
|
42
|
+
import './components/query-builder/action-element.js';
|
43
|
+
import 'type-fest';
|
28
44
|
import 'tailwind-merge';
|
29
45
|
import 'clsx';
|
package/dist/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export{Accordion}from'./components/accordion/index.js';export{Avatar}from'./components/avatar/index.js';export{Badge}from'./components/badge/index.js';export{Box}from'./components/box/index.js';export{Button}from'./components/button/index.js';export{Checkbox}from'./components/checkbox/index.js';export{Chip,DeletableChip,SelectableChip}from'./components/chip/index.js';export{ClassificationBadge}from'./components/classification-badge/index.js';export{ClassificationBanner}from'./components/classification-banner/index.js';export{FloatingButton}from'./components/floating-button/index.js';export{Icon}from'./components/icon/index.js';export{IconButton}from'./components/icon-button/index.js';export{Label}from'./components/label/index.js';export{Radio}from'./components/radio/index.js';export{Switch}from'./components/switch/index.js';export{TextArea}from'./components/text-area/index.js';export{TextField}from'./components/text-field/index.js';export{ToggleIconButton}from'./components/toggle-icon-button/index.js';export{Tooltip,TooltipBody,TooltipTrigger}from'./components/tooltip/index.js';export{containsExactChildren,expectsIconWrapper}from'./lib/react.js';export{cn,twMerge}from'./lib/utils.js';//# sourceMappingURL=index.js.map
|
1
|
+
export{Accordion}from'./components/accordion/index.js';export{Avatar}from'./components/avatar/index.js';export{Badge}from'./components/badge/index.js';export{Box}from'./components/box/index.js';export{Button}from'./components/button/index.js';export{Checkbox}from'./components/checkbox/index.js';export{Chip,DeletableChip,SelectableChip}from'./components/chip/index.js';export{ClassificationBadge}from'./components/classification-badge/index.js';export{ClassificationBanner}from'./components/classification-banner/index.js';export{ColorPicker,useColorPickerState}from'./components/color-picker/index.js';export{ComboBox,ComboBoxSection}from'./components/combobox/index.js';export{DateField}from'./components/date-field/index.js';export{Dialog,DialogTitle}from'./components/dialog/index.js';export{FloatingButton}from'./components/floating-button/index.js';export{Icon}from'./components/icon/index.js';export{IconButton}from'./components/icon-button/index.js';export{Label}from'./components/label/index.js';export{QueryBuilder}from'./components/query-builder/index.js';export{Radio}from'./components/radio/index.js';export{SearchField}from'./components/search-field/index.js';export{Switch}from'./components/switch/index.js';export{Tabs}from'./components/tabs/index.js';export{TextArea}from'./components/text-area/index.js';export{TextField}from'./components/text-field/index.js';export{ToggleIconButton}from'./components/toggle-icon-button/index.js';export{Tooltip,TooltipBody,TooltipTrigger}from'./components/tooltip/index.js';export{containsExactChildren,expectsIconWrapper}from'./lib/react.js';export{cn,twMerge}from'./lib/utils.js';//# sourceMappingURL=index.js.map
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/lib/react.d.ts
CHANGED
@@ -2,16 +2,28 @@ import { ReactNode } from 'react';
|
|
2
2
|
|
3
3
|
type ContainsExactChildrenProps = {
|
4
4
|
componentName: string;
|
5
|
-
children: ReactNode | ReactNode[]
|
6
|
-
|
5
|
+
children: ReactNode | ReactNode[] | ((values: any & {
|
6
|
+
defaultChildren: ReactNode | undefined;
|
7
|
+
}) => ReactNode);
|
8
|
+
restrictions: Record<string, {
|
9
|
+
min: number;
|
10
|
+
max?: number;
|
11
|
+
}>;
|
7
12
|
};
|
13
|
+
/**
|
14
|
+
* Validates the intended composite component structure.
|
15
|
+
*
|
16
|
+
* @param children the children of the component
|
17
|
+
* @param componentName the displayName of the component
|
18
|
+
* @param restrictions the record of validation rules
|
19
|
+
*/
|
8
20
|
declare function containsExactChildren({ children, componentName, restrictions, }: ContainsExactChildrenProps): void;
|
9
21
|
/**
|
10
22
|
* I look for svgIcons exported from the @accelint/icons library
|
11
23
|
* and ensure that they are wrapped in an Icon component in order
|
12
24
|
* to get the classes and styles they need in context.
|
13
25
|
*
|
14
|
-
* Using isValidElement means we will filter out strings, boolean, etc
|
26
|
+
* Using isValidElement means we will filter out strings, boolean, etc.
|
15
27
|
* that are valid nodes but not elements.
|
16
28
|
*
|
17
29
|
* @example
|
package/dist/lib/react.js
CHANGED
@@ -1,2 +1,5 @@
|
|
1
|
-
import {Children,isValidElement}from'react';function
|
1
|
+
import {Children,isValidElement}from'react';var c=class extends Error{constructor(r){super(r),this.name="ComponentStructureError";}};function m({children:s,componentName:r,restrictions:l}){let i=Children.toArray(s);if(!i.every(isValidElement))throw new c(`<${r}> received invalid children.`);let u=i.reduce((n,o)=>{let e=o?.type?.displayName;return e&&(n[e]=(n[e]||0)+1),n},{}),a=[],d=[];for(let[n,{min:o,max:e}]of Object.entries(l)){let t=u[n]??0;t<o&&a.push(`${o-t} of <${n}>`),e!==void 0&&t>e&&d.push(`${t-e} of <${n}>`);}if(a.length||d.length){let n=(e,t)=>t.length?` ${e}:
|
2
|
+
${t.join(", ")}
|
3
|
+
`:"",o=`Invalid <${r}> structure
|
4
|
+
${n("Missing the following",a)}${n("Excess of the following",d)}`;throw new c(o.trim())}}function g({children:s,componentName:r}){Children.toArray(s).map(i=>{if(isValidElement(i)&&i.type.name?.startsWith("Svg"))throw new Error(`${r} is using an icon without the required Icon wrapper`)});}export{m as containsExactChildren,g as expectsIconWrapper};//# sourceMappingURL=react.js.map
|
2
5
|
//# sourceMappingURL=react.js.map
|
package/dist/lib/react.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/lib/react.ts"],"names":["containsExactChildren","children","componentName","restrictions","childrenComponents","Children","isValidElement","
|
1
|
+
{"version":3,"sources":["../../src/lib/react.ts"],"names":["ComponentStructureError","message","containsExactChildren","children","componentName","restrictions","childrenComponents","Children","isValidElement","accumulationResults","acc","child","name","missingComponentsArray","excessComponentsArray","key","min","max","found","formatList","label","items","errorMessage","expectsIconWrapper"],"mappings":"4CAeA,IAAMA,CAAAA,CAAN,cAAsC,KAAM,CAC1C,WAAA,CAAYC,CAAS,CAAA,CACnB,MAAMA,CAAO,CAAA,CACb,IAAK,CAAA,IAAA,CAAO,0BACd,CACF,CAuBO,CAAA,SAASC,EAAsB,CACpC,QAAA,CAAAC,CACA,CAAA,aAAA,CAAAC,EACA,YAAAC,CAAAA,CACF,CAA+B,CAAA,CAC7B,IAAMC,CAAqBC,CAAAA,QAAAA,CAAS,OAAQJ,CAAAA,CAAQ,CAEpD,CAAA,GAAI,CAACG,CAAAA,CAAmB,MAAME,cAAc,CAAA,CAC1C,MAAM,IAAIR,CACR,CAAA,CAAA,CAAA,EAAII,CAAa,CAAA,4BAAA,CACnB,EAGF,IAAMK,CAAAA,CAAsBH,CAAmB,CAAA,MAAA,CAAO,CAACI,CAAAA,CAAKC,CAAU,GAAA,CACpE,IAAMC,CAAOD,CAAAA,CAAAA,EAAO,IAAM,EAAA,WAAA,CAC1B,OAAIC,CACFF,GAAAA,CAAAA,CAAIE,CAAI,CAAA,CAAA,CAAKF,EAAIE,CAAI,CAAA,EAAK,CAAK,EAAA,CAAA,CAAA,CAE1BF,CACT,CAAA,CAAG,EAAE,EAECG,CAAmC,CAAA,EACnCC,CAAAA,CAAAA,CAAkC,EAAC,CAEzC,IAAW,GAAA,CAACC,EAAK,CAAE,GAAA,CAAAC,CAAK,CAAA,GAAA,CAAAC,CAAI,CAAC,CAAK,GAAA,MAAA,CAAO,QAAQZ,CAAY,CAAA,CAAG,CAC9D,IAAMa,EAAQT,CAAoBM,CAAAA,CAAG,CAAK,EAAA,CAAA,CAEtCG,EAAQF,CACVH,EAAAA,CAAAA,CAAuB,IAAK,CAAA,CAAA,EAAGG,CAAME,CAAAA,CAAK,CAAQH,KAAAA,EAAAA,CAAG,GAAG,CAGtDE,CAAAA,CAAAA,GAAQ,MAAaC,EAAAA,CAAAA,CAAQD,GAC/BH,CAAsB,CAAA,IAAA,CAAK,CAAGI,EAAAA,CAAAA,CAAQD,CAAG,CAAQF,KAAAA,EAAAA,CAAG,CAAG,CAAA,CAAA,EAE3D,CAEA,GAAIF,CAAuB,CAAA,MAAA,EAAUC,EAAsB,MAAQ,CAAA,CACjE,IAAMK,CAAAA,CAAa,CAACC,CAAeC,CAAAA,CAAAA,GACjCA,CAAM,CAAA,MAAA,CAAS,IAAKD,CAAK,CAAA;AAAA,EAAUC,EAAAA,CAAAA,CAAM,IAAK,CAAA,IAAI,CAAC;AAAA,CAAO,CAAA,EAAA,CAEtDC,CACJ,CAAA,CAAA,SAAA,EAAYlB,CAAa,CAAA;AAAA,EACtBe,CAAAA,CAAW,uBAAyBN,CAAAA,CAAsB,CAAC,CAAA,EAC3DM,EAAW,yBAA2BL,CAAAA,CAAqB,CAAC,CAAA,CAAA,CAEjE,MAAM,IAAId,EAAwBsB,CAAa,CAAA,IAAA,EAAM,CACvD,CACF,CAoBO,SAASC,CAAmB,CAAA,CAAE,QAAApB,CAAAA,CAAAA,CAAU,aAAAC,CAAAA,CAAc,EAAG,CACnCG,QAAAA,CAAS,OAAQJ,CAAAA,CAAQ,CAEjC,CAAA,GAAA,CAAKQ,GAAU,CAChC,GAAIH,cAAeG,CAAAA,CAAK,CAElBA,EAAAA,CAAAA,CAAM,KAAK,IAAM,EAAA,UAAA,CAAW,KAAK,CAAA,CACnC,MAAM,IAAI,KACR,CAAA,CAAA,EAAGP,CAAa,CAAA,mDAAA,CAClB,CAGN,CAAC,EACH","file":"react.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// @ts-nocheck\nimport { Children, type ReactNode, isValidElement } from 'react';\n\nclass ComponentStructureError extends Error {\n constructor(message) {\n super(message);\n this.name = 'ComponentStructureError';\n }\n}\n\ntype ContainsExactChildrenProps = {\n componentName: string;\n // biome-ignore lint/suspicious/noExplicitAny: aria render props include a generic type\n children:\n | ReactNode\n | ReactNode[]\n | ((\n values: any & {\n defaultChildren: ReactNode | undefined;\n },\n ) => ReactNode);\n restrictions: Record<string, { min: number; max?: number }>;\n};\n\n/**\n * Validates the intended composite component structure.\n *\n * @param children the children of the component\n * @param componentName the displayName of the component\n * @param restrictions the record of validation rules\n */\nexport function containsExactChildren({\n children,\n componentName,\n restrictions,\n}: ContainsExactChildrenProps) {\n const childrenComponents = Children.toArray(children);\n\n if (!childrenComponents.every(isValidElement)) {\n throw new ComponentStructureError(\n `<${componentName}> received invalid children.`,\n );\n }\n\n const accumulationResults = childrenComponents.reduce((acc, child) => {\n const name = child?.type?.displayName;\n if (name) {\n acc[name] = (acc[name] || 0) + 1;\n }\n return acc;\n }, {});\n\n const missingComponentsArray: string[] = [];\n const excessComponentsArray: string[] = [];\n\n for (const [key, { min, max }] of Object.entries(restrictions)) {\n const found = accumulationResults[key] ?? 0;\n\n if (found < min) {\n missingComponentsArray.push(`${min - found} of <${key}>`);\n }\n\n if (max !== undefined && found > max) {\n excessComponentsArray.push(`${found - max} of <${key}>`);\n }\n }\n\n if (missingComponentsArray.length || excessComponentsArray.length) {\n const formatList = (label: string, items: string[]) =>\n items.length ? `\\t${label}:\\n\\t\\t${items.join(', ')}\\n` : '';\n\n const errorMessage =\n `Invalid <${componentName}> structure \\n` +\n `${formatList('Missing the following', missingComponentsArray)}` +\n `${formatList('Excess of the following', excessComponentsArray)}`;\n\n throw new ComponentStructureError(errorMessage.trim());\n }\n}\n\n/**\n * I look for svgIcons exported from the @accelint/icons library\n * and ensure that they are wrapped in an Icon component in order\n * to get the classes and styles they need in context.\n *\n * Using isValidElement means we will filter out strings, boolean, etc.\n * that are valid nodes but not elements.\n *\n * @example\n * expectsIconWrapper({\n * children,\n * componentName: Button.displayName,\n * });\n *\n *\n * @param children the children of the calling component\n * @param componentName the displayName of the calling component\n */\nexport function expectsIconWrapper({ children, componentName }) {\n const childrenComponents = Children.toArray(children);\n\n childrenComponents.map((child) => {\n if (isValidElement(child)) {\n // icons should never be a direct child of the parent\n if (child.type.name?.startsWith('Svg')) {\n throw new Error(\n `${componentName} is using an icon without the required Icon wrapper`,\n );\n }\n }\n });\n}\n"]}
|