@accelint/design-system 0.3.2 → 0.4.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,258 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, Children, useCallback } from 'react';
+import { useContextProps, Provider, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { useDefaultProps, useTheme, usePropagatingPress } from '../../hooks/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/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=tabs.js.map
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":["Tabs","RACTabs","TabList","RACTabList","Tab","RACTab","TabPanels","TabPanel","RACTabPanel"],"mappings":"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","file":"tabs.js","sourcesContent":["import {\n  Children,\n  createContext,\n  type ForwardedRef,\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  useContextProps,\n} from 'react-aria-components';\nimport type { RequiredDeep } from 'type-fest';\nimport { useDefaultProps, usePropagatingPress, useTheme } from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  tabListStateVars,\n  tabPanelsStateVars,\n  tabPanelStateVars,\n  tabsClassNames,\n  tabStateVars,\n} from './tabs.css';\nimport type {\n  TabsClassNames,\n  TabListProps,\n  TabPanelProps,\n  TabPanelRenderProps,\n  TabPanelsProps,\n  TabProps,\n  TabRenderProps,\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/tabs/types.d.ts

@@ -0,0 +1,84 @@
+import { AsType } from '../../types/generic.js';
+import { PropsWithChildren } from 'react';
+import { Orientation, PressEvents } from '@react-types/shared';
+import { TabRenderProps as TabRenderProps$1, TabPanelRenderProps as TabPanelRenderProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+
+type TabsClassNames = PartialDeep<{
+    tabs: string;
+    list: {
+        container: string;
+        list: string;
+    };
+    tab: {
+        container: string;
+        tab: string;
+    };
+    panels: {
+        container: string;
+        panels: string;
+    };
+    panel: {
+        container: string;
+        panel: string;
+    };
+}>;
+type TabListVariants = 'border' | 'fill';
+type TabListAnchor = 'start' | 'end';
+type TabListAlignment = 'start' | 'center' | 'end';
+type TabListSizes = 'sm' | 'lg';
+type TabRenderProps = AsType<TabRenderProps$1>;
+type TabPanelRenderProps = AsType<TabPanelRenderProps$1>;
+type BaseProps = {
+    classNames?: TabsClassNames;
+};
+type BaseTabListProps = {
+    align?: TabListAlignment;
+    /**
+     * To be combined with orientation, where:
+     * orientation=horizontal + anchor=end = bottom
+     * orientation=horizontal + anchor=start = top
+     * orientation=vertical + anchor=end = right
+     * orientation=vertical + anchor=start = left
+     */
+    anchor?: TabListAnchor;
+    orientation?: Orientation;
+    size?: TabListSizes;
+    variant?: TabListVariants;
+};
+type BaseTabProps = {
+    /**
+     * Must match cooresponding TabPanel id, should be
+     * unique to all other ids
+     */
+    id: string;
+} & PressEvents;
+type BaseTabPanelsProps = PropsWithChildren<{
+    /**
+     * Setting this to true will apply to all panels and
+     * change the layout to a stacked approach that grows
+     * to the size of the largest panel content, no matter
+     * which panel is active
+     */
+    shouldForceMount?: boolean;
+}>;
+type BaseTabPanelProps = {
+    /**
+     * Must match cooresponding Tab id, should be unique
+     * to all other ids
+     */
+    id: string;
+};
+type TabListState = Required<BaseTabListProps> & {
+    count: number;
+};
+type TabState = AsType<TabRenderProps$1>;
+type TabPanelsState = Required<Pick<BaseTabPanelsProps, 'shouldForceMount'>>;
+type TabPanelState = Omit<TabPanelRenderProps, 'state'> & Required<Pick<TabPanelProps$1, 'shouldForceMount'>>;
+type TabsProps = Omit<TabsProps$1, 'children' | 'className' | 'style'> & PropsWithChildren<BaseProps>;
+type TabListProps<T> = Omit<TabListProps$1<T>, 'className' | 'style'> & BaseTabListProps & BaseProps;
+type TabProps = Omit<TabProps$1, 'className' | 'style'> & BaseTabProps & BaseProps;
+type TabPanelsProps = BaseTabPanelsProps & BaseProps;
+type TabPanelProps = Omit<TabPanelProps$1, 'className' | 'style'> & BaseTabPanelProps & BaseProps;
+
+export type { TabListAlignment, TabListAnchor, TabListProps, TabListSizes, TabListState, TabListVariants, TabPanelProps, TabPanelRenderProps, TabPanelState, TabPanelsProps, TabPanelsState, TabProps, TabRenderProps, TabState, TabsClassNames, TabsProps };

package/dist/components/tabs/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -0,0 +1,9 @@
+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 'type-fest';
+import '../../types/generic.js';
+import '../input/types.js';

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

@@ -0,0 +1,5 @@
+import '../../chunk-PZ5AY32C.js';
+export { TextField, TextFieldContext } from './text-field.js';
+export { textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars } from './text-field.css.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

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

@@ -0,0 +1,28 @@
+import { TextFieldClassNames } from './types.js';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../input/types.js';
+
+declare const textFieldContainer: string;
+declare const textFieldColorVars: {
+    description: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    error: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const textFieldSpaceVars: {
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+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})`;
+};
+declare const textFieldClassNames: TextFieldClassNames;
+
+export { textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars };

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

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/text-field/text-field.css.ts
+var textFieldClassNames = { container: "text-field_textFieldClassNames_container__oduey9", textField: "text-field_textFieldClassNames_textField__odueya", label: "typography_label__j8fgabg", description: "text-field_textFieldClassNames_description__odueyc", error: "text-field_textFieldClassNames_error__odueyd" };
+var textFieldColorVars = { description: { color: "var(--description-color__oduey1)" }, error: { color: "var(--error-color__oduey2)" } };
+var textFieldContainer = "text-field_textFieldContainer__oduey0";
+var textFieldSpaceVars = { gap: "var(--gap__oduey3)" };
+var textFieldStateVars = { size: "var(--size__oduey4)", isDisabled: "var(--isDisabled__oduey5)", isInvalid: "var(--isInvalid__oduey6)", isReadOnly: "var(--isReadOnly__oduey7)", isRequired: "var(--isRequired__oduey8)" };
+
+export { textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars };
+//# sourceMappingURL=text-field.css.js.map
+//# sourceMappingURL=text-field.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/text-field/text-field.css.ts"],"names":[],"mappings":";;;AAAW,IAAA,mBAAA,GAAsB,EAAC,SAAA,EAAU,kDAAmD,EAAA,SAAA,EAAU,kDAAmD,EAAA,KAAA,EAAM,2BAA4B,EAAA,WAAA,EAAY,oDAAqD,EAAA,KAAA,EAAM,8CAA8C;AACxS,IAAA,kBAAA,GAAqB,EAAC,WAAA,EAAY,EAAC,KAAA,EAAM,kCAAkC,EAAA,EAAE,KAAM,EAAA,EAAC,KAAM,EAAA,4BAAA,EAA6B;AAC3H,IAAI,kBAAqB,GAAA;AACrB,IAAA,kBAAA,GAAqB,EAAC,GAAA,EAAI,oBAAoB;AAC9C,IAAA,kBAAA,GAAqB,EAAC,IAAA,EAAK,qBAAsB,EAAA,UAAA,EAAW,2BAA4B,EAAA,SAAA,EAAU,0BAA2B,EAAA,UAAA,EAAW,2BAA4B,EAAA,UAAA,EAAW,2BAA2B","file":"text-field.css.js","sourcesContent":["export var textFieldClassNames = {container:'text-field_textFieldClassNames_container__oduey9',textField:'text-field_textFieldClassNames_textField__odueya',label:'typography_label__j8fgabg',description:'text-field_textFieldClassNames_description__odueyc',error:'text-field_textFieldClassNames_error__odueyd'};\nexport var textFieldColorVars = {description:{color:'var(--description-color__oduey1)'},error:{color:'var(--error-color__oduey2)'}};\nexport var textFieldContainer = 'text-field_textFieldContainer__oduey0';\nexport var textFieldSpaceVars = {gap:'var(--gap__oduey3)'};\nexport var textFieldStateVars = {size:'var(--size__oduey4)',isDisabled:'var(--isDisabled__oduey5)',isInvalid:'var(--isInvalid__oduey6)',isReadOnly:'var(--isReadOnly__oduey7)',isRequired:'var(--isRequired__oduey8)'};"]}

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

@@ -0,0 +1,62 @@
+import { TextFieldProps, TextFieldClassNames, TextFieldMapping, TextFieldSizes } from './types.js';
+import * as _react_types_shared from '@react-types/shared';
+import * as react from 'react';
+import { ContextValue, TextFieldRenderProps } 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;
+    isDisabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    onFocus?: ((e: react.FocusEvent<Element, Element>) => void) | undefined;
+    onBlur?: ((e: react.FocusEvent<Element, Element>) => void) | undefined;
+    onFocusChange?: ((isFocused: boolean) => void) | undefined;
+    onKeyDown?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
+    onKeyUp?: ((e: _react_types_shared.KeyboardEvent) => void) | undefined;
+    'aria-haspopup'?: (boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog") | undefined;
+    excludeFromTabOrder?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    name?: string | undefined;
+    onChange?: ((value: string) => void) | 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;
+    'aria-errormessage'?: string | undefined;
+    defaultValue?: string | undefined;
+    autoComplete?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    pattern?: string | undefined;
+    inputMode?: ("none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search") | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-autocomplete'?: ("none" | "inline" | "list" | "both") | 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;
+    onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
+} & {
+    classNames?: TextFieldClassNames;
+    mapping?: Partial<TextFieldMapping>;
+    size?: TextFieldSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { TextField, TextFieldContext };

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

@@ -0,0 +1,91 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { LabelContext, Provider, TextField as TextField$1 } from 'react-aria-components';
+import { InputContext, AriaTextContext, AriaFieldErrorContext } from '../../components/index.js';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/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 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 = "lg",
+    ...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=text-field.js.map
+//# sourceMappingURL=text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/text-field/text-field.tsx"],"names":["TextField","RACTextField"],"mappings":"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","file":"text-field.js","sourcesContent":["import {\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 {\n  AriaFieldErrorContext,\n  type AriaLabelContext,\n  AriaTextContext,\n  InputContext,\n  type InputProps,\n} from '../../components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\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\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 = 'lg',\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/text-field/types.d.ts

@@ -0,0 +1,28 @@
+import { TextFieldRenderProps as TextFieldRenderProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { AsType } from '../../types/generic.js';
+import { InputClassNames } from '../input/types.js';
+
+type TextFieldClassNames = PartialDeep<{
+    container: string;
+    description: string;
+    error: string;
+    input: InputClassNames;
+    label: string;
+    textField: string;
+}>;
+type TextFieldSizes = 'sm' | 'lg';
+type TextFieldMapping = {
+    description: Partial<Record<TextFieldSizes, string>>;
+    error: Partial<Record<TextFieldSizes, string>>;
+};
+type BaseTextFieldProps = {
+    classNames?: TextFieldClassNames;
+    mapping?: Partial<TextFieldMapping>;
+    size?: TextFieldSizes;
+};
+type TextFieldRenderProps = AsType<TextFieldRenderProps$1>;
+type TextFieldProps = AsType<Omit<TextFieldProps$1, 'className' | 'style'>> & BaseTextFieldProps;
+type TextFieldState = TextFieldRenderProps & Required<Pick<BaseTextFieldProps, 'size'>>;
+
+export type { TextFieldClassNames, TextFieldMapping, TextFieldProps, TextFieldRenderProps, TextFieldSizes, TextFieldState };

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

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}