@accelint/design-toolkit 7.0.1 → 8.1.0

package/dist/components/text-area-field/styles.module.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .field {
+    @apply gap-xs flex flex-col;
+  }
+
+  .input {
+    @apply fg-primary-bold rounded-medium p-s font-display outline-interactive block w-full outline;
+
+    @variant placeholder-shown {
+      @apply fg-primary-muted;
+    }
+
+    @variant group-size-medium/text-area-field {
+      @apply text-body-s;
+    }
+
+    @variant group-size-small/text-area-field {
+      @apply text-body-xs;
+    }
+
+    @variant hover {
+      @apply outline-interactive-hover;
+    }
+
+    @variant focus-visible {
+      @apply outline-accent-primary-bold;
+    }
+
+    @variant pressed {
+      @apply outline-accent-primary-pressed;
+    }
+
+    @variant group-invalid/text-area-field {
+      @apply outline-serious-bold;
+    }
+
+    @variant disabled {
+      @apply fg-disabled outline-interactive-disabled;
+    }
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs;
+
+    @variant group-disabled/text-area-field {
+      @apply fg-disabled;
+    }
+  }
+
+  .error {
+    @apply fg-serious-bold text-body-xs;
+  }
+}

package/dist/components/text-field/context.d.ts

@@ -4,11 +4,7 @@ import { ProviderProps } from '../../lib/types.js';
 import { ContextValue } from 'react-aria-components';
 import { TextFieldProps } from './types.js';
 import '../input/types.js';
-import 'tailwind-variants';
 import '../button/types.js';
-import '../button/styles.js';
-import 'tailwind-merge';
-import '../input/styles.js';
 import '../label/types.js';
 
 declare const TextFieldContext: react.Context<ContextValue<TextFieldProps, HTMLDivElement>>;

package/dist/components/text-field/index.d.ts

@@ -3,12 +3,8 @@ import { TextFieldProps } from './types.js';
 import 'react';
 import 'react-aria-components';
 import '../input/types.js';
-import 'tailwind-variants';
 import '../button/types.js';
 import '../../lib/types.js';
-import '../button/styles.js';
-import 'tailwind-merge';
-import '../input/styles.js';
 import '../label/types.js';
 
 /**
@@ -31,6 +27,30 @@ import '../label/types.js';
  * />
  *
  * @example
+ * // Text field with prefix for currency
+ * <TextField
+ *   label='Price'
+ *   inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}
+ *   description='Enter the price in dollars'
+ * />
+ *
+ * @example
+ * // Text field with suffix for units
+ * <TextField
+ *   label='Weight'
+ *   inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}
+ *   description='Enter the weight in kilograms'
+ * />
+ *
+ * @example
+ * // Text field with both prefix and suffix
+ * <TextField
+ *   label='Temperature'
+ *   inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}
+ *   description='Approximate temperature in Celsius'
+ * />
+ *
+ * @example
  * // Text field with error state
  * <TextField
  *   label='Username'

package/dist/components/text-field/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {useContextProps,TextField,composeRenderProps,Text,FieldError}from'react-aria-components';import {Input}from'../input/index.js';import {Label}from'../label/index.js';import {TextFieldContext}from'./context.js';import {TextFieldStyles}from'./styles.js';const{field:L,label:M,description:A,error:C}=TextFieldStyles();function D({ref:i,...l}){[l,i]=useContextProps(l,i??null,TextFieldContext);const{classNames:e,description:a,errorMessage:u,inputProps:x,label:o,size:t="medium",isInvalid:f,...b}=l,d=u||null,n=t==="small";return jsx(TextField,{...b,"aria-label":o,ref:i,className:composeRenderProps(e?.field,s=>L({className:s})),isInvalid:f||(d?true:void 0),"data-size":t,children:({isDisabled:s,isInvalid:m,isRequired:p})=>jsxs(Fragment,{children:[!!o&&!n&&jsx(Label,{className:M({className:e?.label}),isDisabled:s,isRequired:p,children:o}),jsx(Input,{...x,classNames:e?.input,disabled:s,required:p,size:t,isInvalid:m}),!!a&&!(n||m)&&jsx(Text,{slot:"description",className:A({className:e?.description}),children:a}),jsx(FieldError,{className:composeRenderProps(e?.error,F=>C({className:F})),children:d})]})})}export{D as TextField};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContextProps,TextField,composeRenderProps,Text,FieldError}from'react-aria-components';import {Input}from'../input/index.js';import {Label}from'../label/index.js';import {TextFieldContext}from'./context.js';import i from'./styles.module.css';function w({ref:o,...t}){[t,o]=useContextProps(t,o??null,TextFieldContext);const{classNames:e,description:n,errorMessage:x,inputProps:b,label:a,size:d="medium",isInvalid:F,...P}=t,p=x||null,m=d==="small";return jsx(TextField,{...P,"aria-label":a,ref:o,className:composeRenderProps(e?.field,l=>clsx("group/text-field",i.field,l)),isInvalid:F||(p?true:void 0),"data-size":d,children:({isDisabled:l,isInvalid:c,isRequired:u})=>jsxs(Fragment,{children:[!!a&&!m&&jsx(Label,{className:clsx(i.label,e?.label),isDisabled:l,isRequired:u,children:a}),jsx(Input,{...b,classNames:{...e?.input,sizer:clsx(i.input,e?.input?.sizer)},disabled:l,required:u,size:d,isInvalid:c}),!!n&&!(m||c)&&jsx(Text,{slot:"description",className:clsx(i.description,e?.description),children:n}),jsx(FieldError,{className:composeRenderProps(e?.error,T=>clsx(i.error,T)),children:p})]})})}export{w as TextField};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["description","error","props","z","ref","TextFieldContext","v","classNames","y","errorMessageProp","inputProps","size","isInvalidProp","jsx","AriaTextField","rest","r","className","field","c","jsxs","isSmall","S","E","isRequired","Input","I","isInvalid","descriptionProp","N","composeRenderProps","errorMessage"],"mappings":"yUA2BsB,KAAA,CAAAA,KAAa,CAAA,CAAA,CAAAC,KAA0B,CAAA,CAgEtD,CAAA,WAAqB,CAAA,CAAA,CAAA,KAAK,CAAGC,CAAM,EAAmBC,eAC3D,GAAQC,SAA8BA,CAAO,CAAA,CAAA,GAAMC,CAAgB,CAAA,CAEnE,GAAA,CAAA,CAAM,CACJ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,eAAA,CAAA,CAAA,CAAAC,CAAAA,EACA,IAAA,CAAAC,gBAAA,CAAA,CAAA,KACA,CAAA,UAAA,CAAA,CAAcC,CAAAA,WACd,CAAAC,CAAAA,CACA,aACAC,CAAAA,CAAO,UACP,CAAA,CAAA,CAAA,KAAA,CAAWC,CAAAA,CACX,IACF,EAAIV,CAAAA,QACqC,CAAA,gBAGzC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACEW,EAACC,IACE,CAAA,CAAGC,CAAAA,CACJ,kBACAC,GAAKZ,CAAAA,SACL,CAAA,CAAA,GAAA,CAAA,CAAA,cAAkDa,CAAAA,GAChDC,CAAM,CAAE,CAAA,SAAAD,CAAUE,kBAAC,CACrB,CAAA,EACA,KAAA,CAAA,CAAA,EAAWP,CAAAA,CAAAA,CAAAA,cACX,CAAA,SAAA,CAAA,CAAWD,GAEV,CAAA,CAAA,IAAA,CAAA,MACG,CAAA,CAAA,sBAAuB,CAAA,CAAA,CAAA,UAAW,CAAA,CAAA,CAEpCS,SACG,CAAA,CAAA,CAAA,UAAgBC,CAAAA,CACfR,CAAAA,GAACS,IACC,CAAAC,QAAA,CAAA,CAAA,QAAiB,CAAE,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAWhB,GAAAA,CAAAA,KAAY,WAC1C,CAAA,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,EAAA,KAAYiB,CAEX,YACH,CAEFX,CAAAA,CAACY,UAEC,CAAA,CAAA,CAAA,QAAYlB,CAAY,CAAA,CAAA,CAAA,CAAAS,GAAA,CACxBU,KAAA,CAAA,CAAA,GAAA,CAAA,CAAA,UACA,CAAA,CAAUF,EACV,KAAMb,CAAAA,QACN,CAAA,CAAA,CAAWgB,QAEVC,CAAmB,CAAA,CAAEP,IAAWM,CAAAA,CAAAA,CACjCd,SACE,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EACL,CAAA,CAAA,EAAAG,GAAA,CAAAa,IAAA,CAAA,CAAA,IAAyB,CAAA,aAAuB,CAAA,SAAY,CAAC,CAAA,CAE5D,CAAA,SAAAD,CACH,CAAA,aAGA,CAAA,CAAA,CAAWE,QAA+B,CAAA,CAAA,CAAQb,KAChDhB,CAAAA,UAAM,CAAE,CAAA,SAAAgB,CAAUE,kBAAC,CACrB,GAEC,KAAA,CAAA,CAAA,EAAAY,CACH,CAAA,CAAA,SAKV,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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'use client';\n\nimport 'client-only';\nimport {\n  TextField as AriaTextField,\n  composeRenderProps,\n  FieldError,\n  Text,\n  useContextProps,\n} from 'react-aria-components';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldContext } from './context';\nimport { TextFieldStyles } from './styles';\nimport type { TextFieldProps } from './types';\n\nconst { field, label, description, error } = TextFieldStyles();\n\n/**\n * TextField - A complete form field component with label, input, and validation\n *\n * Provides a comprehensive form field experience combining label, input, description,\n * and error message components. Handles validation states and accessibility\n * automatically while supporting extensive customization through styling props.\n *\n * @example\n * // Basic text field with label and required validation\n * <TextField label='Full Name' isRequired defaultValue='John Doe' />\n *\n * @example\n * // Text field with placeholder and description\n * <TextField\n *   label='Email Address'\n *   inputProps={{ placeholder: 'Enter your email address', type: 'email' }}\n *   description='We will never share your email with third parties'\n * />\n *\n * @example\n * // Text field with error state\n * <TextField\n *   label='Username'\n *   isInvalid\n *   errorMessage='Username must be at least 3 characters long'\n *   inputProps={{ placeholder: 'Enter username' }}\n * />\n *\n * @example\n * // Small size text field with clearable input\n * <TextField\n *   label='Search'\n *   size='small'\n *   inputProps={{\n *     placeholder: 'Type to search...',\n *     isClearable: true,\n *     type: 'search'\n *   }}\n * />\n *\n * @example\n * // Disabled text field\n * <TextField\n *   label='Status'\n *   isDisabled\n *   defaultValue='Inactive'\n *   description='This field cannot be edited'\n * />\n *\n * @example\n * // Password field with validation\n * <TextField\n *   label='Password'\n *   isRequired\n *   inputProps={{\n *     type: 'password',\n *     placeholder: 'Enter a secure password',\n *     minLength: 8\n *   }}\n *   description='Password must be at least 8 characters'\n * />\n */\nexport function TextField({ ref, ...props }: TextFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className }),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={label({ className: classNames?.label })}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <Input\n            {...inputProps}\n            classNames={classNames?.input}\n            disabled={isDisabled}\n            required={isRequired}\n            size={size}\n            isInvalid={isInvalid}\n          />\n          {!!descriptionProp && !(isSmall || isInvalid) && (\n            <Text\n              slot='description'\n              className={description({ className: classNames?.description })}\n            >\n              {descriptionProp}\n            </Text>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["props","ref","TextFieldContext","g","classNames","L","descriptionProp","rest","errorMessageProp","size","AriaTextField","s","className","clsx","f","styles","r","isInvalidProp","errorMessage","isDisabled","isInvalid","isRequired","labelProp","isSmall","jsx","Label","inputProps","z"],"mappings":"2XAmHE,SAA+BA,CAAOC,CAAAA,CAAAA,MAAaC,GAEnD,KAAM,CACJ,CAAA,CAAA,CAAA,CAAAC,eAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,IACA,CAAAC,gBAAA,CAAA,CAAA,KAAA,CAAaC,UACb,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,YAEA,CAAA,CAAA,CAAA,YACA,CAAA,KAAA,CAAA,CAAA,CAAA,IACA,CAAA,CAAGC,CACL,QACqBC,CAAoB,SACzBC,CAAAA,CAAS,CAAA,GAAA,CAAA,CAAA,CAAA,CAEzB,CAAA,CAAA,CAAA,CAAA,EAAA,IACGC,CAAA,CACE,CAAA,CAAA,GACD,OAAA,CAAA,OACAC,cAAKV,CAAAA,GACL,CAAA,CAAA,YAA0C,CAAA,CAAA,CAAA,GAAQW,CAAAA,CAChDC,UAAK,CAAAC,kBAAA,CAAA,CAAA,EAAA,KAAoBC,CAAAA,CAAO,EAAAC,IAAA,CAAA,kBAEvBC,CAAAA,CAAkBC,CAAAA,KAAsB,CAAA,CAAA,CAAA,CAAA,CAAA,SACnD,CAAA,CAAA,GAAWT,EAEV,IAAA,CAAA,MAAA,CACC,CAAE,WAAAU,CAAAA,CAAY,CAAA,QAAA,CAAAC,CAAAA,CAAW,WAAAC,CAAW,CAAA,SAGjC,CAAA,CAAA,CAAA,UAAEC,CAAa,CAACC,CAAAA,GACfC,IAACC,CAAAA,QAAA,CACC,UAAWZ,CAAAA,CAAKE,CAAAA,CAAO,EAAA,CAAA,CAAA,EAAOX,GAAAA,CAAAA,KAAY,CAAA,CAAA,sBAE1C,CAAA,CAAA,EAAA,KAAA,CAAYiB,CAAAA,UAEXC,CAAAA,CACH,CAAA,UAGII,CACJ,CAAA,CAAA,QAAA,CAAY,CACV,GAAGtB,GAAAA,CAAAA,KAAY,CAAA,CAAA,GAAA,CACf,CAAA,UAAmB,CAAA,CAAA,GAAOA,GAAY,KAAA,CAAA,KAAO,CAAKY,IACpD,CAAA,CACA,CAAA,KAAA,CAAA,CAAA,OACA,EAAA,KACA,CAAA,CAAA,CAAA,QACA,CAAA,CAAA,CAAA,QAEA,CAACV,CAAAA,CAAAA,IAAqBiB,CAAAA,CAAWH,CAAAA,SAE/B,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EACLT,GAAA,CAAAgB,IAAA,CAAA,CAAA,IAAWd,CAAAA,aAAY,CAAA,SAAyB,CAAAG,IAAA,CAAA,CAAA,CAAA,WAE/C,CAAAV,CAAAA,aAIH,CAAA,CAAA,QAA0C,QAAQM,CAAAA,UAAAA,CAChDC,CAAAA,SAAmBD,CAASE,kBAC9B,EAEC,EAAA,KAAA,CAAA,CAAAI,EACHF,IAAA,CAAA,CACF,CAAA,KAIR,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  TextField as AriaTextField,\n  composeRenderProps,\n  FieldError,\n  Text,\n  useContextProps,\n} from 'react-aria-components';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { TextFieldProps } from './types';\n\n/**\n * TextField - A complete form field component with label, input, and validation\n *\n * Provides a comprehensive form field experience combining label, input, description,\n * and error message components. Handles validation states and accessibility\n * automatically while supporting extensive customization through styling props.\n *\n * @example\n * // Basic text field with label and required validation\n * <TextField label='Full Name' isRequired defaultValue='John Doe' />\n *\n * @example\n * // Text field with placeholder and description\n * <TextField\n *   label='Email Address'\n *   inputProps={{ placeholder: 'Enter your email address', type: 'email' }}\n *   description='We will never share your email with third parties'\n * />\n *\n * @example\n * // Text field with prefix for currency\n * <TextField\n *   label='Price'\n *   inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}\n *   description='Enter the price in dollars'\n * />\n *\n * @example\n * // Text field with suffix for units\n * <TextField\n *   label='Weight'\n *   inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}\n *   description='Enter the weight in kilograms'\n * />\n *\n * @example\n * // Text field with both prefix and suffix\n * <TextField\n *   label='Temperature'\n *   inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}\n *   description='Approximate temperature in Celsius'\n * />\n *\n * @example\n * // Text field with error state\n * <TextField\n *   label='Username'\n *   isInvalid\n *   errorMessage='Username must be at least 3 characters long'\n *   inputProps={{ placeholder: 'Enter username' }}\n * />\n *\n * @example\n * // Small size text field with clearable input\n * <TextField\n *   label='Search'\n *   size='small'\n *   inputProps={{\n *     placeholder: 'Type to search...',\n *     isClearable: true,\n *     type: 'search'\n *   }}\n * />\n *\n * @example\n * // Disabled text field\n * <TextField\n *   label='Status'\n *   isDisabled\n *   defaultValue='Inactive'\n *   description='This field cannot be edited'\n * />\n *\n * @example\n * // Password field with validation\n * <TextField\n *   label='Password'\n *   isRequired\n *   inputProps={{\n *     type: 'password',\n *     placeholder: 'Enter a secure password',\n *     minLength: 8\n *   }}\n *   description='Password must be at least 8 characters'\n * />\n */\nexport function TextField({ ref, ...props }: TextFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/text-field', styles.field, className),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <Input\n            {...inputProps}\n            classNames={{\n              ...classNames?.input,\n              sizer: clsx(styles.input, classNames?.input?.sizer),\n            }}\n            disabled={isDisabled}\n            required={isRequired}\n            size={size}\n            isInvalid={isInvalid}\n          />\n          {!!descriptionProp && !(isSmall || isInvalid) && (\n            <Text\n              slot='description'\n              className={clsx(styles.description, classNames?.description)}\n            >\n              {descriptionProp}\n            </Text>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              clsx(styles.error, className),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n"]}

package/dist/components/text-field/styles.module.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .field {
+    @apply gap-xs flex flex-col;
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs;
+
+    @variant group-disabled/text-field {
+      @apply fg-disabled;
+    }
+  }
+
+  .error {
+    @apply fg-serious-bold text-body-xs;
+  }
+}
+
+@layer components.l2 {
+  .input {
+    @apply max-w-none;
+  }
+}

package/dist/components/text-field/types.d.ts

@@ -2,12 +2,8 @@ import { RefAttributes } from 'react';
 import { TextFieldProps as TextFieldProps$1, FieldErrorProps } from 'react-aria-components';
 import { InputProps } from '../input/types.js';
 import { LabelProps } from '../label/types.js';
-import 'tailwind-variants';
 import '../button/types.js';
 import '../../lib/types.js';
-import '../button/styles.js';
-import 'tailwind-merge';
-import '../input/styles.js';
 
 type TextFieldProps = Omit<TextFieldProps$1, 'children' | 'className' | 'type' | 'pattern'> & RefAttributes<HTMLDivElement> & {
     classNames?: {

package/dist/components/time-field/index.d.ts

@@ -1,9 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TimeValue } from 'react-aria-components';
 import { TimeFieldProps } from './types.js';
-import 'tailwind-variants';
-import './styles.js';
-import 'tailwind-merge';
 
 /**
  * TimeField - Form input for time values

package/dist/components/time-field/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Time}from'@accelint/icons';import'client-only';import {TimeField,composeRenderProps,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {TimeFieldStyles}from'./styles.js';const{field:R,label:c,control:V,input:Z,description:k,error:q,segment:C}=TimeFieldStyles();function P({classNames:i,description:s,errorMessage:T,granularity:f="second",hourCycle:F=24,inputProps:b,label:m,shouldForceLeadingZeros:g=true,size:t="medium",isDisabled:y,isInvalid:n,isRequired:d,...A}){const l=T||null,p=t==="small";return jsx(TimeField,{...A,className:composeRenderProps(i?.field,o=>R({className:o})),granularity:f,hourCycle:F,shouldForceLeadingZeros:g,isDisabled:y,isInvalid:n||(l?true:void 0),isRequired:d,"aria-label":m,"data-size":t,children:({isDisabled:o})=>jsxs(Fragment,{children:[!p&&c&&jsx(Label,{className:c({className:i?.label}),isDisabled:o,isRequired:d,children:m}),jsxs("div",{className:V({className:i?.control}),children:[t==="medium"&&jsx(Icon,{children:jsx(Time,{})}),jsx(DateInput,{...b,className:composeRenderProps(i?.input,r=>Z({className:r})),children:r=>jsx(DateSegment,{segment:r,className:composeRenderProps(i?.segment,D=>C({className:D}))})}),jsx("span",{children:"Z"})]}),s&&!(p||n)&&!l&&jsx(Text,{className:k({className:i?.description}),slot:"description",children:s}),jsx(FieldError,{className:composeRenderProps(i?.error,r=>q({className:r})),children:l})]})})}export{P as TimeField};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {Time}from'@accelint/icons';import {TimeField,composeRenderProps,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import t from'./styles.module.css';function G({classNames:i,description:d,errorMessage:f,granularity:g="second",hourCycle:F=24,inputProps:b,label:a,shouldForceLeadingZeros:y=true,size:m="medium",isDisabled:A,isInvalid:p,isRequired:u,...D}){const s=f||null,c=m==="small";return jsx(TimeField,{...D,className:composeRenderProps(i?.field,n=>clsx("group/time-field",t.field,n)),granularity:g,hourCycle:F,shouldForceLeadingZeros:y,isDisabled:A,isInvalid:p||(s?true:void 0),isRequired:u,"aria-label":a,"data-size":m,children:({isDisabled:n})=>jsxs(Fragment,{children:[!c&&a&&jsx(Label,{className:clsx(t.label,i?.label),isDisabled:n,isRequired:u,children:a}),jsxs("div",{className:clsx(t.control,i?.control),children:[m==="medium"&&jsx(Icon,{children:jsx(Time,{})}),jsx(DateInput,{...b,className:composeRenderProps(i?.input,o=>clsx(t.input,o)),children:o=>jsx(DateSegment,{segment:o,className:composeRenderProps(i?.segment,I=>clsx(t.segment,I))})}),jsx("span",{children:"Z"})]}),d&&!(c||p)&&!s&&jsx(Text,{slot:"description",className:clsx(t.description,i?.description),children:d}),jsx(FieldError,{className:composeRenderProps(i?.error,o=>clsx(t.error,o)),children:s})]})})}export{G as TimeField};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/time-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/time-field/index.tsx"],"names":["control","input","description","error","TimeField","M","classNames","labelProp","shouldForceLeadingZeros","isDisabled","isInvalidProp","isRequired","isSmall","AriaTimeField","rest","L","className","field","a","hourCycle","label","Label","w","e","E","u","size","jsx","AriaDateInput","composeRenderProps","v","segmentProp","AriaText","x","descriptionProp","errorMessage"],"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'use client';\n\nimport { Time } from '@accelint/icons';\nimport 'client-only';\nimport {\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  TimeField as AriaTimeField,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n  type TimeValue,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { TimeFieldStyles } from './styles';\nimport type { TimeFieldProps } from './types';\n\nconst { field, label, control, input, description, error, segment } =\n  TimeFieldStyles();\n\n/**\n * TimeField - Form input for time values\n *\n * A time input field with configurable granularity and size, built on React\n * Aria components and suitable for forms requiring time entry.\n *\n * @example\n * <TimeField label=\"Time\" granularity=\"second\" />\n */\nexport function TimeField<T extends TimeValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  granularity = 'second',\n  hourCycle = 24,\n  inputProps,\n  label: labelProp,\n  shouldForceLeadingZeros = true,\n  size = 'medium',\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: TimeFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTimeField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className }),\n      )}\n      granularity={granularity}\n      hourCycle={hourCycle}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && label && (\n            <Label\n              className={label({ className: classNames?.label })}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div className={control({ className: classNames?.control })}>\n            {size === 'medium' && (\n              <Icon>\n                <Time />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                input({\n                  className,\n                }),\n              )}\n            >\n              {(segmentProp) => (\n                <DateSegment\n                  segment={segmentProp}\n                  className={composeRenderProps(\n                    classNames?.segment,\n                    (className) => segment({ className }),\n                  )}\n                />\n              )}\n            </AriaDateInput>\n            <span>Z</span>\n          </div>\n          {descriptionProp && !(isSmall || isInvalidProp) && !errorMessage && (\n            <AriaText\n              className={description({\n                className: classNames?.description,\n              })}\n              slot='description'\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTimeField>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/time-field/index.tsx"],"names":["hourCycle","labelProp","isDisabled","isSmall","size","jsx","AriaTimeField","composeRenderProps","classNames","className","l","styles","isRequired","Fragment","Label","clsx","e","S","r","R","AriaDateInput","v","segmentProp","E","descriptionProp","isInvalidProp","errorMessage","AriaText","L","M"],"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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Time } from '@accelint/icons';\nimport {\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  TimeField as AriaTimeField,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n  type TimeValue,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { TimeFieldProps } from './types';\n\n/**\n * TimeField - Form input for time values\n *\n * A time input field with configurable granularity and size, built on React\n * Aria components and suitable for forms requiring time entry.\n *\n * @example\n * <TimeField label=\"Time\" granularity=\"second\" />\n */\nexport function TimeField<T extends TimeValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  granularity = 'second',\n  hourCycle = 24,\n  inputProps,\n  label: labelProp,\n  shouldForceLeadingZeros = true,\n  size = 'medium',\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: TimeFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTimeField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/time-field', styles.field, className),\n      )}\n      granularity={granularity}\n      hourCycle={hourCycle}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && labelProp && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div className={clsx(styles.control, classNames?.control)}>\n            {size === 'medium' && (\n              <Icon>\n                <Time />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => (\n                <DateSegment\n                  segment={segmentProp}\n                  className={composeRenderProps(\n                    classNames?.segment,\n                    (className) => clsx(styles.segment, className),\n                  )}\n                />\n              )}\n            </AriaDateInput>\n            <span>Z</span>\n          </div>\n          {descriptionProp && !(isSmall || isInvalidProp) && !errorMessage && (\n            <AriaText\n              slot='description'\n              className={clsx(styles.description, classNames?.description)}\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              clsx(styles.error, className),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTimeField>\n  );\n}\n"]}

package/dist/components/time-field/styles.module.css

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .field {
+    @apply gap-xs flex w-fit flex-col;
+  }
+
+  .control {
+    @apply gap-xs rounded-medium px-s py-xs font-display outline-interactive fg-primary-bold flex w-full items-center outline;
+
+    @variant group-size-medium/time-field {
+      @apply text-body-s;
+    }
+
+    @variant group-size-small/time-field {
+      @apply text-body-xs;
+    }
+
+    @variant hover {
+      @apply outline-interactive-hover;
+    }
+
+    @variant focus-visible-within {
+      @apply outline-accent-primary-bold;
+    }
+
+    @variant group-invalid/time-field {
+      @apply outline-serious-bold;
+    }
+
+    @variant group-disabled/time-field {
+      @apply fg-disabled outline-interactive-disabled;
+    }
+  }
+
+  .input {
+    @apply flex;
+  }
+
+  .segment {
+    @apply text-right;
+
+    @variant placeholder-shown {
+      @apply fg-primary-muted;
+    }
+
+    @variant focus-visible {
+      @apply fg-a11y-on-accent bg-accent-primary-bold outline-none;
+    }
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs;
+
+    @variant group-disabled/time-field {
+      @apply fg-disabled;
+    }
+  }
+
+  .error {
+    @apply fg-serious-bold text-body-xs;
+  }
+}

package/dist/components/time-field/types.d.ts

@@ -1,9 +1,6 @@
 import { TimeValue, TimeFieldProps as TimeFieldProps$1, LabelProps, DateInputProps, DateSegmentProps, FieldErrorProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-import { TimeFieldStyles } from './styles.js';
-import 'tailwind-merge';
 
-type TimeFieldProps<T extends TimeValue> = Omit<TimeFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & VariantProps<typeof TimeFieldStyles> & {
+type TimeFieldProps<T extends TimeValue> = Omit<TimeFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & {
     classNames?: {
         field?: TimeFieldProps$1<T>['className'];
         label?: LabelProps['className'];
@@ -14,10 +11,10 @@ type TimeFieldProps<T extends TimeValue> = Omit<TimeFieldProps$1<T>, 'children'
         error?: FieldErrorProps['className'];
     };
     label?: string;
+    inputProps?: Omit<DateInputProps, 'children' | 'className'>;
     description?: string;
     errorMessage?: string;
     size?: 'small' | 'medium';
-    inputProps?: Omit<DateInputProps, 'children' | 'className'>;
 };
 
 export type { TimeFieldProps };

package/dist/components/tooltip/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx}from'react/jsx-runtime';import {useIsSSR}from'@react-aria/ssr';import {PortalProvider}from'./../../providers/portal.js';import'client-only';import {useMemo}from'react';import {Tooltip,composeRenderProps}from'react-aria-components';import {TooltipStyles}from'./styles.js';function A({children:e,parentRef:i,className:p,offset:s=5,placement:l="bottom",...m}){const t=useIsSSR(),n=useMemo(()=>{if(t)return null;const o=document.createElement("div");return o.setAttribute("class","absolute"),o},[t]);return jsx(PortalProvider,{parentRef:i,inject:n,children:jsx(Tooltip,{...m,className:composeRenderProps(p,o=>TooltipStyles({className:o})),offset:s,placement:l,children:e})})}export{A as Tooltip};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useIsSSR}from'@react-aria/ssr';import {useMemo}from'react';import {Tooltip,composeRenderProps}from'react-aria-components';import {PortalProvider}from'./../../providers/portal.js';import T from'./styles.module.css';function C({children:e,parentRef:i,className:p,offset:s=5,placement:m="bottom",...l}){const t=useIsSSR(),n=useMemo(()=>{if(t)return null;const o=document.createElement("div");return o.setAttribute("class","absolute"),o},[t]);return jsx(PortalProvider,{parentRef:i,inject:n,children:jsx(Tooltip,{...l,className:composeRenderProps(p,o=>clsx(T.tooltip,o)),offset:s,placement:m,children:e})})}export{C as Tooltip};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["className","placement","props","isSSR","overlayContainer","useMemo","f","div","jsx","PortalProvider","r","parentRef","AriaTooltip","u","T","offset"],"mappings":"2RA6DE,SACA,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,SAAAA,CACA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,MAAA,CAAAC,EAAY,CAAA,CAAA,SACZ,CAAGC,CACL,CAAA,QACQC,IAAiB,CAAA,CACjBC,CAAAA,CAAmBC,MAAc,CACrC,WAAIF,CACF,CAAA,CAAAG,OAAA,CAAA,IAAO,CAAA,GAET,CAAA,CAAA,OAAY,IAAA,CAAA,iBAAuB,aACnC,CAAAC,KAAI,CAAA,CAAA,OAAA,CAAa,CAAA,oBAEnB,CAAA,UAEA,CAAA,CAAA,CACEC,CAAAA,CAACC,CAAAA,CAAA,CAAe,CAAA,CAAA,OAAAC,GAAWC,CAAAA,cAAW,WACpC,CAAA,CAAA,CAAA,MAACC,CAAAA,CAAA,CACE,QACD,CAAAF,GAAA,CAAAG,OAAA,CAAA,CAAA,GAA8Bb,CAAAA,CAAYA,kCACdc,aAAC,CAC7B,CAAA,SACQC,CACR,WAAWd,CAEV,CAAA,CAAA,SACH,CAAA,CACF,CAEJ,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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'use client';\n\nimport { useIsSSR } from '@react-aria/ssr';\nimport { PortalProvider } from '@/providers/portal';\nimport 'client-only';\nimport { useMemo } from 'react';\nimport {\n  Tooltip as AriaTooltip,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { TooltipStyles } from './styles';\nimport type { TooltipProps } from './types';\n\n/**\n * Tooltip - A contextual popup component for providing additional information\n *\n * Displays helpful information when users hover over or focus on an element.\n * Provides accessible tooltip functionality with proper positioning, keyboard\n * navigation, and screen reader support for enhanced user experience.\n *\n * @example\n * // Basic tooltip\n * <TooltipTrigger>\n *   <Button>Hover me</Button>\n *   <Tooltip>\n *     This is helpful information\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Tooltip with custom positioning\n * <TooltipTrigger>\n *   <Button>Hover for info</Button>\n *   <Tooltip placement=\"top\" offset={10}>\n *     Positioned above with custom offset\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Icon with tooltip\n * <TooltipTrigger>\n *   <Button variant=\"icon\">\n *     <Icon><Info /></Icon>\n *   </Button>\n *   <Tooltip>\n *     Additional context for this action\n *   </Tooltip>\n * </TooltipTrigger>\n */\nexport function Tooltip({\n  children,\n  parentRef,\n  className,\n  offset = 5,\n  placement = 'bottom',\n  ...props\n}: TooltipProps) {\n  const isSSR = useIsSSR();\n  const overlayContainer = useMemo(() => {\n    if (isSSR) {\n      return null;\n    }\n    const div = document.createElement('div');\n    div.setAttribute('class', 'absolute');\n    return div;\n  }, [isSSR]);\n\n  return (\n    <PortalProvider parentRef={parentRef} inject={overlayContainer}>\n      <AriaTooltip\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          TooltipStyles({ className }),\n        )}\n        offset={offset}\n        placement={placement}\n      >\n        {children}\n      </AriaTooltip>\n    </PortalProvider>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["children","parentRef","className","offset","placement","isSSR","useIsSSR","div","jsx","PortalProvider","overlayContainer","AriaTooltip","r","u","composeRenderProps","styles","P","a"],"mappings":"+UA6DwB,SACtB,CAAAA,EACA,QAAA,CAAA,CAAAC,CAAAA,SACA,CAAA,CAAAC,CAAAA,SACAC,CAAS,EACT,MAAA,CAAA,CAAA,CAAA,CAAAC,CAAAA,SAAY,CACZ,CAAA,CAAA,QAEA,CAAA,GAAMC,CAAQC,CAAAA,CAAS,CAAA,gBACgB,EACrC,CAAA,CAAID,CAAAA,OACF,CAAA,IAAA,CAAA,GAAO,CAAA,CAAA,OAGHE,IAAM,CAAA,MAAS,CAAA,CAAA,QAAA,CAAA,aAErB,CAAA,KAAI,uBAAsB,CAAA,OAAU,CAAA,UAKtC,CAAA,CAAA,CAAA,CAAA,CAAA,CACEC,CAAAA,CAACC,CAAAA,CAAA,0BAA0BR,CAAAA,SAAmBS,CAC5C,CAAA,CAAA,MAAA,CAAAF,CAAAA,CAACG,QAEC,CAAAC,GAAA,CAAAC,OAAA,CAAA,CAAA,GAAA,CAAWC,CAAAA,SACJC,CAAOC,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,IAASf,CAAS,CAChC,CAAA,OACA,CAAQC,CAAAA,CACR,CAAA,CAAA,MAAA,CAAA,CAAWC,CAAAA,SAEV,CAAAJ,CAAAA,CACH,QAGN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useIsSSR } from '@react-aria/ssr';\nimport { useMemo } from 'react';\nimport {\n  Tooltip as AriaTooltip,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { PortalProvider } from '@/providers/portal';\nimport styles from './styles.module.css';\nimport type { TooltipProps } from './types';\n\n/**\n * Tooltip - A contextual popup component for providing additional information\n *\n * Displays helpful information when users hover over or focus on an element.\n * Provides accessible tooltip functionality with proper positioning, keyboard\n * navigation, and screen reader support for enhanced user experience.\n *\n * @example\n * // Basic tooltip\n * <TooltipTrigger>\n *   <Button>Hover me</Button>\n *   <Tooltip>\n *     This is helpful information\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Tooltip with custom positioning\n * <TooltipTrigger>\n *   <Button>Hover for info</Button>\n *   <Tooltip placement=\"top\" offset={10}>\n *     Positioned above with custom offset\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Icon with tooltip\n * <TooltipTrigger>\n *   <Button variant=\"icon\">\n *     <Icon><Info /></Icon>\n *   </Button>\n *   <Tooltip>\n *     Additional context for this action\n *   </Tooltip>\n * </TooltipTrigger>\n */\nexport function Tooltip({\n  children,\n  parentRef,\n  className,\n  offset = 5,\n  placement = 'bottom',\n  ...props\n}: TooltipProps) {\n  const isSSR = useIsSSR();\n  const overlayContainer = useMemo(() => {\n    if (isSSR) {\n      return null;\n    }\n\n    const div = document.createElement('div');\n\n    div.setAttribute('class', 'absolute');\n\n    return div;\n  }, [isSSR]);\n\n  return (\n    <PortalProvider parentRef={parentRef} inject={overlayContainer}>\n      <AriaTooltip\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tooltip, className),\n        )}\n        offset={offset}\n        placement={placement}\n      >\n        {children}\n      </AriaTooltip>\n    </PortalProvider>\n  );\n}\n"]}

package/dist/components/tooltip/styles.module.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .tooltip {
+    @apply fg-primary-bold rounded-small bg-surface-overlay px-s py-xs text-body-xs shadow-elevation-overlay flex items-center justify-center text-center wrap-break-word;
+    max-width: 160px;
+  }
+}

package/dist/components/tree/context.d.ts

@@ -2,9 +2,7 @@ import * as react from 'react';
 import { TreeContextValue, TreeItemContextValue } from './types.js';
 import '@react-types/shared';
 import 'react-aria-components';
-import 'tailwind-variants';
 import '../../hooks/use-tree/types.js';
-import './styles.js';
 
 /**
  * Context for Tree component

package/dist/components/tree/context.js

@@ -1,4 +1,4 @@
 'use client';
 
-import'client-only';import {createContext}from'react';import {TreeStylesDefaults}from'./styles.js';const s=createContext({visibilityComputedKeys:new Set,showRuleLines:true,showVisibility:false,variant:TreeStylesDefaults.variant,isStatic:true,onVisibilityChange:()=>{}}),n=createContext({isVisible:true,isViewable:true,ancestors:[]});export{s as TreeContext,n as TreeItemContext};//# sourceMappingURL=context.js.map
+import'client-only';import {createContext}from'react';const o=createContext({visibilityComputedKeys:new Set,showRuleLines:true,showVisibility:false,variant:"cozy",isStatic:true,onVisibilityChange:()=>{}}),r=createContext({isVisible:true,isViewable:true,ancestors:[]});export{o as TreeContext,r as TreeItemContext};//# sourceMappingURL=context.js.map
 //# sourceMappingURL=context.js.map

package/dist/components/tree/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tree/context.tsx"],"names":["e","TreeItemContext","createContext"],"mappings":"yGAqB2D,CACzD,CAAAA,aAAA,CAAA,CAAA,uBAA4B,IAC5B,GAAA,CAAA,aACA,CAAA,IAAA,CAAA,cACA,CAAA,KAAA,CAAA,kCACA,CAAA,QACA,wBAAoB,CAAG,IACxB,CAKYC,CAAAA,CAAkBC,CAAAA,CAAoC,CACjE,yBACA,CAAA,IAAA,CAAA,UACA,CAAA,IAAA,CAAA,SACD,CAAA,EAAA,CAAA","file":"context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport { TreeStylesDefaults } from './styles';\nimport type { TreeContextValue, TreeItemContextValue } from './types';\n\n/**\n * Context for Tree component\n */\nexport const TreeContext = createContext<TreeContextValue>({\n  visibilityComputedKeys: new Set(),\n  showRuleLines: true,\n  showVisibility: false,\n  variant: TreeStylesDefaults.variant,\n  isStatic: true,\n  onVisibilityChange: () => undefined,\n});\n\n/**\n * Context for TreeItem component\n */\nexport const TreeItemContext = createContext<TreeItemContextValue>({\n  isVisible: true,\n  isViewable: true,\n  ancestors: [],\n});\n"]}
+{"version":3,"sources":["../../../src/components/tree/context.tsx"],"names":["TreeContext","createContext","TreeItemContext"],"mappings":"sDAoBO,MAAMA,CAAAA,CAAcC,aAAAA,CAAgC,CACzD,uBAAwB,IAAI,GAAA,CAC5B,aAAA,CAAe,IAAA,CACf,eAAgB,KAAA,CAChB,OAAA,CAAS,MAAA,CACT,QAAA,CAAU,KACV,kBAAA,CAAoB,IAAG,CAAA,CACzB,CAAC,EAKYC,CAAAA,CAAkBD,aAAAA,CAAoC,CACjE,SAAA,CAAW,KACX,UAAA,CAAY,IAAA,CACZ,SAAA,CAAW,EACb,CAAC","file":"context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { TreeContextValue, TreeItemContextValue } from './types';\n\n/**\n * Context for Tree component\n */\nexport const TreeContext = createContext<TreeContextValue>({\n  visibilityComputedKeys: new Set(),\n  showRuleLines: true,\n  showVisibility: false,\n  variant: 'cozy',\n  isStatic: true,\n  onVisibilityChange: () => undefined,\n});\n\n/**\n * Context for TreeItem component\n */\nexport const TreeItemContext = createContext<TreeItemContextValue>({\n  isVisible: true,\n  isViewable: true,\n  ancestors: [],\n});\n"]}

package/dist/components/tree/index.d.ts

@@ -2,10 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TreeProps } from './types.js';
 import '@react-types/shared';
 import 'react-aria-components';
-import 'tailwind-variants';
 import '../../hooks/use-tree/types.js';
 import 'react';
-import './styles.js';
 
 /**
  * Tree - Hierarchical tree view with optional drag-and-drop and visibility

package/dist/components/tree/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx}from'react/jsx-runtime';import {Cache}from'./../../hooks/use-tree/actions/cache.js';import'client-only';import {useMemo}from'react';import {useDragAndDrop,Tree,composeRenderProps,DropIndicator}from'react-aria-components';import {TreeContext}from'./context.js';import {TreeStyles,TreeStylesDefaults}from'./styles.js';const{tree:L}=TreeStyles(),Q=i=>jsx(DropIndicator,{target:i,className:"border border-highlight-hover"});function $({children:i,className:h,disabledKeys:s,dragAndDropConfig:T,expandedKeys:d,items:r,selectedKeys:a,showRuleLines:g=true,showVisibility:b=true,selectionMode:w="multiple",variant:u=TreeStylesDefaults.variant,visibleKeys:l,onVisibilityChange:D,onSelectionChange:S,...v}){if(r&&(s||d||a||l))throw new Error("Tree should only be controlled with state from either `items` or keys props, not both");if(!!r!=(typeof i=="function"))throw new Error("Tree `items` and node iterator `children` must be used together");const{dragAndDropHooks:C}=useDragAndDrop({renderDropIndicator:Q,getAllowedDropOperations:()=>["move"],getDropOperation:()=>"move",...T}),m=useMemo(()=>r?new Cache([...r]):null,[r]),e=useMemo(()=>m?.getAllNodes(),[m]),{disabledKeys:c,expandedKeys:K,selectedKeys:p,visibleKeys:A,visibilityComputedKeys:x}=useMemo(()=>{const t={disabledKeys:e?new Set:s,expandedKeys:e?new Set:d,selectedKeys:e?new Set:a,visibleKeys:e?new Set:l,visibilityComputedKeys:new Set};return e?e.reduce((o,{key:n,isDisabled:N,isExpanded:E,isSelected:H,isVisible:M,isVisibleComputed:O})=>(N&&o.disabledKeys?.add(n),E&&o.expandedKeys?.add(n),H&&o.selectedKeys?.add(n),M&&o.visibleKeys?.add(n),O&&o.visibilityComputedKeys.add(n),o),t):t},[e,s,d,a,l]),I=p?t=>{t!=="all"&&S?.(t);}:void 0;return jsx(TreeContext.Provider,{value:{disabledKeys:c,expandedKeys:K,selectedKeys:p,showRuleLines:g,showVisibility:b,variant:u,visibleKeys:A,visibilityComputedKeys:x,isStatic:typeof i!="function",onVisibilityChange:D??(()=>{})},children:jsx(Tree,{...v,className:composeRenderProps(h,t=>L({className:t,variant:u})),disabledKeys:c,dragAndDropHooks:C,expandedKeys:K,items:r,selectedKeys:p,onSelectionChange:I,selectionMode:w,children:i})})}export{$ as Tree};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import {Cache}from'./../../hooks/use-tree/actions/cache.js';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useMemo}from'react';import {useDragAndDrop,Tree,composeRenderProps,DropIndicator}from'react-aria-components';import {TreeContext}from'./context.js';import J from'./styles.module.css';const L=i=>jsx(DropIndicator,{target:i,className:"border border-highlight-hover"});function $({children:i,className:K,disabledKeys:s,dragAndDropConfig:h,expandedKeys:d,items:o,selectedKeys:a,showRuleLines:g=true,showVisibility:b=true,selectionMode:T="multiple",variant:w="cozy",visibleKeys:l,onVisibilityChange:v,onSelectionChange:D,...S}){if(o&&(s||d||a||l))throw new Error("Tree should only be controlled with state from either `items` or keys props, not both");if(!!o!=(typeof i=="function"))throw new Error("Tree `items` and node iterator `children` must be used together");const{dragAndDropHooks:C}=useDragAndDrop({renderDropIndicator:L,getAllowedDropOperations:()=>["move"],getDropOperation:()=>"move",...h}),m=useMemo(()=>o?new Cache([...o]):null,[o]),e=useMemo(()=>m?.getAllNodes(),[m]),{disabledKeys:u,expandedKeys:c,selectedKeys:p,visibleKeys:A,visibilityComputedKeys:x}=useMemo(()=>{const t={disabledKeys:e?new Set:s,expandedKeys:e?new Set:d,selectedKeys:e?new Set:a,visibleKeys:e?new Set:l,visibilityComputedKeys:new Set};return e?e.reduce((r,{key:n,isDisabled:N,isExpanded:E,isSelected:H,isVisible:M,isVisibleComputed:O})=>(N&&r.disabledKeys?.add(n),E&&r.expandedKeys?.add(n),H&&r.selectedKeys?.add(n),M&&r.visibleKeys?.add(n),O&&r.visibilityComputedKeys.add(n),r),t):t},[e,s,d,a,l]),I=p?t=>{t!=="all"&&D?.(t);}:void 0;return jsx(TreeContext.Provider,{value:{disabledKeys:u,expandedKeys:c,selectedKeys:p,showRuleLines:g,showVisibility:b,variant:w,visibleKeys:A,visibilityComputedKeys:x,isStatic:typeof i!="function",onVisibilityChange:v??(()=>{})},children:jsx(Tree,{...S,className:composeRenderProps(K,t=>clsx(J.tree,t)),disabledKeys:u,dragAndDropHooks:C,expandedKeys:c,items:o,selectedKeys:p,onSelectionChange:I,selectionMode:T,children:i})})}export{$ as Tree};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tree/index.tsx"],"names":["defaultRenderDropIndicator","jsx","G","target","f","z","dragAndDropConfig","showVisibility","selectionMode","J","onSelectionChange","expandedKeysProp","selectedKeysProp","visibleKeysProp","children","dragAndDropHooks","B","cache","Cache","items","R","nodes","y","disabledKeys","acc","key","isDisabled","isVisibleComputed","handleSelectionChange","selectedKeys","selection","TreeContext","F","showRuleLines","rest","composeRenderProps","className","tree","q"],"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'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport { TreeStyles, TreeStylesDefaults } from './styles';\nimport type { TreeProps } from './types';\n\nconst { tree } = TreeStyles();\n\nconst defaultRenderDropIndicator = (target: DropTarget) => (\n  <DropIndicator target={target} className='border border-highlight-hover' />\n);\n\n/**\n * Tree - Hierarchical tree view with optional drag-and-drop and visibility\n *\n * Renders a selectable tree with support for nested items, drag-and-drop,\n * selection modes, and visibility controls. Use TreeItem to define nodes.\n *\n * @example\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <Node key={node.key} node={node} />}\n * </Tree>\n *\n * @example\n * <Tree>\n *   <TreeItem id='one' textValue='one'>\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id='two' textValue='two'>\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = TreeStylesDefaults.variant,\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          tree({ className, variant }),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/tree/index.tsx"],"names":["target","f","B","disabledKeysProp","expandedKeysProp","selectedKeysProp","showRuleLines","showVisibility","selectionMode","visibleKeysProp","children","F","dragAndDropConfig","cache","items","Cache","y","R","nodes","useMemo","disabledKeys","expandedKeys","selectedKeys","visibleKeys","acc","key","isDisabled","isExpanded","isSelected","handleSelectionChange","selection","onSelectionChange","jsx","AriaTree","V","composeRenderProps","className","q","z"],"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'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => (\n  <DropIndicator target={target} className='border border-highlight-hover' />\n);\n\n/**\n * Tree - Hierarchical tree view with optional drag-and-drop and visibility\n *\n * Renders a selectable tree with support for nested items, drag-and-drop,\n * selection modes, and visibility controls. Use TreeItem to define nodes.\n *\n * @example\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <Node key={node.key} node={node} />}\n * </Tree>\n *\n * @example\n * <Tree>\n *   <TreeItem id='one' textValue='one'>\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id='two' textValue='two'>\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"]}

package/dist/components/tree/item-actions.js

@@ -1,2 +1,2 @@
-import {jsx}from'react/jsx-runtime';import {TreeStyles}from'./styles.js';const{actions:i}=TreeStyles();function n({children:r,className:t}){return jsx("div",{className:i({className:t}),children:r})}export{n as TreeItemActions};//# sourceMappingURL=item-actions.js.map
+import {jsx}from'react/jsx-runtime';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContext}from'react';import {TreeContext}from'./context.js';import t from'./styles.module.css';function f({children:o,className:r}){const{variant:e}=useContext(TreeContext);return jsx("div",{className:clsx(t.actions,t[e],r),children:o})}export{f as TreeItemActions};//# sourceMappingURL=item-actions.js.map
 //# sourceMappingURL=item-actions.js.map