@accelint/design-system 0.3.2 → 0.4.0

package/dist/components/select/select.js

@@ -0,0 +1,109 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Provider, Select as Select$1 } from 'react-aria-components';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { AriaLabelContext, AriaSelectValueContext, AriaTextContext, AriaFieldErrorContext } from '../aria/index.js';
+import { ButtonContext } from '../button/index.js';
+import { OptionsContext } from '../options/index.js';
+import { selectClassNames, selectStateVars } from './select.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  description: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  error: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  toggle: {
+    sm: { size: "sm", variant: "hollow" },
+    lg: { size: "md", variant: "hollow" }
+  }
+};
+var SelectContext = createContext(null);
+var Select = forwardRef(function Select2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SelectContext);
+  props = useDefaultProps(props, "Select");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    size = "lg"
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(selectClassNames, theme.Select, classNamesProp, {
+      description: mapping.description[size],
+      error: mapping.error[size]
+    }),
+    [classNamesProp, theme.Select, mapping, size]
+  );
+  const values = useMemo(
+    () => [
+      [AriaLabelContext, { className: classNames?.label }],
+      [
+        ButtonContext,
+        {
+          ...mapping.toggle[size],
+          classNames: classNames?.toggle
+        }
+      ],
+      [
+        AriaSelectValueContext,
+        {
+          className: classNames?.value
+        }
+      ],
+      [
+        AriaTextContext,
+        {
+          slots: {
+            description: { className: classNames?.description }
+          }
+        }
+      ],
+      [AriaFieldErrorContext, { className: classNames?.error }],
+      [OptionsContext, { classNames: classNames?.options, size }]
+    ],
+    [classNames, mapping, size]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(selectStateVars, {
+      ...renderProps,
+      size
+    }),
+    [size]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.select, children: /* @__PURE__ */ jsx(Provider, { values, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, values, classNames?.select]
+  );
+  return /* @__PURE__ */ jsx(
+    Select$1,
+    {
+      ...props,
+      ref,
+      className: classNames?.container,
+      style,
+      children
+    }
+  );
+});
+
+export { Select, SelectContext };
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":["Select","AriaSelect"],"mappings":"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","file":"select.js","sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n} from 'react';\nimport {\n  Select as AriaSelect,\n  Provider,\n  type ContextValue,\n  type FieldErrorProps,\n  type LabelProps,\n  type SelectRenderProps as RACSelectRenderProps,\n  type SelectValueProps,\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  AriaLabelContext,\n  AriaSelectValueContext,\n  AriaTextContext,\n} from '../aria';\nimport { ButtonContext, type ButtonProps } from '../button';\nimport { OptionsContext, type OptionsProps } from '../options';\nimport { selectClassNames, selectStateVars } from './select.css';\nimport type { SelectMapping, SelectProps } from './types';\n\nconst defaultMapping: SelectMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  toggle: {\n    sm: { size: 'sm', variant: 'hollow' },\n    lg: { size: 'md', variant: 'hollow' },\n  },\n};\n\nexport const SelectContext =\n  createContext<ContextValue<SelectProps<object>, HTMLDivElement>>(null);\n\nexport const Select = forwardRef(function Select<T extends object>(\n  props: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SelectContext);\n  props = useDefaultProps(props, 'Select');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = 'lg',\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(selectClassNames, theme.Select, classNamesProp, {\n        description: mapping.description[size],\n        error: mapping.error[size],\n      }),\n    [classNamesProp, theme.Select, mapping, size],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof ButtonContext, ContextValue<ButtonProps, HTMLButtonElement>],\n      [\n        typeof AriaSelectValueContext,\n        ContextValue<SelectValueProps<object>, HTMLSpanElement>,\n      ],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n      [typeof OptionsContext, ContextValue<OptionsProps, HTMLElement>],\n    ]\n  >(\n    () => [\n      [AriaLabelContext, { className: classNames?.label }],\n      [\n        ButtonContext,\n        {\n          ...mapping.toggle[size],\n          classNames: classNames?.toggle,\n        },\n      ],\n      [\n        AriaSelectValueContext,\n        {\n          className: classNames?.value,\n        },\n      ],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n      [OptionsContext, { classNames: classNames?.options, size }],\n    ],\n    [classNames, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: RACSelectRenderProps) =>\n      inlineVars(selectStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n\n  const children = useCallback(\n    (renderProps: RACSelectRenderProps) => (\n      <div className={classNames?.select}>\n        <Provider values={values}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </Provider>\n      </div>\n    ),\n    [childrenProp, values, classNames?.select],\n  );\n\n  return (\n    <AriaSelect\n      {...props}\n      ref={ref}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </AriaSelect>\n  );\n});\n"]}

package/dist/components/select/types.d.ts

@@ -0,0 +1,36 @@
+import { SelectRenderProps as SelectRenderProps$1, SelectProps as SelectProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { AsType } from '../../types/generic.js';
+import { OmitProtectedProps } from '../../types/props.js';
+import { ButtonClassNames, ButtonProps } from '../button/types.js';
+import { OptionsClassNames } from '../options/types.js';
+import '../../types/react-aria.js';
+import 'react';
+import '../icon/types.js';
+
+type SelectClassNames = PartialDeep<{
+    container: string;
+    select: string;
+    label: string;
+    toggle: ButtonClassNames;
+    value: string;
+    description: string;
+    error: string;
+    options: OptionsClassNames;
+}>;
+type SelectSizes = 'sm' | 'lg';
+type SelectMapping = {
+    description: Partial<Record<SelectSizes, string>>;
+    error: Partial<Record<SelectSizes, string>>;
+    toggle: Partial<Record<SelectSizes, OmitProtectedProps<ButtonProps>>>;
+};
+type BaseSelectProps = {
+    classNames?: SelectClassNames;
+    mapping?: Partial<SelectMapping>;
+    size?: SelectSizes;
+};
+type SelectRenderProps = AsType<SelectRenderProps$1>;
+type SelectState = SelectRenderProps & Required<Pick<BaseSelectProps, 'size'>>;
+type SelectProps<T extends object> = Omit<SelectProps$1<T>, 'className' | 'style'> & BaseSelectProps;
+
+export type { SelectClassNames, SelectMapping, SelectProps, SelectRenderProps, SelectSizes, SelectState };

package/dist/components/select/types.js

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

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

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

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

@@ -0,0 +1,6 @@
+export { Switch, SwitchContext } from './switch.js';
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './switch.css.js';
+export { SwitchAlignment, SwitchClassNames, SwitchProps, SwitchRenderProps, SwitchState } from './types.js';
+import 'react-aria-components';
+import 'react';
+import '../../types/react-aria.js';

package/dist/components/switch/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Switch, SwitchContext } from './switch.js';
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './switch.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,31 @@
+import { SwitchClassNames } from './types.js';
+import 'react-aria-components';
+import '../../types/react-aria.js';
+import 'react';
+
+declare const switchContainer: string;
+declare const switchColorVars: {
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    indicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const switchSpaceVars: {
+    diameter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    travel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const switchStateVars: {
+    alignInput: `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})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const switchClassNames: SwitchClassNames;
+
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars };

package/dist/components/switch/switch.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/switch/switch.css.ts
+var switchClassNames = { container: "switch_switchClassNames_container__1j8i4wgh", "switch": "switch_switchClassNames_switch__1j8i4wgi", label: "typography_label__j8fgabg", indicator: "switch_switchClassNames_indicator__1j8i4wgk" };
+var switchColorVars = { border: "var(--border__1j8i4wg1)", background: "var(--background__1j8i4wg2)", color: "var(--color__1j8i4wg3)", indicator: "var(--indicator__1j8i4wg4)" };
+var switchContainer = "switch_switchContainer__1j8i4wg0";
+var switchSpaceVars = { diameter: "var(--diameter__1j8i4wg5)", gutter: "var(--gutter__1j8i4wg6)", gap: "var(--gap__1j8i4wg7)", travel: "var(--travel__1j8i4wg8)" };
+var switchStateVars = { alignInput: "var(--alignInput__1j8i4wg9)", isDisabled: "var(--isDisabled__1j8i4wga)", isFocused: "var(--isFocused__1j8i4wgb)", isFocusVisible: "var(--isFocusVisible__1j8i4wgc)", isHovered: "var(--isHovered__1j8i4wgd)", isPressed: "var(--isPressed__1j8i4wge)", isReadOnly: "var(--isReadOnly__1j8i4wgf)", isSelected: "var(--isSelected__1j8i4wgg)" };
+
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars };
+//# sourceMappingURL=switch.css.js.map
+//# sourceMappingURL=switch.css.js.map

package/dist/components/switch/switch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/switch/switch.css.ts"],"names":[],"mappings":";;;AAAW,IAAA,gBAAA,GAAmB,EAAC,SAAU,EAAA,6CAAA,EAA8C,UAAS,0CAA2C,EAAA,KAAA,EAAM,2BAA4B,EAAA,SAAA,EAAU,6CAA6C;AACzN,IAAA,eAAA,GAAkB,EAAC,MAAO,EAAA,yBAAA,EAA0B,YAAW,6BAA8B,EAAA,KAAA,EAAM,wBAAyB,EAAA,SAAA,EAAU,4BAA4B;AACtK,IAAI,eAAkB,GAAA;AAClB,IAAA,eAAA,GAAkB,EAAC,QAAS,EAAA,2BAAA,EAA4B,QAAO,yBAA0B,EAAA,GAAA,EAAI,sBAAuB,EAAA,MAAA,EAAO,yBAAyB;AACxJ,IAAI,kBAAkB,EAAC,UAAA,EAAW,6BAA8B,EAAA,UAAA,EAAW,+BAA8B,SAAU,EAAA,4BAAA,EAA6B,cAAe,EAAA,iCAAA,EAAkC,WAAU,4BAA6B,EAAA,SAAA,EAAU,8BAA6B,UAAW,EAAA,6BAAA,EAA8B,YAAW,6BAA6B","file":"switch.css.js","sourcesContent":["export var switchClassNames = {container:'switch_switchClassNames_container__1j8i4wgh','switch':'switch_switchClassNames_switch__1j8i4wgi',label:'typography_label__j8fgabg',indicator:'switch_switchClassNames_indicator__1j8i4wgk'};\nexport var switchColorVars = {border:'var(--border__1j8i4wg1)',background:'var(--background__1j8i4wg2)',color:'var(--color__1j8i4wg3)',indicator:'var(--indicator__1j8i4wg4)'};\nexport var switchContainer = 'switch_switchContainer__1j8i4wg0';\nexport var switchSpaceVars = {diameter:'var(--diameter__1j8i4wg5)',gutter:'var(--gutter__1j8i4wg6)',gap:'var(--gap__1j8i4wg7)',travel:'var(--travel__1j8i4wg8)'};\nexport var switchStateVars = {alignInput:'var(--alignInput__1j8i4wg9)',isDisabled:'var(--isDisabled__1j8i4wga)',isFocused:'var(--isFocused__1j8i4wgb)',isFocusVisible:'var(--isFocusVisible__1j8i4wgc)',isHovered:'var(--isHovered__1j8i4wgd)',isPressed:'var(--isPressed__1j8i4wge)',isReadOnly:'var(--isReadOnly__1j8i4wgf)',isSelected:'var(--isSelected__1j8i4wgg)'};"]}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,10 @@
+import { SwitchProps, BaseSwitchProps } from './types.js';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import * as react from 'react';
+import '../../types/react-aria.js';
+
+declare const SwitchContext: react.Context<ContextValue<SwitchProps, HTMLLabelElement>>;
+declare const Switch: (props: Omit<react_aria_components.SwitchProps, "children" | "className" | "style"> & BaseSwitchProps & react.RefAttributes<HTMLLabelElement>) => react.ReactElement | null;
+
+export { Switch, SwitchContext };

package/dist/components/switch/switch.js

@@ -0,0 +1,60 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Switch as Switch$1 } from 'react-aria-components';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { switchClassNames, switchStateVars } from './switch.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SwitchContext = createContext(null);
+var Switch = forwardRef(function Switch2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SwitchContext);
+  props = useDefaultProps(props, "Switch");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    alignInput,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(switchClassNames, theme.Switch, classNamesProp),
+    [theme.Switch, classNamesProp]
+  );
+  const style = useCallback(
+    ({ state, ...renderProps }) => inlineVars(switchStateVars, {
+      ...renderProps,
+      alignInput
+    }),
+    [alignInput]
+  );
+  const children = useCallback(
+    (renderProps) => {
+      const child = callRenderProps(childrenProp, renderProps);
+      return /* @__PURE__ */ jsxs("span", { className: classNames?.switch, children: [
+        child && /* @__PURE__ */ jsx("span", { className: classNames?.label, children: child }),
+        /* @__PURE__ */ jsx("span", { className: classNames?.indicator })
+      ] });
+    },
+    [
+      childrenProp,
+      classNames?.switch,
+      classNames?.label,
+      classNames?.indicator
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    Switch$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.container,
+      style,
+      children
+    }
+  );
+});
+
+export { Switch, SwitchContext };
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/switch/switch.tsx"],"names":["Switch","RACSwitch"],"mappings":";;;;;;;;AAaa,IAAA,aAAA,GACX,cAA2D,IAAI;AAE1D,IAAM,MAAS,GAAA,UAAA,CAAW,SAASA,OAAAA,CACxC,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,aAAa,CAAA;AAExD,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,QAAQ,CAAA;AAEvC,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,eAAA,CAAgB,gBAAkB,EAAA,KAAA,CAAM,QAAQ,cAAc,CAAA;AAAA,IACpE,CAAC,KAAM,CAAA,MAAA,EAAQ,cAAc;AAAA,GAC/B;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,EAAE,KAAA,EAAO,GAAG,WAAY,EAAA,KACvB,WAAW,eAAiB,EAAA;AAAA,MAC1B,GAAG,WAAA;AAAA,MACH;AAAA,KACD,CAAA;AAAA,IACH,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WAAmC,KAAA;AAClC,MAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,YAAA,EAAc,WAAW,CAAA;AAEvD,MAAA,uBACG,IAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,UAAA,EAAY,MAC1B,EAAA,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAU,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,UAAA,EAAY,OAAQ,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,wBACpD,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,UAAA,EAAY,SAAW,EAAA;AAAA,OAC1C,EAAA,CAAA;AAAA,KAEJ;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,UAAY,EAAA,MAAA;AAAA,MACZ,UAAY,EAAA,KAAA;AAAA,MACZ,UAAY,EAAA;AAAA;AACd,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAACC,QAAA;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":"switch.js","sourcesContent":["import {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { type ContextValue, Switch as RACSwitch } from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { switchClassNames, switchStateVars } from './switch.css';\nimport type { SwitchProps, SwitchRenderProps } from './types';\n\nexport const SwitchContext =\n  createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);\n\nexport const Switch = forwardRef(function Switch(\n  props: SwitchProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SwitchContext);\n\n  props = useDefaultProps(props, 'Switch');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    alignInput,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(switchClassNames, theme.Switch, classNamesProp),\n    [theme.Switch, classNamesProp],\n  );\n\n  const style = useCallback(\n    ({ state, ...renderProps }: SwitchRenderProps) =>\n      inlineVars(switchStateVars, {\n        ...renderProps,\n        alignInput,\n      }),\n    [alignInput],\n  );\n\n  const children = useCallback(\n    (renderProps: SwitchRenderProps) => {\n      const child = callRenderProps(childrenProp, renderProps);\n\n      return (\n        <span className={classNames?.switch}>\n          {child && <span className={classNames?.label}>{child}</span>}\n          <span className={classNames?.indicator} />\n        </span>\n      );\n    },\n    [\n      childrenProp,\n      classNames?.switch,\n      classNames?.label,\n      classNames?.indicator,\n    ],\n  );\n\n  return (\n    <RACSwitch\n      {...rest}\n      ref={ref}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACSwitch>\n  );\n});\n"]}

package/dist/components/switch/types.d.ts

@@ -0,0 +1,21 @@
+import { SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+import 'react';
+
+type SwitchClassNames = Partial<{
+    container: string;
+    switch: string;
+    label: string;
+    indicator: string;
+}>;
+type SwitchAlignment = 'start' | 'end';
+type SwitchRenderProps = SwitchRenderProps$1;
+type BaseSwitchProps = {
+    children?: RenderPropsChildren<SwitchRenderProps>;
+    classNames?: SwitchClassNames;
+    alignInput?: SwitchAlignment;
+};
+type SwitchState = Omit<SwitchRenderProps, 'state'> & Required<Pick<BaseSwitchProps, 'alignInput'>>;
+type SwitchProps = Omit<SwitchProps$1, 'children' | 'className' | 'style'> & BaseSwitchProps;
+
+export type { BaseSwitchProps, SwitchAlignment, SwitchClassNames, SwitchProps, SwitchRenderProps, SwitchState };

package/dist/components/switch/types.js

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

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

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

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

@@ -0,0 +1,8 @@
+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';
+export { TabListAlignment, TabListAnchor, TabListProps, TabListState, TabListVariants, TabPanelProps, TabPanelRenderProps, TabPanelState, TabPanelsProps, TabPanelsState, TabProps, TabRenderProps, TabState, TabsClassNames, TabsProps } from './types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+import 'react';
+import 'type-fest';
+import '../../types/generic.js';

package/dist/components/tabs/index.js

@@ -0,0 +1,6 @@
+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';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,57 @@
+import { TabsClassNames } from './types.js';
+import '../../types/generic.js';
+import 'react';
+import '@react-types/shared';
+import 'react-aria-components';
+import 'type-fest';
+
+declare const tabsContainers: {
+    list: string;
+    tab: string;
+    panels: string;
+    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})`;
+};
+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})`;
+    };
+    tab: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+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})`;
+};
+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})`;
+};
+declare const tabPanelsStateVars: {
+    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+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})`;
+};
+declare const tabsClassNames: TabsClassNames;
+
+export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers };

package/dist/components/tabs/tabs.css.js

@@ -0,0 +1,15 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/tabs/tabs.css.ts
+var tabColorVars = { background: "var(--background__plnfe24)", border: "var(--border__plnfe25)", color: "var(--color__plnfe26)" };
+var tabListStateVars = { align: "var(--align__plnfe2c)", anchor: "var(--anchor__plnfe2d)", count: "var(--count__plnfe2e)", orientation: "var(--orientation__plnfe2f)", size: "var(--size__plnfe2g)", variant: "var(--variant__plnfe2h)" };
+var tabPanelStateVars = { shouldForceMount: "var(--shouldForceMount__plnfe2p)", isFocused: "var(--isFocused__plnfe2q)", isFocusVisible: "var(--isFocusVisible__plnfe2r)", isInert: "var(--isInert__plnfe2s)" };
+var tabPanelsStateVars = { shouldForceMount: "var(--shouldForceMount__plnfe2o)" };
+var tabSpaceVars = { list: { gap: "var(--list-gap__plnfe27)", x: "var(--list-x__plnfe28)", y: "var(--list-y__plnfe29)" }, tab: { x: "var(--tab-x__plnfe2a)", y: "var(--tab-y__plnfe2b)" } };
+var tabStateVars = { isHovered: "var(--isHovered__plnfe2i)", isPressed: "var(--isPressed__plnfe2j)", isSelected: "var(--isSelected__plnfe2k)", isFocused: "var(--isFocused__plnfe2l)", isFocusVisible: "var(--isFocusVisible__plnfe2m)", isDisabled: "var(--isDisabled__plnfe2n)" };
+var tabsClassNames = { tabs: "tabs_tabsClassNames_tabs__plnfe2t", list: { container: "tabs_tabsClassNames_list_container__plnfe2u", list: "tabs_tabsClassNames_list_list__plnfe2v" }, tab: { container: "tabs_tabsClassNames_tab_container__plnfe2w", tab: "tabs_tabsClassNames_tab_tab__plnfe2x typography_label__j8fgabg" }, panels: { container: "tabs_tabsClassNames_panels_container__plnfe2y", panels: "tabs_tabsClassNames_panels_panels__plnfe2z" }, panel: { container: "tabs_tabsClassNames_panel_container__plnfe210", panel: "tabs_tabsClassNames_panel_panel__plnfe211" } };
+var tabsContainers = { list: "tabs_tabsContainers_list__plnfe20", tab: "tabs_tabsContainers_tab__plnfe21", panels: "tabs_tabsContainers_panels__plnfe22", panel: "tabs_tabsContainers_panel__plnfe23" };
+
+export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers };
+//# sourceMappingURL=tabs.css.js.map
+//# sourceMappingURL=tabs.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,eAAe,EAAC,UAAA,EAAW,8BAA6B,MAAO,EAAA,wBAAA,EAAyB,OAAM,uBAAuB;AACzH,IAAI,gBAAmB,GAAA,EAAC,KAAM,EAAA,uBAAA,EAAwB,MAAO,EAAA,wBAAA,EAAyB,KAAM,EAAA,uBAAA,EAAwB,WAAY,EAAA,6BAAA,EAA8B,IAAK,EAAA,sBAAA,EAAuB,SAAQ,yBAAyB;AACvN,IAAA,iBAAA,GAAoB,EAAC,gBAAiB,EAAA,kCAAA,EAAmC,WAAU,2BAA4B,EAAA,cAAA,EAAe,gCAAiC,EAAA,OAAA,EAAQ,yBAAyB;AAChM,IAAA,kBAAA,GAAqB,EAAC,gBAAA,EAAiB,kCAAkC;AAC7E,IAAI,eAAe,EAAC,IAAA,EAAK,EAAC,GAAA,EAAI,4BAA2B,CAAE,EAAA,wBAAA,EAAyB,CAAE,EAAA,wBAAA,IAA0B,GAAI,EAAA,EAAC,GAAE,uBAAwB,EAAA,CAAA,EAAE,yBAAwB;AACzK,IAAI,YAAe,GAAA,EAAC,SAAU,EAAA,2BAAA,EAA4B,SAAU,EAAA,2BAAA,EAA4B,UAAW,EAAA,4BAAA,EAA6B,SAAU,EAAA,2BAAA,EAA4B,cAAe,EAAA,gCAAA,EAAiC,YAAW,4BAA4B;AACrQ,IAAI,cAAiB,GAAA,EAAC,IAAK,EAAA,mCAAA,EAAoC,IAAK,EAAA,EAAC,SAAU,EAAA,6CAAA,EAA8C,IAAK,EAAA,wCAAA,EAA0C,EAAA,GAAA,EAAI,EAAC,SAAU,EAAA,4CAAA,EAA6C,GAAI,EAAA,gEAAA,EAAkE,EAAA,MAAA,EAAO,EAAC,SAAA,EAAU,iDAAgD,MAAO,EAAA,4CAAA,EAA8C,EAAA,KAAA,EAAM,EAAC,SAAA,EAAU,+CAAgD,EAAA,KAAA,EAAM,6CAA4C;AACphB,IAAA,cAAA,GAAiB,EAAC,IAAK,EAAA,mCAAA,EAAoC,KAAI,kCAAmC,EAAA,MAAA,EAAO,qCAAsC,EAAA,KAAA,EAAM,oCAAoC","file":"tabs.css.js","sourcesContent":["export var tabColorVars = {background:'var(--background__plnfe24)',border:'var(--border__plnfe25)',color:'var(--color__plnfe26)'};\nexport var tabListStateVars = {align:'var(--align__plnfe2c)',anchor:'var(--anchor__plnfe2d)',count:'var(--count__plnfe2e)',orientation:'var(--orientation__plnfe2f)',size:'var(--size__plnfe2g)',variant:'var(--variant__plnfe2h)'};\nexport var tabPanelStateVars = {shouldForceMount:'var(--shouldForceMount__plnfe2p)',isFocused:'var(--isFocused__plnfe2q)',isFocusVisible:'var(--isFocusVisible__plnfe2r)',isInert:'var(--isInert__plnfe2s)'};\nexport var tabPanelsStateVars = {shouldForceMount:'var(--shouldForceMount__plnfe2o)'};\nexport var tabSpaceVars = {list:{gap:'var(--list-gap__plnfe27)',x:'var(--list-x__plnfe28)',y:'var(--list-y__plnfe29)'},tab:{x:'var(--tab-x__plnfe2a)',y:'var(--tab-y__plnfe2b)'}};\nexport var tabStateVars = {isHovered:'var(--isHovered__plnfe2i)',isPressed:'var(--isPressed__plnfe2j)',isSelected:'var(--isSelected__plnfe2k)',isFocused:'var(--isFocused__plnfe2l)',isFocusVisible:'var(--isFocusVisible__plnfe2m)',isDisabled:'var(--isDisabled__plnfe2n)'};\nexport var tabsClassNames = {tabs:'tabs_tabsClassNames_tabs__plnfe2t',list:{container:'tabs_tabsClassNames_list_container__plnfe2u',list:'tabs_tabsClassNames_list_list__plnfe2v'},tab:{container:'tabs_tabsClassNames_tab_container__plnfe2w',tab:'tabs_tabsClassNames_tab_tab__plnfe2x typography_label__j8fgabg'},panels:{container:'tabs_tabsClassNames_panels_container__plnfe2y',panels:'tabs_tabsClassNames_panels_panels__plnfe2z'},panel:{container:'tabs_tabsClassNames_panel_container__plnfe210',panel:'tabs_tabsClassNames_panel_panel__plnfe211'}};\nexport var tabsContainers = {list:'tabs_tabsContainers_list__plnfe20',tab:'tabs_tabsContainers_tab__plnfe21',panels:'tabs_tabsContainers_panels__plnfe22',panel:'tabs_tabsContainers_panel__plnfe23'};"]}

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

@@ -0,0 +1,75 @@
+import * as _react_types_shared from '@react-types/shared';
+import { TabsClassNames, TabsProps, TabListProps, TabListAlignment, TabListAnchor, TabListSizes, TabListVariants, TabPanelsProps, TabPanelProps } from './types.js';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue, SlotProps } from 'react-aria-components';
+import * as react from 'react';
+import { RequiredDeep } from 'type-fest';
+import '../../types/generic.js';
+
+declare const TEST_IDS: RequiredDeep<TabsClassNames>;
+declare const TabsContext: react.Context<ContextValue<TabsProps, HTMLDivElement>>;
+/**
+ * A required wrapper for other Tabs components, which manages
+ * and provides the state context. Other Tabs components will
+ * throw an error if not wrapped with this component
+ *
+ * NOTE: TabList & TabPanels do not have to be direct children
+ * of this component. Additional layout can be introduced around
+ * this components children
+ */
+declare const Tabs: (props: Omit<react_aria_components.TabsProps, "children" | "className" | "style"> & {
+    classNames?: TabsClassNames;
+} & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TabListContext: react.Context<ContextValue<TabListProps<unknown>, HTMLDivElement>>;
+/**
+ * Parent of Tab
+ */
+declare const TabList: <T extends object>(props: Omit<react_aria_components.TabListProps<T>, "className" | "style"> & {
+    align?: TabListAlignment;
+    anchor?: TabListAnchor;
+    orientation?: _react_types_shared.Orientation;
+    size?: TabListSizes;
+    variant?: TabListVariants;
+} & {
+    classNames?: TabsClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TabContext: react.Context<ContextValue<Omit<Omit<react_aria_components.TabProps, "className" | "style"> & {
+    id: string;
+} & _react_types_shared.PressEvents & {
+    classNames?: TabsClassNames;
+} & SlotProps, "id">, HTMLDivElement>>;
+/**
+ * Must be a direct child of TabList
+ */
+declare const Tab: (props: Omit<react_aria_components.TabProps, "className" | "style"> & {
+    id: string;
+} & _react_types_shared.PressEvents & {
+    classNames?: TabsClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TabPanelsContext: react.Context<ContextValue<TabPanelsProps, HTMLDivElement>>;
+/**
+ * Parent of TabPanel, but only required if using shouldForceMount=true
+ */
+declare const TabPanels: (props: {
+    shouldForceMount?: boolean;
+} & {
+    children?: react.ReactNode | undefined;
+} & {
+    classNames?: TabsClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TabPanelContext: react.Context<ContextValue<Omit<TabPanelProps, "id">, HTMLDivElement>>;
+/**
+ * Must be direct child of TabPanels if TabPanel implements shouldForceMount=true
+ *
+ * Othewise can be used anywhere inside of Tabs. TabPanels may be desirable to use
+ * if theme implements any styles that adjust layout
+ */
+declare const TabPanel: (props: Omit<react_aria_components.TabPanelProps, "className" | "style"> & {
+    id: string;
+} & {
+    classNames?: TabsClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { TEST_IDS, Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext };