@accelint/design-system 0.8.1 → 0.9.0

package/dist/components/tabs/index.js

@@ -1,6 +1,262 @@
 import '../../chunk-PZ5AY32C.js';
-export { Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext } from './tabs.js';
-export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './tabs.css.js';
-import './types.js';
+import { createContext, forwardRef, useMemo, Children, useCallback } from 'react';
+import { Provider, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { usePropagatingPress } from '../../hooks/use-propagating-press/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props/index.js';
+import { tabsClassNames, tabListStateVars, tabStateVars, tabPanelsStateVars, tabPanelStateVars } from './tabs.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var TEST_IDS = {
+  tabs: "tabs",
+  list: {
+    container: "tabs.list.container",
+    list: "tabs.list"
+  },
+  tab: {
+    container: "tabs.tab.container",
+    tab: "tabs.tab"
+  },
+  panels: {
+    container: "tabs.panels.container",
+    panels: "tabs.panels"
+  },
+  panel: {
+    container: "tabs.panel.container",
+    panel: "tabs.panel"
+  }
+};
+var TabsContext = createContext(null);
+var Tabs = forwardRef(function Tabs2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabsContext);
+  props = useDefaultProps(props, "Tabs");
+  const { classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),
+    [theme.Tabs, classNamesProp]
+  );
+  const values = useMemo(
+    () => [
+      [TabListContext, { classNames }],
+      [TabPanelsContext, { classNames }]
+    ],
+    [classNames]
+  );
+  return /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(
+    Tabs$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.tabs,
+      "data-testid": TEST_IDS.tabs
+    }
+  ) });
+});
+var TabListContext = createContext(null);
+var TabList = forwardRef(function TabList2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabListContext);
+  props = useDefaultProps(props, "TabList");
+  const {
+    children,
+    classNames: classNamesProp,
+    anchor = "end",
+    items,
+    orientation = "horizontal",
+    size = "lg",
+    variant = "border",
+    align = orientation === "horizontal" ? "center" : "start",
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),
+    [theme.Tabs, classNamesProp]
+  );
+  const values = useMemo(
+    () => [[TabContext, { classNames }]],
+    [classNames]
+  );
+  const style = useMemo(
+    () => inlineVars(tabListStateVars, {
+      align,
+      anchor,
+      count: items ? Array.from(items).length : Children.count(children),
+      orientation,
+      size,
+      variant
+    }),
+    [align, anchor, items, children, orientation, size, variant]
+  );
+  return /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames?.list?.container,
+      style,
+      "data-testid": TEST_IDS.list.container,
+      children: /* @__PURE__ */ jsx(
+        TabList$1,
+        {
+          ...rest,
+          ref,
+          className: classNames?.list?.list,
+          items,
+          "data-testid": TEST_IDS.list.list,
+          children
+        }
+      )
+    }
+  ) });
+});
+var TabContext = createContext(
+  null
+);
+var Tab = forwardRef(function Tab2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabContext);
+  props = useDefaultProps(props, "Tab");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    onPress,
+    onPressChange,
+    onPressEnd,
+    onPressStart,
+    onPressUp,
+    ...rest
+  } = props;
+  const { pressProps } = usePropagatingPress({
+    onPress,
+    onPressChange,
+    onPressEnd,
+    onPressStart,
+    onPressUp
+  });
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),
+    [theme.Tabs, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(tabStateVars, renderProps),
+    []
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...pressProps,
+        className: classNames?.tab?.tab,
+        "data-testid": TEST_IDS.tab.tab,
+        children: callRenderProps(childrenProp, {
+          ...renderProps,
+          defaultChildren: null
+        })
+      }
+    ),
+    [pressProps, classNames?.tab?.tab, childrenProp]
+  );
+  return /* @__PURE__ */ jsx(
+    Tab$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.tab?.container,
+      style,
+      "data-testid": TEST_IDS.tab.container,
+      children
+    }
+  );
+});
+var TabPanelsContext = createContext(null);
+var TabPanels = forwardRef(function TabPanels2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelsContext);
+  props = useDefaultProps(props, "TabPanels");
+  const {
+    children,
+    classNames: classNamesProp,
+    shouldForceMount = false
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),
+    [theme.Tabs, classNamesProp]
+  );
+  const style = useMemo(
+    () => inlineVars(tabPanelsStateVars, { shouldForceMount }),
+    [shouldForceMount]
+  );
+  const values = useMemo(
+    () => [[TabPanelContext, { classNames, shouldForceMount }]],
+    [classNames, shouldForceMount]
+  );
+  return /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames?.panels?.container,
+      style,
+      "data-testid": TEST_IDS.panels.container,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames?.panels?.panels,
+          "data-testid": TEST_IDS.panels.panels,
+          children
+        }
+      )
+    }
+  ) });
+});
+var TabPanelContext = createContext(null);
+var TabPanel = forwardRef(function TabPanel2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelContext);
+  props = useDefaultProps(props, "TabPanel");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    shouldForceMount = false,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),
+    [theme.Tabs, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(tabPanelStateVars, { ...renderProps, shouldForceMount }),
+    [shouldForceMount]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames?.panel?.panel,
+        "data-testid": TEST_IDS.panel.panel,
+        children: callRenderProps(childrenProp, {
+          ...renderProps,
+          defaultChildren: null
+        })
+      }
+    ),
+    [childrenProp, classNames?.panel?.panel]
+  );
+  return /* @__PURE__ */ jsx(
+    TabPanel$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.panel?.container,
+      shouldForceMount,
+      style,
+      "data-testid": TEST_IDS.panel.container,
+      children
+    }
+  );
+});
+
+export { TEST_IDS, Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+{"version":3,"sources":["../../../src/components/tabs/index.tsx"],"names":["Tabs","RACTabs","TabList","RACTabList","Tab","RACTab","TabPanels","TabPanel","RACTabPanel"],"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  Children,\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type SlotProps,\n} from 'react-aria-components';\nimport type { RequiredDeep } from 'type-fest';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { usePropagatingPress } from '../../hooks/use-propagating-press';\nimport { useTheme } from '../../hooks/use-theme';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  tabListStateVars,\n  tabPanelStateVars,\n  tabPanelsStateVars,\n  tabStateVars,\n  tabsClassNames,\n} from './tabs.css';\nimport type {\n  TabListProps,\n  TabPanelProps,\n  TabPanelRenderProps,\n  TabPanelsProps,\n  TabProps,\n  TabRenderProps,\n  TabsClassNames,\n  TabsProps,\n} from './types';\n\nexport const TEST_IDS: RequiredDeep<TabsClassNames> = {\n  tabs: 'tabs',\n  list: {\n    container: 'tabs.list.container',\n    list: 'tabs.list',\n  },\n  tab: {\n    container: 'tabs.tab.container',\n    tab: 'tabs.tab',\n  },\n  panels: {\n    container: 'tabs.panels.container',\n    panels: 'tabs.panels',\n  },\n  panel: {\n    container: 'tabs.panel.container',\n    panel: 'tabs.panel',\n  },\n};\n\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\n/**\n * A required wrapper for other Tabs components, which manages\n * and provides the state context. Other Tabs components will\n * throw an error if not wrapped with this component\n *\n * NOTE: TabList & TabPanels do not have to be direct children\n * of this component. Additional layout can be introduced around\n * this components children\n */\nexport const Tabs = forwardRef(function Tabs(\n  props: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabsContext);\n  props = useDefaultProps(props, 'Tabs');\n\n  const { classNames: classNamesProp, ...rest } = props;\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof TabListContext,\n        ContextValue<TabListProps<unknown>, HTMLDivElement>,\n      ],\n      [typeof TabPanelsContext, ContextValue<TabPanelsProps, HTMLDivElement>],\n    ]\n  >(\n    () => [\n      [TabListContext, { classNames }],\n      [TabPanelsContext, { classNames }],\n    ],\n    [classNames],\n  );\n\n  return (\n    <Provider values={values}>\n      <RACTabs\n        {...rest}\n        ref={ref}\n        className={classNames?.tabs}\n        data-testid={TEST_IDS.tabs}\n      />\n    </Provider>\n  );\n});\n\nexport const TabListContext =\n  createContext<ContextValue<TabListProps<unknown>, HTMLDivElement>>(null);\n\n/**\n * Parent of Tab\n */\nexport const TabList = forwardRef(function TabList<T extends object>(\n  props: TabListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabListContext);\n  props = useDefaultProps(props, 'TabList');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    anchor = 'end',\n    items,\n    orientation = 'horizontal',\n    size = 'lg',\n    variant = 'border',\n    align = orientation === 'horizontal' ? 'center' : 'start',\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const values = useMemo<[[typeof TabContext, Omit<TabProps, 'id'>]]>(\n    () => [[TabContext, { classNames }]],\n    [classNames],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(tabListStateVars, {\n        align,\n        anchor,\n        count: items ? Array.from(items).length : Children.count(children),\n        orientation,\n        size,\n        variant,\n      }),\n    [align, anchor, items, children, orientation, size, variant],\n  );\n\n  return (\n    <Provider values={values}>\n      <div\n        className={classNames?.list?.container}\n        style={style}\n        data-testid={TEST_IDS.list.container}\n      >\n        <RACTabList<T>\n          {...rest}\n          ref={ref}\n          className={classNames?.list?.list}\n          items={items}\n          data-testid={TEST_IDS.list.list}\n        >\n          {children}\n        </RACTabList>\n      </div>\n    </Provider>\n  );\n});\n\nexport const TabContext =\n  createContext<ContextValue<Omit<TabProps & SlotProps, 'id'>, HTMLDivElement>>(\n    null,\n  );\n\n/**\n * Must be a direct child of TabList\n */\nexport const Tab = forwardRef(function Tab(\n  props: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabContext);\n  props = useDefaultProps(props, 'Tab');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    onPress,\n    onPressChange,\n    onPressEnd,\n    onPressStart,\n    onPressUp,\n    ...rest\n  } = props;\n\n  const { pressProps } = usePropagatingPress({\n    onPress,\n    onPressChange,\n    onPressEnd,\n    onPressStart,\n    onPressUp,\n  });\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: TabRenderProps) => inlineVars(tabStateVars, renderProps),\n    [],\n  );\n\n  const children = useCallback(\n    (renderProps: TabRenderProps) => (\n      <div\n        {...pressProps}\n        className={classNames?.tab?.tab}\n        data-testid={TEST_IDS.tab.tab}\n      >\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [pressProps, classNames?.tab?.tab, childrenProp],\n  );\n\n  return (\n    <RACTab\n      {...rest}\n      ref={ref}\n      className={classNames?.tab?.container}\n      style={style}\n      data-testid={TEST_IDS.tab.container}\n    >\n      {children}\n    </RACTab>\n  );\n});\n\nexport const TabPanelsContext =\n  createContext<ContextValue<TabPanelsProps, HTMLDivElement>>(null);\n\n/**\n * Parent of TabPanel, but only required if using shouldForceMount=true\n */\nexport const TabPanels = forwardRef(function TabPanels(\n  props: TabPanelsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabPanelsContext);\n  props = useDefaultProps(props, 'TabPanels');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    shouldForceMount = false,\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useMemo(\n    () => inlineVars(tabPanelsStateVars, { shouldForceMount }),\n    [shouldForceMount],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof TabPanelContext,\n        ContextValue<Omit<TabPanelProps, 'id'>, HTMLDivElement>,\n      ],\n    ]\n  >(\n    () => [[TabPanelContext, { classNames, shouldForceMount }]],\n    [classNames, shouldForceMount],\n  );\n\n  return (\n    <Provider values={values}>\n      <div\n        ref={ref}\n        className={classNames?.panels?.container}\n        style={style}\n        data-testid={TEST_IDS.panels.container}\n      >\n        <div\n          className={classNames?.panels?.panels}\n          data-testid={TEST_IDS.panels.panels}\n        >\n          {children}\n        </div>\n      </div>\n    </Provider>\n  );\n});\n\nexport const TabPanelContext =\n  createContext<ContextValue<Omit<TabPanelProps, 'id'>, HTMLDivElement>>(null);\n\n/**\n * Must be direct child of TabPanels if TabPanel implements shouldForceMount=true\n *\n * Othewise can be used anywhere inside of Tabs. TabPanels may be desirable to use\n * if theme implements any styles that adjust layout\n */\nexport const TabPanel = forwardRef(function TabPanel(\n  props: TabPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabPanelContext);\n  props = useDefaultProps(props, 'TabPanel');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    shouldForceMount = false,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: TabPanelRenderProps) =>\n      inlineVars(tabPanelStateVars, { ...renderProps, shouldForceMount }),\n    [shouldForceMount],\n  );\n\n  const children = useCallback(\n    (renderProps: TabPanelRenderProps) => (\n      <div\n        className={classNames?.panel?.panel}\n        data-testid={TEST_IDS.panel.panel}\n      >\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [childrenProp, classNames?.panel?.panel],\n  );\n\n  return (\n    <RACTabPanel\n      {...rest}\n      ref={ref}\n      className={classNames?.panel?.container}\n      shouldForceMount={shouldForceMount}\n      style={style}\n      data-testid={TEST_IDS.panel.container}\n    >\n      {children}\n    </RACTabPanel>\n  );\n});\n"]}

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

@@ -1,9 +1,64 @@
-export { TextField, TextFieldContext } from './text-field.js';
-export { textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars } from './text-field.css.js';
-export { TextFieldClassNames, TextFieldMapping, TextFieldProps, TextFieldSizes, TextFieldState } from './types.js';
-import '@react-types/shared';
-import 'react';
-import 'react-aria-components';
+import { TextFieldClassNames, TextFieldMapping, TextFieldSizes, TextFieldProps } from './types.js';
+import * as _react_types_shared from '@react-types/shared';
+import * as react from 'react';
+import { TextFieldRenderProps, ContextValue } from 'react-aria-components';
 import 'type-fest';
 import '../../types/generic.js';
 import '../input/types.js';
+
+declare const TextFieldContext: react.Context<ContextValue<TextFieldProps, HTMLDivElement>>;
+declare const TextField: (props: {
+    id?: string | undefined;
+    children?: react.ReactNode | ((values: TextFieldRenderProps & {
+        defaultChildren: react.ReactNode | undefined;
+    }) => react.ReactNode);
+    value?: string | undefined;
+    type?: ("text" | "search" | "url" | "tel" | "email" | "password" | (string & {})) | undefined;
+    slot?: (string | null) | undefined;
+    defaultValue?: string | undefined;
+    autoFocus?: boolean | undefined;
+    enterKeyHint?: ("enter" | "done" | "go" | "next" | "previous" | "search" | "send") | undefined;
+    inputMode?: ("none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search") | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-autocomplete'?: ("none" | "inline" | "list" | "both") | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-haspopup'?: (boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog") | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: ((e: react.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    onBlur?: ((e: react.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
+    onKeyUp?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
+    onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
+    isDisabled?: boolean | undefined;
+    onFocusChange?: ((isFocused: boolean) => void) | undefined;
+    excludeFromTabOrder?: boolean | undefined;
+    name?: string | undefined;
+    isReadOnly?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    validationBehavior?: ("native" | "aria") | undefined;
+    validate?: ((value: string) => _react_types_shared.ValidationError | true | null | undefined) | undefined;
+    autoComplete?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    pattern?: string | undefined;
+} & {
+    classNames?: TextFieldClassNames;
+    mapping?: Partial<TextFieldMapping>;
+    size?: TextFieldSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { TextField, TextFieldContext };

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

@@ -1,5 +1,96 @@
 import '../../chunk-PZ5AY32C.js';
-export { TextField, TextFieldContext } from './text-field.js';
-export { textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars } from './text-field.css.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { LabelContext, Provider, TextField as TextField$1 } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { bodies } from '../../styles/typography.css.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props/index.js';
+import { AriaTextContext, AriaFieldErrorContext } from '../aria/index.js';
+import { InputContext } from '../input/index.js';
+import { textFieldClassNames, textFieldStateVars } from './text-field.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  description: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  error: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  }
+};
+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 {
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    size = defaultSize,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(textFieldClassNames, theme.TextField, classNamesProp, {
+      description: mapping.description[size],
+      error: mapping.error[size]
+    }),
+    [theme.TextField, classNamesProp, mapping, size]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(textFieldStateVars, {
+      ...renderProps,
+      size
+    }),
+    [size]
+  );
+  const values = useMemo(
+    () => [
+      [InputContext, { classNames: classNames?.input, size }],
+      [LabelContext, { className: classNames?.label }],
+      [
+        AriaTextContext,
+        {
+          slots: {
+            description: { className: classNames?.description }
+          }
+        }
+      ],
+      [AriaFieldErrorContext, { className: classNames?.error }]
+    ],
+    [classNames, size]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.textField, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, classNames?.textField, values]
+  );
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.container,
+      style,
+      children
+    }
+  );
+});
+
+export { TextField, TextFieldContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+{"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["TextField","RACTextField"],"mappings":";;;;;;;;;;;;;;AA6CA,IAAM,cAAmC,GAAA;AAAA,EACvC,WAAa,EAAA;AAAA,IACX,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,IAAI,MAAO,CAAA;AAAA,GACb;AAAA,EACA,KAAO,EAAA;AAAA,IACL,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,IAAI,MAAO,CAAA;AAAA;AAEf,CAAA;AAEA,IAAM,WAAc,GAAA,IAAA;AAEP,IAAA,gBAAA,GACX,cAA4D,IAAI;AAE3D,IAAM,SAAY,GAAA,UAAA,CAAW,SAASA,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,gBAAgB,CAAA;AAE3D,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,WAAW,CAAA;AAE1C,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,WAAA;AAAA,IACT,IAAO,GAAA,WAAA;AAAA,IACP,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,OAAO;AAAA,MACL,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAA,CAAgB,mBAAqB,EAAA,KAAA,CAAM,WAAW,cAAgB,EAAA;AAAA,MACpE,WAAA,EAAa,OAAQ,CAAA,WAAA,CAAY,IAAI,CAAA;AAAA,MACrC,KAAA,EAAO,OAAQ,CAAA,KAAA,CAAM,IAAI;AAAA,KAC1B,CAAA;AAAA,IACH,CAAC,KAAA,CAAM,SAAW,EAAA,cAAA,EAAgB,SAAS,IAAI;AAAA,GACjD;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,WACC,KAAA,UAAA,CAAW,kBAAoB,EAAA;AAAA,MAC7B,GAAG,WAAA;AAAA,MACH;AAAA,KACD,CAAA;AAAA,IACH,CAAC,IAAI;AAAA,GACP;AACA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IAWb,MAAM;AAAA,MACJ,CAAC,YAAc,EAAA,EAAE,YAAY,UAAY,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,MACtD,CAAC,YAAc,EAAA,EAAE,SAAW,EAAA,UAAA,EAAY,OAAO,CAAA;AAAA,MAC/C;AAAA,QACE,eAAA;AAAA,QACA;AAAA,UACE,KAAO,EAAA;AAAA,YACL,WAAa,EAAA,EAAE,SAAW,EAAA,UAAA,EAAY,WAAY;AAAA;AACpD;AACF,OACF;AAAA,MACA,CAAC,qBAAuB,EAAA,EAAE,SAAW,EAAA,UAAA,EAAY,OAAO;AAAA,KAC1D;AAAA,IACA,CAAC,YAAY,IAAI;AAAA,GACnB;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WACC,qBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,MAAA,EACR,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,EAAY,SACzB,EAAA,QAAA,EAAA,eAAA,CAAgB,YAAc,EAAA;AAAA,MAC7B,GAAG,WAAA;AAAA,MACH,eAAiB,EAAA;AAAA,KAClB,GACH,CACF,EAAA,CAAA;AAAA,IAEF,CAAC,YAAA,EAAc,UAAY,EAAA,SAAA,EAAW,MAAM;AAAA,GAC9C;AACA,EACE,uBAAA,GAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,WAAW,UAAY,EAAA,SAAA;AAAA,MACvB,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC","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"]}

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

@@ -1,6 +1,19 @@
-export { TextArea, TextAreaContext } from './textarea.js';
-export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './textarea.css.js';
-export { TextAreaClassNames, TextAreaProps, TextAreaRenderProps, TextAreaState } from './types.js';
-import 'react';
-import 'react-aria-components';
+import { BaseTextAreaProps, TextAreaProps as TextAreaProps$1 } from './types.js';
+import * as react from 'react';
+import { TextAreaProps, ContextValue } from 'react-aria-components';
 import '../../types/generic.js';
+
+declare const TextAreaContext: react.Context<ContextValue<TextAreaProps$1, HTMLTextAreaElement>>;
+/**
+ * We implement a textarea as a content editable span to provide
+ * improved UX, where the input area automatically grows with input
+ * content length. This can be overriden by applying max-height
+ * and overflow CSS, if desired.
+ *
+ * This also has the side effect of changing the target element in
+ * the ref and event handlers. The normal `event.target.value` is not
+ * available, and must be substituted with `event.currentTarget.textContent`
+ */
+declare const TextArea: (props: Omit<TextAreaProps, "children" | "className" | "style" | "onChange" | "cols" | "rows"> & BaseTextAreaProps & react.RefAttributes<HTMLTextAreaElement>) => react.ReactElement | null;
+
+export { TextArea, TextAreaContext };

package/dist/components/textarea/index.js

@@ -1,6 +1,137 @@
 import '../../chunk-PZ5AY32C.js';
-export { TextArea, TextAreaContext } from './textarea.js';
-export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './textarea.css.js';
-import './types.js';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { useControlledState } from '@react-stately/utils';
+import { createContext, forwardRef, useMemo, useCallback, useEffect } from 'react';
+import { TextAreaContext as TextAreaContext$1 } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { inputs } from '../../styles/typography.css.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, mergeProps } from '../../utils/props/index.js';
+import { textAreaClassNames, textAreaStateVars } from './textarea.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  font: inputs
+};
+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 {
+    classNames: classNamesProp,
+    defaultValue = "",
+    disabled: isDisabled = false,
+    mapping: mappingProp,
+    placeholder,
+    readOnly: isReadOnly = false,
+    required: isRequired = false,
+    resize = "none",
+    size = "lg",
+    value: valueProp,
+    onChange,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const [value, setValue] = useControlledState(valueProp, defaultValue);
+  const isInvalid = !!ariaInvalid && ariaInvalid !== "false";
+  const isPlaceholder = !!placeholder && !value;
+  const isEmpty = !value;
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    autoFocus: props.autoFocus,
+    isTextInput: true
+  });
+  const { hoverProps, isHovered } = useHover({
+    isDisabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd
+  });
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(textAreaClassNames, theme.TextArea, classNamesProp, {
+      textarea: mapping.font[size]
+    }),
+    [theme.TextArea, classNamesProp, mapping.font, size]
+  );
+  const mergedProps = useMemo(
+    () => mergeProps(rest, focusProps, hoverProps),
+    [focusProps, hoverProps, rest]
+  );
+  const style = useMemo(
+    () => inlineVars(textAreaStateVars, {
+      resize,
+      size,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    }),
+    [
+      resize,
+      size,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    ]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        setValue(event.currentTarget.textContent ?? "");
+      }
+    },
+    [onChange, setValue]
+  );
+  useEffect(() => {
+    if (typeof ref !== "function" && ref?.current) {
+      ref.current.textContent = `${value ?? ""}`;
+    }
+  }, [ref, value]);
+  return /* @__PURE__ */ jsx("div", { className: classNames?.container, style, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...mergedProps,
+      ...hoverProps,
+      ref,
+      className: classNames?.textarea,
+      contentEditable: !(isDisabled || isReadOnly),
+      role: "textbox",
+      suppressContentEditableWarning: true,
+      onInput: handleChange,
+      "aria-invalid": ariaInvalid,
+      "data-placeholder": placeholder
+    }
+  ) });
+});
+
+export { TextArea, TextAreaContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map