@accelint/design-system 1.1.3 → 1.1.5

package/dist/components/tabs/tabs.css.d.ts

@@ -12,45 +12,45 @@ declare const tabsContainers: {
     panel: string;
 };
 declare const tabColorVars: {
-    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})`;
+    border: `var(--${string})`;
+    color: `var(--${string})`;
 };
 declare const tabSpaceVars: {
     list: {
-        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gap: `var(--${string})`;
+        x: `var(--${string})`;
+        y: `var(--${string})`;
     };
     tab: {
-        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})`;
+        y: `var(--${string})`;
     };
 };
 declare const tabListStateVars: {
-    align: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    count: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    variant: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    align: `var(--${string})`;
+    anchor: `var(--${string})`;
+    count: `var(--${string})`;
+    orientation: `var(--${string})`;
+    size: `var(--${string})`;
+    variant: `var(--${string})`;
 };
 declare const tabStateVars: {
-    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})`;
+    isPressed: `var(--${string})`;
+    isSelected: `var(--${string})`;
+    isFocused: `var(--${string})`;
+    isFocusVisible: `var(--${string})`;
+    isDisabled: `var(--${string})`;
 };
 declare const tabPanelsStateVars: {
-    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    shouldForceMount: `var(--${string})`;
 };
 declare const tabPanelStateVars: {
-    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isInert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    shouldForceMount: `var(--${string})`;
+    isFocused: `var(--${string})`;
+    isFocusVisible: `var(--${string})`;
+    isInert: `var(--${string})`;
 };
 declare const tabsClassNames: TabsClassNames;
 

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

@@ -25,15 +25,19 @@ var defaultMapping = {
 var defaultSize = "lg";
 var TextFieldContext = createContext(null);
 var TextField = forwardRef(function TextField2(props, ref) {
-  [props, ref] = useContextProps(props, ref, TextFieldContext);
-  props = useDefaultProps(props, "TextField");
+  const [contextProps, contextRef] = useContextProps(
+    props,
+    ref,
+    TextFieldContext
+  );
+  const finalProps = useDefaultProps(contextProps, "TextField");
   const {
     children: childrenProp,
     classNames: classNamesProp,
     mapping: mappingProp,
     size = defaultSize,
     ...rest
-  } = props;
+  } = finalProps;
   const theme = useTheme();
   const mapping = useMemo(
     () => ({
@@ -83,7 +87,7 @@ var TextField = forwardRef(function TextField2(props, ref) {
     TextField$1,
     {
       ...rest,
-      ref,
+      ref: contextRef,
       className: classNames?.container,
       style,
       children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["TextField","RACTextField"],"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 {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TextField as RACTextField,\n  type TextFieldRenderProps,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport { InputContext } from '../input';\nimport type { InputProps } from '../input/types';\nimport { textFieldClassNames, textFieldStateVars } from './text-field.css';\nimport type { TextFieldMapping, TextFieldProps } from './types';\n\nconst defaultMapping: TextFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nexport const TextField = forwardRef(function TextField(\n  props: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TextFieldContext);\n\n  props = useDefaultProps(props, 'TextField');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textFieldClassNames, theme.TextField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TextField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: TextFieldRenderProps) =>\n      inlineVars(textFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n  const values = useMemo<\n    [\n      [typeof InputContext, ContextValue<InputProps, HTMLInputElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [InputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n    ],\n    [classNames, size],\n  );\n\n  const children = useCallback(\n    (renderProps: TextFieldRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.textField}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.textField, values],\n  );\n  return (\n    <RACTextField\n      {...rest}\n      ref={ref}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACTextField>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["TextField","RACTextField"],"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 {\n  createContext,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TextField as RACTextField,\n  type TextFieldRenderProps,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport { InputContext } from '../input';\nimport { textFieldClassNames, textFieldStateVars } from './text-field.css';\nimport type { InputProps } from '../input/types';\nimport type { TextFieldMapping, TextFieldProps } from './types';\n\nconst defaultMapping: TextFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nexport const TextField = forwardRef(function TextField(\n  props: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TextFieldContext,\n  );\n\n  const finalProps = useDefaultProps(contextProps, 'TextField');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = finalProps;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textFieldClassNames, theme.TextField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TextField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: TextFieldRenderProps) =>\n      inlineVars(textFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n  const values = useMemo<\n    [\n      [typeof InputContext, ContextValue<InputProps, HTMLInputElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [InputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n    ],\n    [classNames, size],\n  );\n\n  const children = useCallback(\n    (renderProps: TextFieldRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.textField}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.textField, values],\n  );\n  return (\n    <RACTextField\n      {...rest}\n      ref={contextRef}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACTextField>\n  );\n});\n"]}

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

@@ -7,21 +7,21 @@ import '../input/types.js';
 declare const textFieldContainer: string;
 declare const textFieldColorVars: {
     description: {
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})`;
     };
     error: {
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})`;
     };
 };
 declare const textFieldSpaceVars: {
-    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})`;
 };
 declare const textFieldStateVars: {
-    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})`;
+    isDisabled: `var(--${string})`;
+    isInvalid: `var(--${string})`;
+    isReadOnly: `var(--${string})`;
+    isRequired: `var(--${string})`;
 };
 declare const textFieldClassNames: TextFieldClassNames;
 

package/dist/components/textarea/index.js

@@ -18,11 +18,19 @@ var defaultMapping = {
 };
 var TextAreaContext = createContext(null);
 var TextArea = forwardRef(function TextArea2(props, ref) {
-  [props, ref] = useContextProps(props, ref, TextAreaContext$1);
-  props.className = void 0;
-  props.style = void 0;
-  [props, ref] = useContextProps(props, ref, TextAreaContext);
-  props = useDefaultProps(props, "TextArea");
+  const [contextProps1, contextRef1] = useContextProps(
+    props,
+    ref,
+    TextAreaContext$1
+  );
+  contextProps1.className = void 0;
+  contextProps1.style = void 0;
+  const [contextProps2, contextRef2] = useContextProps(
+    contextProps1,
+    contextRef1,
+    TextAreaContext
+  );
+  const defaultProps = useDefaultProps(contextProps2, "TextArea");
   const {
     classNames: classNamesProp,
     defaultValue = "",
@@ -40,7 +48,7 @@ var TextArea = forwardRef(function TextArea2(props, ref) {
     onHoverEnd,
     "aria-invalid": ariaInvalid,
     ...rest
-  } = props;
+  } = defaultProps;
   const [value, setValue] = useControlledState(valueProp, defaultValue);
   const isInvalid = !!ariaInvalid && ariaInvalid !== "false";
   const isPlaceholder = !!placeholder && !value;
@@ -71,6 +79,7 @@ var TextArea = forwardRef(function TextArea2(props, ref) {
   );
   const mergedProps = useMemo(
     () => mergeProps(rest, focusProps, hoverProps),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: Verify this dependency array is correct.
     [focusProps, hoverProps, rest]
   );
   const style = useMemo(
@@ -120,7 +129,7 @@ var TextArea = forwardRef(function TextArea2(props, ref) {
     {
       ...mergedProps,
       ...hoverProps,
-      ref,
+      ref: contextRef2,
       className: classNames?.textarea,
       contentEditable: !(isDisabled || isReadOnly),
       role: "textbox",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/index.tsx"],"names":["TextArea","RACTextAreaContext"],"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 { useFocusRing } from '@react-aria/focus';\nimport { useHover } from '@react-aria/interactions';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  type FormEvent,\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  TextAreaContext as RACTextAreaContext,\n  type TextAreaProps as RACTextAreaProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { inputs } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { mergeClassNames, mergeProps } from '../../utils/props';\nimport { textAreaClassNames, textAreaStateVars } from './textarea.css';\nimport type { TextAreaMapping, TextAreaProps } from './types';\n\nconst defaultMapping: TextAreaMapping = {\n  font: inputs,\n};\n\nexport const TextAreaContext =\n  createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>(null);\n\n/**\n * We implement a textarea as a content editable span to provide\n * improved UX, where the input area automatically grows with input\n * content length. This can be overriden by applying max-height\n * and overflow CSS, if desired.\n *\n * This also has the side effect of changing the target element in\n * the ref and event handlers. The normal `event.target.value` is not\n * available, and must be substituted with `event.currentTarget.textContent`\n */\nexport const TextArea = forwardRef(function TextArea(\n  props: TextAreaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  [props, ref] = useContextProps(props, ref, RACTextAreaContext);\n\n  // Disallow props possibly provided by React Aria context\n  // could be render props functions we don't want to support\n  (props as RACTextAreaProps).className = undefined;\n  (props as RACTextAreaProps).style = undefined;\n\n  // Duplicate context prop merging to support React Aria's context\n  // and our own which establishes a superset type for the props\n  [props, ref] = useContextProps(props, ref, TextAreaContext);\n  props = useDefaultProps(props, 'TextArea');\n\n  const {\n    classNames: classNamesProp,\n    defaultValue = '',\n    disabled: isDisabled = false,\n    mapping: mappingProp,\n    placeholder,\n    readOnly: isReadOnly = false,\n    required: isRequired = false,\n    resize = 'none',\n    size = 'lg',\n    value: valueProp,\n    onChange,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    'aria-invalid': ariaInvalid,\n    ...rest\n  } = props;\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue);\n  const isInvalid = !!ariaInvalid && ariaInvalid !== 'false';\n  const isPlaceholder = !!placeholder && !value;\n  const isEmpty = !value;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    autoFocus: props.autoFocus,\n    isTextInput: true,\n  });\n\n  const { hoverProps, isHovered } = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n  });\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textAreaClassNames, theme.TextArea, classNamesProp, {\n        textarea: mapping.font[size],\n      }),\n    [theme.TextArea, classNamesProp, mapping.font, size],\n  );\n\n  const mergedProps = useMemo(\n    () => mergeProps(rest, focusProps, hoverProps),\n    [focusProps, hoverProps, rest],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(textAreaStateVars, {\n        resize,\n        size,\n        isDisabled,\n        isEmpty,\n        isFocused,\n        isFocusVisible,\n        isHovered,\n        isInvalid,\n        isPlaceholder,\n        isReadOnly,\n        isRequired,\n      }),\n    [\n      resize,\n      size,\n      isDisabled,\n      isEmpty,\n      isFocused,\n      isFocusVisible,\n      isHovered,\n      isInvalid,\n      isPlaceholder,\n      isReadOnly,\n      isRequired,\n    ],\n  );\n\n  const handleChange = useCallback(\n    (event: FormEvent<HTMLSpanElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.currentTarget.textContent ?? '');\n      }\n    },\n    [onChange, setValue],\n  );\n\n  /**\n   * In order to provide the UX of an \"input\" that auto grows in height\n   * thats driven by content, we implement a content-editable span instead\n   * of a textarea. However, this has the side effect that it must be\n   * updated as an \"uncontrolled\" element, otherwise the cursor resets\n   * to the beginning of the input area after every keystroke if the value\n   * is passed in as \"children\"\n   */\n  useEffect(() => {\n    if (typeof ref !== 'function' && ref?.current) {\n      ref.current.textContent = `${value ?? ''}`;\n    }\n  }, [ref, value]);\n\n  return (\n    <div className={classNames?.container} style={style}>\n      {/* biome-ignore lint/a11y/useFocusableInteractive: TODO: refactor */}\n      <span\n        {...mergedProps}\n        {...hoverProps}\n        ref={ref}\n        className={classNames?.textarea}\n        contentEditable={!(isDisabled || isReadOnly)}\n        role='textbox'\n        suppressContentEditableWarning\n        onInput={handleChange}\n        aria-invalid={ariaInvalid}\n        data-placeholder={placeholder}\n      />\n    </div>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/components/textarea/index.tsx"],"names":["TextArea","RACTextAreaContext"],"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 { useFocusRing } from '@react-aria/focus';\nimport { useHover } from '@react-aria/interactions';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  createContext,\n  type FormEvent,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  TextAreaContext as RACTextAreaContext,\n  type TextAreaProps as RACTextAreaProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { inputs } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { mergeClassNames, mergeProps } from '../../utils/props';\nimport { textAreaClassNames, textAreaStateVars } from './textarea.css';\nimport type { TextAreaMapping, TextAreaProps } from './types';\n\nconst defaultMapping: TextAreaMapping = {\n  font: inputs,\n};\n\nexport const TextAreaContext =\n  createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>(null);\n\n/**\n * We implement a textarea as a content editable span to provide\n * improved UX, where the input area automatically grows with input\n * content length. This can be overriden by applying max-height\n * and overflow CSS, if desired.\n *\n * This also has the side effect of changing the target element in\n * the ref and event handlers. The normal `event.target.value` is not\n * available, and must be substituted with `event.currentTarget.textContent`\n */\nexport const TextArea = forwardRef(function TextArea(\n  props: TextAreaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const [contextProps1, contextRef1] = useContextProps(\n    props,\n    ref,\n    RACTextAreaContext,\n  );\n\n  // Disallow props possibly provided by React Aria context\n  // could be render props functions we don't want to support\n  (contextProps1 as RACTextAreaProps).className = undefined;\n  (contextProps1 as RACTextAreaProps).style = undefined;\n\n  // Duplicate context prop merging to support React Aria's context\n  // and our own which establishes a superset type for the props\n  const [contextProps2, contextRef2] = useContextProps(\n    contextProps1,\n    contextRef1,\n    TextAreaContext,\n  );\n  const defaultProps = useDefaultProps(contextProps2, 'TextArea');\n\n  const {\n    classNames: classNamesProp,\n    defaultValue = '',\n    disabled: isDisabled = false,\n    mapping: mappingProp,\n    placeholder,\n    readOnly: isReadOnly = false,\n    required: isRequired = false,\n    resize = 'none',\n    size = 'lg',\n    value: valueProp,\n    onChange,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    'aria-invalid': ariaInvalid,\n    ...rest\n  } = defaultProps;\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue);\n  const isInvalid = !!ariaInvalid && ariaInvalid !== 'false';\n  const isPlaceholder = !!placeholder && !value;\n  const isEmpty = !value;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    autoFocus: props.autoFocus,\n    isTextInput: true,\n  });\n\n  const { hoverProps, isHovered } = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n  });\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textAreaClassNames, theme.TextArea, classNamesProp, {\n        textarea: mapping.font[size],\n      }),\n    [theme.TextArea, classNamesProp, mapping.font, size],\n  );\n\n  const mergedProps = useMemo(\n    () => mergeProps(rest, focusProps, hoverProps),\n    // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: Verify this dependency array is correct.\n    [focusProps, hoverProps, rest],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(textAreaStateVars, {\n        resize,\n        size,\n        isDisabled,\n        isEmpty,\n        isFocused,\n        isFocusVisible,\n        isHovered,\n        isInvalid,\n        isPlaceholder,\n        isReadOnly,\n        isRequired,\n      }),\n    [\n      resize,\n      size,\n      isDisabled,\n      isEmpty,\n      isFocused,\n      isFocusVisible,\n      isHovered,\n      isInvalid,\n      isPlaceholder,\n      isReadOnly,\n      isRequired,\n    ],\n  );\n\n  const handleChange = useCallback(\n    (event: FormEvent<HTMLSpanElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.currentTarget.textContent ?? '');\n      }\n    },\n    [onChange, setValue],\n  );\n\n  /**\n   * In order to provide the UX of an \"input\" that auto grows in height\n   * thats driven by content, we implement a content-editable span instead\n   * of a textarea. However, this has the side effect that it must be\n   * updated as an \"uncontrolled\" element, otherwise the cursor resets\n   * to the beginning of the input area after every keystroke if the value\n   * is passed in as \"children\"\n   */\n  useEffect(() => {\n    if (typeof ref !== 'function' && ref?.current) {\n      ref.current.textContent = `${value ?? ''}`;\n    }\n  }, [ref, value]);\n\n  return (\n    <div className={classNames?.container} style={style}>\n      {/* biome-ignore lint/a11y/useFocusableInteractive: TODO: refactor */}\n      {/** biome-ignore lint/a11y/useSemanticElements: Legacy */}\n      <span\n        {...mergedProps}\n        {...hoverProps}\n        ref={contextRef2}\n        className={classNames?.textarea}\n        contentEditable={!(isDisabled || isReadOnly)}\n        role='textbox'\n        suppressContentEditableWarning\n        onInput={handleChange}\n        aria-invalid={ariaInvalid}\n        data-placeholder={placeholder}\n      />\n    </div>\n  );\n});\n"]}

package/dist/components/textarea/textarea.css.d.ts

@@ -5,32 +5,32 @@ import '../../types/generic.js';
 
 declare const textAreaContainer: string;
 declare const textAreaColorVars: {
-    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})`;
+    border: `var(--${string})`;
+    color: `var(--${string})`;
 };
 declare const textAreaSpaceVars: {
-    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    minWidth: `var(--${string})`;
+    width: `var(--${string})`;
+    maxWidth: `var(--${string})`;
+    minHeight: `var(--${string})`;
+    height: `var(--${string})`;
+    maxHeight: `var(--${string})`;
+    x: `var(--${string})`;
+    y: `var(--${string})`;
 };
 declare const textAreaStateVars: {
-    resize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isPlaceholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    resize: `var(--${string})`;
+    size: `var(--${string})`;
+    isDisabled: `var(--${string})`;
+    isEmpty: `var(--${string})`;
+    isFocused: `var(--${string})`;
+    isFocusVisible: `var(--${string})`;
+    isHovered: `var(--${string})`;
+    isInvalid: `var(--${string})`;
+    isPlaceholder: `var(--${string})`;
+    isReadOnly: `var(--${string})`;
+    isRequired: `var(--${string})`;
 };
 declare const textAreaClassNames: TextAreaClassNames;
 

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

@@ -27,9 +27,13 @@ var defaultMapping = {
 var defaultSize = "lg";
 var TimeFieldContext = createContext(null);
 var TimeField = forwardRef(function TimeField2(props, ref) {
-  [props, ref] = useContextProps(props, ref, TimeFieldContext);
-  props = useDefaultProps(
+  const [contextProps, contextRef] = useContextProps(
     props,
+    ref,
+    TimeFieldContext
+  );
+  const finalProps = useDefaultProps(
+    contextProps,
     "TimeField"
   );
   const {
@@ -39,7 +43,7 @@ var TimeField = forwardRef(function TimeField2(props, ref) {
     size = defaultSize,
     value,
     ...rest
-  } = props;
+  } = finalProps;
   const theme = useTheme();
   const mapping = useMemo(
     () => ({
@@ -92,7 +96,7 @@ var TimeField = forwardRef(function TimeField2(props, ref) {
     TimeField$1,
     {
       ...rest,
-      ref,
+      ref: contextRef,
       className: classNames?.container,
       style,
       value,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/time-field/index.tsx"],"names":["TimeField","RACTimeField"],"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 type { TimeValue } from '@react-aria/datepicker';\nimport {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TimeField as RACTimeField,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport type { DateFieldRenderProps } from '../date-field/types';\nimport { DateInputContext } from '../date-input';\nimport type { DateInputProps } from '../date-input/types';\nimport { IconContext } from '../icon';\nimport type { IconProps } from '../icon/types';\nimport { timeFieldClassNames, timeFieldStateVars } from './time-field.css';\nimport type {\n  TimeFieldMapping,\n  TimeFieldProps,\n  TimeFieldRenderProps,\n} from './types';\n\nconst defaultMapping: TimeFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  icon: {\n    sm: { size: 'xs' },\n    lg: { size: 'md' },\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TimeFieldContext =\n  createContext<ContextValue<TimeFieldProps<TimeValue>, HTMLDivElement>>(null);\n\nexport const TimeField = forwardRef(function TimeField<T extends TimeValue>(\n  props: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TimeFieldContext);\n  props = useDefaultProps(\n    props as TimeFieldProps<TimeValue>,\n    'TimeField',\n  ) as TimeFieldProps<T>;\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    value,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(timeFieldClassNames, theme.TimeField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TimeField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: DateFieldRenderProps) =>\n      inlineVars(timeFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n\n  const values = useMemo<\n    [\n      [typeof DateInputContext, ContextValue<DateInputProps, HTMLDivElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n      [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n    ]\n  >(\n    () => [\n      [DateInputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n      [IconContext, { ...mapping.icon[size], classNames: classNames?.icon }],\n    ],\n    [classNames, size, mapping],\n  );\n\n  const children = useCallback(\n    (renderProps: TimeFieldRenderProps) => {\n      return (\n        <Provider values={values}>\n          <div className={classNames?.timeField}>\n            {callRenderProps(childrenProp, {\n              ...renderProps,\n              defaultChildren: null,\n            })}\n          </div>\n        </Provider>\n      );\n    },\n    [childrenProp, values, classNames],\n  );\n\n  return (\n    <RACTimeField\n      {...rest}\n      ref={ref}\n      className={classNames?.container}\n      style={style}\n      value={value}\n    >\n      {children}\n    </RACTimeField>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/components/time-field/index.tsx"],"names":["TimeField","RACTimeField"],"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 {\n  createContext,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  TimeField as RACTimeField,\n  type TextProps,\n} from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n} from '../aria';\nimport { DateInputContext } from '../date-input';\nimport { IconContext } from '../icon';\nimport { timeFieldClassNames, timeFieldStateVars } from './time-field.css';\nimport type { TimeValue } from '@react-aria/datepicker';\nimport type { DateFieldRenderProps } from '../date-field/types';\nimport type { DateInputProps } from '../date-input/types';\nimport type { IconProps } from '../icon/types';\nimport type {\n  TimeFieldMapping,\n  TimeFieldProps,\n  TimeFieldRenderProps,\n} from './types';\n\nconst defaultMapping: TimeFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  icon: {\n    sm: { size: 'xs' },\n    lg: { size: 'md' },\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const TimeFieldContext =\n  createContext<ContextValue<TimeFieldProps<TimeValue>, HTMLDivElement>>(null);\n\nexport const TimeField = forwardRef(function TimeField<T extends TimeValue>(\n  props: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TimeFieldContext,\n  );\n  const finalProps = useDefaultProps(\n    contextProps as TimeFieldProps<TimeValue>,\n    'TimeField',\n  ) as TimeFieldProps<T>;\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    value,\n    ...rest\n  } = finalProps;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(timeFieldClassNames, theme.TimeField, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [theme.TimeField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: DateFieldRenderProps) =>\n      inlineVars(timeFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n\n  const values = useMemo<\n    [\n      [typeof DateInputContext, ContextValue<DateInputProps, HTMLDivElement>],\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n      [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n    ]\n  >(\n    () => [\n      [DateInputContext, { classNames: classNames?.input, size }],\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n      [IconContext, { ...mapping.icon[size], classNames: classNames?.icon }],\n    ],\n    [classNames, size, mapping],\n  );\n\n  const children = useCallback(\n    (renderProps: TimeFieldRenderProps) => {\n      return (\n        <Provider values={values}>\n          <div className={classNames?.timeField}>\n            {callRenderProps(childrenProp, {\n              ...renderProps,\n              defaultChildren: null,\n            })}\n          </div>\n        </Provider>\n      );\n    },\n    [childrenProp, values, classNames],\n  );\n\n  return (\n    <RACTimeField\n      {...rest}\n      ref={contextRef}\n      className={classNames?.container}\n      style={style}\n      value={value}\n    >\n      {children}\n    </RACTimeField>\n  );\n});\n"]}

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

@@ -11,33 +11,33 @@ import '../icon/types.js';
 
 declare const timeFieldContainer: string;
 declare const timeFieldSpaceVars: {
-    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})`;
+    y: `var(--${string})`;
+    gap: `var(--${string})`;
+    minWidth: `var(--${string})`;
+    width: `var(--${string})`;
+    maxWidth: `var(--${string})`;
 };
 declare const timeFieldColorVars: {
-    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})`;
     description: {
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})`;
     };
     error: {
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})`;
     };
     label: {
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})`;
     };
 };
 declare const timeFieldStateVars: {
-    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})`;
+    isDisabled: `var(--${string})`;
+    isFocused: `var(--${string})`;
+    isHovered: `var(--${string})`;
+    isInvalid: `var(--${string})`;
+    isReadOnly: `var(--${string})`;
+    isRequired: `var(--${string})`;
 };
 declare const timeFieldClassNames: TimeFieldClassNames;
 

package/dist/components/tooltip/index.js

@@ -16,8 +16,12 @@ var defaultMapping = {
 };
 var TooltipContext = createContext(null);
 var Tooltip = forwardRef(function Tooltip2(props, ref) {
-  [props, ref] = useContextProps(props, ref, TooltipContext);
-  props = useDefaultProps(props, "Tooltip");
+  const [contextProps, contextRef] = useContextProps(
+    props,
+    ref,
+    TooltipContext
+  );
+  const finalProps = useDefaultProps(contextProps, "Tooltip");
   const {
     children: childrenProp,
     classNames: classNamesProp,
@@ -26,7 +30,7 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
     mapping: mappingProp,
     offset,
     ...rest
-  } = props;
+  } = finalProps;
   const theme = useTheme();
   const mapping = useMemo(
     () => ({
@@ -68,7 +72,7 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
     Tooltip$1,
     {
       ...rest,
-      ref,
+      ref: contextRef,
       className: classNames?.tooltip?.container,
       style,
       children
@@ -77,15 +81,19 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
 });
 var TooltipTargetContext = createContext(null);
 var TooltipTarget = forwardRef(function TooltipTarget2(props, ref) {
-  [props, ref] = useContextProps(props, ref, TooltipTargetContext);
-  props = useDefaultProps(props, "TooltipTarget");
+  const [contextProps, contextRef] = useContextProps(
+    props,
+    ref,
+    TooltipTargetContext
+  );
+  const finalProps = useDefaultProps(contextProps, "TooltipTarget");
   const {
     children,
     classNames: classNamesProp,
     focusable = true,
     relative = "self"
-  } = props;
-  const { focusableProps } = useFocusable({}, ref);
+  } = finalProps;
+  const { focusableProps } = useFocusable({}, contextRef);
   const theme = useTheme();
   const classNames = useMemo(
     () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp),
@@ -102,7 +110,7 @@ var TooltipTarget = forwardRef(function TooltipTarget2(props, ref) {
     "div",
     {
       ...focusableProps,
-      ref,
+      ref: contextRef,
       className: classNames?.target?.target,
       tabIndex: focusable ? 0 : void 0,
       children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["Tooltip","RACTooltip","TooltipTarget"],"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 { useFocusable } from '@react-aria/focus';\nimport {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  Tooltip as RACTooltip,\n  type TooltipRenderProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  tooltipClassNames,\n  tooltipStateVars,\n  tooltipTargetStateVars,\n} from './tooltip.css';\nimport type { TooltipMapping, TooltipProps, TooltipTargetProps } from './types';\n\nconst defaultMapping: TooltipMapping = {\n  font: bodies.xs,\n};\n\nexport const TooltipContext =\n  createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\nexport const Tooltip = forwardRef(function Tooltip(\n  props: TooltipProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n\n  props = useDefaultProps(props, 'Tooltip');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    containerPadding,\n    crossOffset,\n    mapping: mappingProp,\n    offset,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp, {\n        tooltip: {\n          container: theme.className,\n          tooltip: mapping.font,\n        },\n      }),\n    [theme.Tooltip, classNamesProp, theme.className, mapping],\n  );\n\n  const style = useCallback(\n    ({ state, ...renderProps }: TooltipRenderProps) => ({\n      ...theme.style,\n      ...inlineVars(tooltipStateVars, {\n        containerPadding,\n        crossOffset,\n        offset,\n        ...renderProps,\n        isOpen: state.isOpen,\n      }),\n    }),\n    [theme.style, containerPadding, crossOffset, offset],\n  );\n\n  const children = useCallback(\n    (renderProps: TooltipRenderProps) => (\n      <div className={classNames?.tooltip?.tooltip}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          isOpen: renderProps.state.isOpen,\n        })}\n      </div>\n    ),\n    [classNames?.tooltip?.tooltip, childrenProp],\n  );\n\n  return (\n    <RACTooltip\n      {...rest}\n      ref={ref}\n      className={classNames?.tooltip?.container}\n      style={style}\n    >\n      {children}\n    </RACTooltip>\n  );\n});\n\nexport const TooltipTargetContext =\n  createContext<ContextValue<TooltipTargetProps, HTMLDivElement>>(null);\n\n/**\n * This target component is only needed if attempting to add a Tooltip\n * to a non-focusable element/component\n */\nexport const TooltipTarget = forwardRef(function TooltipTarget(\n  props: TooltipTargetProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TooltipTargetContext);\n\n  props = useDefaultProps(props, 'TooltipTarget');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    focusable = true,\n    relative = 'self',\n  } = props;\n\n  const { focusableProps } = useFocusable({}, ref);\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp),\n    [theme.Tooltip, classNamesProp],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(tooltipTargetStateVars, {\n        focusable,\n        relative,\n      }),\n    [focusable, relative],\n  );\n\n  return (\n    <div className={classNames?.target?.container} style={style}>\n      <div\n        {...focusableProps}\n        ref={ref}\n        className={classNames?.target?.target}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={focusable ? 0 : undefined}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"]}
+{"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["Tooltip","RACTooltip","TooltipTarget"],"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 { useFocusable } from '@react-aria/focus';\nimport {\n  createContext,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  Tooltip as RACTooltip,\n  type TooltipRenderProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  tooltipClassNames,\n  tooltipStateVars,\n  tooltipTargetStateVars,\n} from './tooltip.css';\nimport type { TooltipMapping, TooltipProps, TooltipTargetProps } from './types';\n\nconst defaultMapping: TooltipMapping = {\n  font: bodies.xs,\n};\n\nexport const TooltipContext =\n  createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\nexport const Tooltip = forwardRef(function Tooltip(\n  props: TooltipProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TooltipContext,\n  );\n\n  const finalProps = useDefaultProps(contextProps, 'Tooltip');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    containerPadding,\n    crossOffset,\n    mapping: mappingProp,\n    offset,\n    ...rest\n  } = finalProps;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp, {\n        tooltip: {\n          container: theme.className,\n          tooltip: mapping.font,\n        },\n      }),\n    [theme.Tooltip, classNamesProp, theme.className, mapping],\n  );\n\n  const style = useCallback(\n    ({ state, ...renderProps }: TooltipRenderProps) => ({\n      ...theme.style,\n      ...inlineVars(tooltipStateVars, {\n        containerPadding,\n        crossOffset,\n        offset,\n        ...renderProps,\n        isOpen: state.isOpen,\n      }),\n    }),\n    [theme.style, containerPadding, crossOffset, offset],\n  );\n\n  const children = useCallback(\n    (renderProps: TooltipRenderProps) => (\n      <div className={classNames?.tooltip?.tooltip}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          isOpen: renderProps.state.isOpen,\n        })}\n      </div>\n    ),\n    [classNames?.tooltip?.tooltip, childrenProp],\n  );\n\n  return (\n    <RACTooltip\n      {...rest}\n      ref={contextRef}\n      className={classNames?.tooltip?.container}\n      style={style}\n    >\n      {children}\n    </RACTooltip>\n  );\n});\n\nexport const TooltipTargetContext =\n  createContext<ContextValue<TooltipTargetProps, HTMLDivElement>>(null);\n\n/**\n * This target component is only needed if attempting to add a Tooltip\n * to a non-focusable element/component\n */\nexport const TooltipTarget = forwardRef(function TooltipTarget(\n  props: TooltipTargetProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [contextProps, contextRef] = useContextProps(\n    props,\n    ref,\n    TooltipTargetContext,\n  );\n\n  const finalProps = useDefaultProps(contextProps, 'TooltipTarget');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    focusable = true,\n    relative = 'self',\n  } = finalProps;\n\n  const { focusableProps } = useFocusable({}, contextRef);\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp),\n    [theme.Tooltip, classNamesProp],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(tooltipTargetStateVars, {\n        focusable,\n        relative,\n      }),\n    [focusable, relative],\n  );\n\n  return (\n    <div className={classNames?.target?.container} style={style}>\n      <div\n        {...focusableProps}\n        ref={contextRef}\n        className={classNames?.target?.target}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={focusable ? 0 : undefined}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"]}

package/dist/components/tooltip/tooltip.css.d.ts

@@ -9,21 +9,21 @@ declare const tooltipContainers: {
     target: string;
 };
 declare const tooltipSpaceVars: {
-    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})`;
+    y: `var(--${string})`;
 };
 declare const tooltipStateVars: {
-    containerPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    crossOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    offset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    containerPadding: `var(--${string})`;
+    crossOffset: `var(--${string})`;
+    offset: `var(--${string})`;
+    placement: `var(--${string})`;
+    isEntering: `var(--${string})`;
+    isExiting: `var(--${string})`;
+    isOpen: `var(--${string})`;
 };
 declare const tooltipTargetStateVars: {
-    focusable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    relative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    focusable: `var(--${string})`;
+    relative: `var(--${string})`;
 };
 declare const tooltipClassNames: TooltipClassNames;