@accelint/design-system 0.1.0 → 0.2.0

package/dist/assets/styles/typography.css

@@ -0,0 +1,150 @@
+@layer layers_framework__qkbqqj1.layers_styles__qkbqqj8;
+.typography_families_mono__j8fgab0 {
+  font-family: var(--mono__ljimwq3i);
+}
+.typography_families_sans__j8fgab1 {
+  font-family: var(--sans__ljimwq3j);
+}
+.typography_families_serif__j8fgab2 {
+  font-family: var(--serif__ljimwq3k);
+}
+@layer layers_framework__qkbqqj1.layers_styles__qkbqqj8 {
+  h1 {
+    font-size: var(--heading-v1-size__ljimwq3m);
+    font-weight: var(--heading-v1-weight__ljimwq3o);
+    letter-spacing: var(--heading-v1-spacing__ljimwq3n);
+    line-height: var(--heading-v1-height__ljimwq3l);
+  }
+  .typography__j8fgab3 {
+    font-size: var(--heading-v1-size__ljimwq3m);
+    font-weight: var(--heading-v1-weight__ljimwq3o);
+    letter-spacing: var(--heading-v1-spacing__ljimwq3n);
+    line-height: var(--heading-v1-height__ljimwq3l);
+  }
+  h2 {
+    font-size: var(--heading-v2-size__ljimwq3q);
+    font-weight: var(--heading-v2-weight__ljimwq3s);
+    letter-spacing: var(--heading-v2-spacing__ljimwq3r);
+    line-height: var(--heading-v2-height__ljimwq3p);
+  }
+  .typography__j8fgab4 {
+    font-size: var(--heading-v2-size__ljimwq3q);
+    font-weight: var(--heading-v2-weight__ljimwq3s);
+    letter-spacing: var(--heading-v2-spacing__ljimwq3r);
+    line-height: var(--heading-v2-height__ljimwq3p);
+  }
+  h3 {
+    font-size: var(--heading-v3-size__ljimwq3u);
+    font-weight: var(--heading-v3-weight__ljimwq3w);
+    letter-spacing: var(--heading-v3-spacing__ljimwq3v);
+    line-height: var(--heading-v3-height__ljimwq3t);
+  }
+  .typography__j8fgab5 {
+    font-size: var(--heading-v3-size__ljimwq3u);
+    font-weight: var(--heading-v3-weight__ljimwq3w);
+    letter-spacing: var(--heading-v3-spacing__ljimwq3v);
+    line-height: var(--heading-v3-height__ljimwq3t);
+  }
+  h4 {
+    font-size: var(--heading-v4-size__ljimwq3y);
+    font-weight: var(--heading-v4-weight__ljimwq40);
+    letter-spacing: var(--heading-v4-spacing__ljimwq3z);
+    line-height: var(--heading-v4-height__ljimwq3x);
+  }
+  .typography__j8fgab6 {
+    font-size: var(--heading-v4-size__ljimwq3y);
+    font-weight: var(--heading-v4-weight__ljimwq40);
+    letter-spacing: var(--heading-v4-spacing__ljimwq3z);
+    line-height: var(--heading-v4-height__ljimwq3x);
+  }
+  h5 {
+    font-size: var(--heading-v5-size__ljimwq42);
+    font-weight: var(--heading-v5-weight__ljimwq44);
+    letter-spacing: var(--heading-v5-spacing__ljimwq43);
+    line-height: var(--heading-v5-height__ljimwq41);
+  }
+  .typography__j8fgab7 {
+    font-size: var(--heading-v5-size__ljimwq42);
+    font-weight: var(--heading-v5-weight__ljimwq44);
+    letter-spacing: var(--heading-v5-spacing__ljimwq43);
+    line-height: var(--heading-v5-height__ljimwq41);
+  }
+  h6 {
+    font-size: var(--heading-v6-size__ljimwq46);
+    font-weight: var(--heading-v6-weight__ljimwq48);
+    letter-spacing: var(--heading-v6-spacing__ljimwq47);
+    line-height: var(--heading-v6-height__ljimwq45);
+  }
+  .typography__j8fgab8 {
+    font-size: var(--heading-v6-size__ljimwq46);
+    font-weight: var(--heading-v6-weight__ljimwq48);
+    letter-spacing: var(--heading-v6-spacing__ljimwq47);
+    line-height: var(--heading-v6-height__ljimwq45);
+  }
+  .typography__j8fgab9 {
+    font-size: var(--body-xs-size__ljimwq4a);
+    font-weight: var(--body-xs-weight__ljimwq4c);
+    letter-spacing: var(--body-xs-spacing__ljimwq4b);
+    line-height: var(--body-xs-height__ljimwq49);
+  }
+  .typography__j8fgaba {
+    font-size: var(--body-sm-size__ljimwq4e);
+    font-weight: var(--body-sm-weight__ljimwq4g);
+    letter-spacing: var(--body-sm-spacing__ljimwq4f);
+    line-height: var(--body-sm-height__ljimwq4d);
+  }
+  .typography__j8fgabb {
+    font-size: var(--body-md-size__ljimwq4i);
+    font-weight: var(--body-md-weight__ljimwq4k);
+    letter-spacing: var(--body-md-spacing__ljimwq4j);
+    line-height: var(--body-md-height__ljimwq4h);
+  }
+  .typography__j8fgabc {
+    font-size: var(--body-lg-size__ljimwq4m);
+    font-weight: var(--body-lg-weight__ljimwq4o);
+    letter-spacing: var(--body-lg-spacing__ljimwq4n);
+    line-height: var(--body-lg-height__ljimwq4l);
+  }
+  .typography__j8fgabd {
+    font-size: var(--body-xl-size__ljimwq4q);
+    font-weight: var(--body-xl-weight__ljimwq4s);
+    letter-spacing: var(--body-xl-spacing__ljimwq4r);
+    line-height: var(--body-xl-height__ljimwq4p);
+  }
+  .typography__j8fgabe {
+    font-size: var(--input-sm-size__ljimwq4u);
+    font-weight: var(--input-sm-weight__ljimwq4w);
+    letter-spacing: var(--input-sm-spacing__ljimwq4v);
+    line-height: var(--input-sm-height__ljimwq4t);
+  }
+  .typography__j8fgabf {
+    font-size: var(--input-lg-size__ljimwq4y);
+    font-weight: var(--input-lg-weight__ljimwq50);
+    letter-spacing: var(--input-lg-spacing__ljimwq4z);
+    line-height: var(--input-lg-height__ljimwq4x);
+  }
+  input {
+    font-size: var(--input-lg-size__ljimwq4y);
+    font-weight: var(--input-lg-weight__ljimwq50);
+    letter-spacing: var(--input-lg-spacing__ljimwq4z);
+    line-height: var(--input-lg-height__ljimwq4x);
+  }
+  textarea {
+    font-size: var(--input-lg-size__ljimwq4y);
+    font-weight: var(--input-lg-weight__ljimwq50);
+    letter-spacing: var(--input-lg-spacing__ljimwq4z);
+    line-height: var(--input-lg-height__ljimwq4x);
+  }
+  label {
+    font-size: var(--label-size__ljimwq52);
+    font-weight: var(--label-weight__ljimwq54);
+    letter-spacing: var(--label-spacing__ljimwq53);
+    line-height: var(--label-height__ljimwq51);
+  }
+  .typography_label__j8fgabg {
+    font-size: var(--label-size__ljimwq52);
+    font-weight: var(--label-weight__ljimwq54);
+    letter-spacing: var(--label-spacing__ljimwq53);
+    line-height: var(--label-height__ljimwq51);
+  }
+}

package/dist/components/aria/aria.d.ts

@@ -0,0 +1,19 @@
+import { type RefAttributes } from 'react';
+import { type ContextValue, type SectionProps, type SelectValueProps } from 'react-aria-components';
+export declare const AriaFieldError: (props: import("react-aria-components").FieldErrorProps & RefAttributes<HTMLElement>) => import("react").ReactElement | null, AriaFieldErrorContext: import("react").Context<ContextValue<import("react-aria-components").FieldErrorProps & RefAttributes<HTMLElement>, HTMLElement>>;
+export declare const AriaGroup: (props: import("react-aria-components").GroupProps & RefAttributes<HTMLDivElement>) => import("react").ReactElement | null, AriaGroupContext: import("react").Context<ContextValue<import("react-aria-components").GroupProps & RefAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const AriaHeader: (props: import("react").HTMLAttributes<HTMLElement> & RefAttributes<object> & RefAttributes<HTMLElement>) => import("react").ReactElement | null, AriaHeaderContext: import("react").Context<ContextValue<import("react").HTMLAttributes<HTMLElement> & RefAttributes<object>, HTMLElement>>;
+export declare const AriaHeading: (props: import("react-aria-components").HeadingProps & RefAttributes<HTMLHeadingElement>) => import("react").ReactElement | null, AriaHeadingContext: import("react").Context<ContextValue<import("react-aria-components").HeadingProps & RefAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const AriaKeyboard: (props: import("react").HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>) => import("react").ReactElement | null, AriaKeyboardContext: import("react").Context<ContextValue<import("react").HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>, HTMLElement>>;
+export declare const AriaLabel: (props: import("react-aria-components").LabelProps & RefAttributes<HTMLLabelElement>) => import("react").ReactElement | null, AriaLabelContext: import("react").Context<ContextValue<import("react-aria-components").LabelProps & RefAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+export declare const AriaSeparator: (props: import("react-aria-components").SeparatorProps & RefAttributes<object> & RefAttributes<HTMLElement>) => import("react").ReactElement | null, AriaSeparatorContext: import("react").Context<ContextValue<import("react-aria-components").SeparatorProps & RefAttributes<object>, HTMLElement>>;
+export declare const AriaText: (props: import("react-aria-components").TextProps & RefAttributes<HTMLElement>) => import("react").ReactElement | null, AriaTextContext: import("react").Context<ContextValue<import("react-aria-components").TextProps & RefAttributes<HTMLElement>, HTMLElement>>;
+/**
+ * Due to the complexity of types and technical constraints of TS, it's not
+ * possible for the above wrapping utility to support components that accept
+ * generic parameters. This means that these components must be manually wrapped
+ */
+export declare const AriaSectionContext: import("react").Context<ContextValue<SectionProps<object>, HTMLElement>>;
+export declare const AriaSection: <T extends object>(props: SectionProps<T> & RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+export declare const AriaSelectValueContext: import("react").Context<ContextValue<SelectValueProps<object>, HTMLSpanElement>>;
+export declare const AriaSelectValue: <T extends object>(props: SelectValueProps<T> & RefAttributes<HTMLSpanElement>) => import("react").ReactElement | null;

package/dist/components/aria/aria.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef } from 'react';
+import { Section, SelectValue, FieldError, Group, Header, Heading, Keyboard, Label, Separator, Text } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
+
+function wrap(Component) {
+  const Context = createContext(null);
+  return {
+    // biome-ignore lint/style/useNamingConvention: intentional
+    Component: forwardRef(function WrappedComponent(props, ref) {
+      [props, ref] = useContextProps(props, ref, Context);
+      return jsx(Component, { ...props, ref });
+    }),
+    Context
+  };
+}
+const { Component: AriaFieldError, Context: AriaFieldErrorContext } = wrap(FieldError);
+const { Component: AriaGroup, Context: AriaGroupContext } = wrap(Group);
+const { Component: AriaHeader, Context: AriaHeaderContext } = wrap(Header);
+const { Component: AriaHeading, Context: AriaHeadingContext } = wrap(Heading);
+const { Component: AriaKeyboard, Context: AriaKeyboardContext } = wrap(Keyboard);
+const { Component: AriaLabel, Context: AriaLabelContext } = wrap(Label);
+const { Component: AriaSeparator, Context: AriaSeparatorContext } = wrap(Separator);
+const { Component: AriaText, Context: AriaTextContext } = wrap(Text);
+const AriaSectionContext = createContext(null);
+const AriaSection = forwardRef(function AriaSection2(props, ref) {
+  [props, ref] = useContextProps(props, ref, AriaSectionContext);
+  return jsx(Section, { ...props, ref });
+});
+const AriaSelectValueContext = createContext(null);
+const AriaSelectValue = forwardRef(function AriaSelectValue2(props, ref) {
+  [props, ref] = useContextProps(props, ref, AriaSelectValueContext);
+  return jsx(SelectValue, { ...props, ref });
+});
+
+export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext };

package/dist/components/aria/aria.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.js","sources":["../../../src/components/aria/aria.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  type ForwardedRef,\n  type RefAttributes,\n  type ReactNode,\n} from 'react';\nimport {\n  FieldError,\n  Group,\n  Header,\n  Heading,\n  Keyboard,\n  Label,\n  Section,\n  SelectValue,\n  Separator,\n  Text,\n  type ContextValue,\n  type SectionProps,\n  type SelectValueProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks';\n\n/**\n * To better align with the guidance from RAC about establishing a unique\n * context for components to avoid conflict of props being provided by RAC\n * and C2DS components, this wrapping utility accepts an RAC and returns\n * a wrapped version along with the new context for the C2DS to use\n */\nfunction wrap<P extends object, E extends HTMLElement>(\n  Component: (props: P & RefAttributes<E>) => ReactNode,\n) {\n  const Context = createContext<ContextValue<P, E>>(null);\n\n  return {\n    // biome-ignore lint/style/useNamingConvention: intentional\n    Component: forwardRef<E, P>(function WrappedComponent(props, ref) {\n      [props, ref] = useContextProps(props, ref, Context);\n\n      return <Component {...props} ref={ref} />;\n    }),\n    Context,\n  };\n}\n\nexport const { Component: AriaFieldError, Context: AriaFieldErrorContext } =\n  wrap(FieldError);\n\nexport const { Component: AriaGroup, Context: AriaGroupContext } = wrap(Group);\n\nexport const { Component: AriaHeader, Context: AriaHeaderContext } =\n  wrap(Header);\n\nexport const { Component: AriaHeading, Context: AriaHeadingContext } =\n  wrap(Heading);\n\nexport const { Component: AriaKeyboard, Context: AriaKeyboardContext } =\n  wrap(Keyboard);\n\nexport const { Component: AriaLabel, Context: AriaLabelContext } = wrap(Label);\n\nexport const { Component: AriaSeparator, Context: AriaSeparatorContext } =\n  wrap(Separator);\n\nexport const { Component: AriaText, Context: AriaTextContext } = wrap(Text);\n\n/**\n * Due to the complexity of types and technical constraints of TS, it's not\n * possible for the above wrapping utility to support components that accept\n * generic parameters. This means that these components must be manually wrapped\n */\n\nexport const AriaSectionContext =\n  createContext<ContextValue<SectionProps<object>, HTMLElement>>(null);\n\nexport const AriaSection = forwardRef(function AriaSection<T extends object>(\n  props: SectionProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  [props, ref] = useContextProps(props, ref, AriaSectionContext);\n\n  return <Section {...props} ref={ref} />;\n});\n\nexport const AriaSelectValueContext =\n  createContext<ContextValue<SelectValueProps<object>, HTMLSpanElement>>(null);\n\nexport const AriaSelectValue = forwardRef(function AriaSelectValue<\n  T extends object,\n>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {\n  [props, ref] = useContextProps(props, ref, AriaSelectValueContext);\n\n  return <SelectValue {...props} ref={ref} />;\n});\n"],"names":["AriaSection","AriaSelectValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAS,KACP,SACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,cAAkC,IAAI,CAAA,CAAA;AAEtD,EAAO,OAAA;AAAA;AAAA,IAEL,SAAW,EAAA,UAAA,CAAiB,SAAS,gBAAA,CAAiB,OAAO,GAAK,EAAA;AAChE,MAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,OAAO,CAAA,CAAA;AAElD,MAAA,uBAAQ,GAAA,CAAA,SAAA,EAAA,EAAW,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,KACxC,CAAA;AAAA,IACD,OAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEO,MAAM,EAAE,SAAW,EAAA,cAAA,EAAgB,SAAS,qBAAsB,EAAA,GACvE,KAAK,UAAU,EAAA;AAEV,MAAM,EAAE,SAAW,EAAA,SAAA,EAAW,SAAS,gBAAiB,EAAA,GAAI,KAAK,KAAK,EAAA;AAEtE,MAAM,EAAE,SAAW,EAAA,UAAA,EAAY,SAAS,iBAAkB,EAAA,GAC/D,KAAK,MAAM,EAAA;AAEN,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,SAAS,kBAAmB,EAAA,GACjE,KAAK,OAAO,EAAA;AAEP,MAAM,EAAE,SAAW,EAAA,YAAA,EAAc,SAAS,mBAAoB,EAAA,GACnE,KAAK,QAAQ,EAAA;AAER,MAAM,EAAE,SAAW,EAAA,SAAA,EAAW,SAAS,gBAAiB,EAAA,GAAI,KAAK,KAAK,EAAA;AAEtE,MAAM,EAAE,SAAW,EAAA,aAAA,EAAe,SAAS,oBAAqB,EAAA,GACrE,KAAK,SAAS,EAAA;AAET,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,eAAgB,EAAA,GAAI,KAAK,IAAI,EAAA;AAQ7D,MAAA,kBAAA,GACX,cAA+D,IAAI,EAAA;AAE9D,MAAM,WAAc,GAAA,UAAA,CAAW,SAASA,YAAAA,CAC7C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,kBAAkB,CAAA,CAAA;AAE7D,EAAA,uBAAQ,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AACvC,CAAC,EAAA;AAEY,MAAA,sBAAA,GACX,cAAuE,IAAI,EAAA;AAEtE,MAAM,eAAkB,GAAA,UAAA,CAAW,SAASC,gBAAAA,CAEjD,OAA4B,GAAoC,EAAA;AAChE,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,sBAAsB,CAAA,CAAA;AAEjE,EAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAC3C,CAAC;;;;"}

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

@@ -0,0 +1 @@
+export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext, } from './aria';

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

@@ -0,0 +1,33 @@
+import type { ButtonClassNames } from './types';
+export declare const buttonContainer: string;
+export declare const buttonColorVars: {
+    nonSolidColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    bareBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hollowBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    solidBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    solidColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    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})`;
+};
+export declare const buttonSpaceVars: {
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const buttonStateVars: {
+    color: `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})`;
+    isCurrent: `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})`;
+    isPending: `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})`;
+};
+export declare const buttonClassNames: ButtonClassNames;

package/dist/components/button/button.d.ts

@@ -0,0 +1,39 @@
+import { type Context } from 'react';
+import { type ContextValue } from 'react-aria-components';
+import type { ButtonMapping, ButtonProps, ButtonSizes, LinkButtonProps, ToggleButtonProps } from './types';
+export declare const ButtonContext: Context<ContextValue<ButtonProps, HTMLButtonElement>>;
+export declare const Button: (props: Omit<import("react-aria-components").ButtonProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
+    classNames?: Partial<{
+        container: string;
+        button: string;
+    }> | undefined;
+    color?: import("./types").ButtonColors;
+    mapping?: Partial<ButtonMapping>;
+    size?: ButtonSizes;
+    variant?: import("./types").ButtonVariants;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
+export declare const LinkButtonContext: Context<ContextValue<LinkButtonProps, HTMLAnchorElement>>;
+export declare const LinkButton: (props: Omit<import("react-aria-components").LinkProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
+    classNames?: Partial<{
+        container: string;
+        button: string;
+    }> | undefined;
+    color?: import("./types").ButtonColors;
+    mapping?: Partial<ButtonMapping>;
+    size?: ButtonSizes;
+    variant?: import("./types").ButtonVariants;
+} & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement | null;
+export declare const ToggleButtonContext: Context<ContextValue<ToggleButtonProps, HTMLButtonElement>>;
+export declare const ToggleButton: (props: Omit<import("react-aria-components").ToggleButtonProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
+    classNames?: Partial<{
+        container: string;
+        button: string;
+    }> | undefined;
+    color?: import("./types").ButtonColors;
+    mapping?: Partial<ButtonMapping>;
+    size?: ButtonSizes;
+    variant?: import("./types").ButtonVariants;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;

package/dist/components/button/button.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { noop } from 'lodash';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Button as Button$1, Link, ToggleButton as ToggleButton$1, Provider } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { surfaces } from '../../styles/surfaces.vanilla.js';
+import { bodies } from '../../styles/typography.vanilla.js';
+import { IconContext } from '../icon/icon.js';
+import { buttonClassNames, buttonStateVars } from './button.vanilla.js';
+
+const noopToggleState = { isSelected: false, setSelected: noop, toggle: noop };
+const buttonSizes = ["xs", "sm", "md", "lg", "xl"];
+const defaultMapping = {
+  font: bodies,
+  icon: buttonSizes.reduce((acc, size) => {
+    acc[size] = { size };
+    return acc;
+  }, {})
+};
+function useButton(props, ref, context, key) {
+  [props, ref] = useContextProps(props, ref, context);
+  props = useDefaultProps(props, key);
+  const { children: childrenProp, classNames: classNamesProp, color = "primary", mapping: mappingProp, size = "md", variant = "solid", ...rest } = props;
+  const theme = useTheme();
+  const mapping = useMemo(() => ({
+    ...defaultMapping,
+    ...mappingProp
+  }), [mappingProp]);
+  const classNames = useMemo(() => mergeClassNames(buttonClassNames, theme.Button, classNamesProp, {
+    button: clsx(mapping.font[size], variant === "floating" && surfaces.default.proud)
+  }), [theme.Button, classNamesProp, mapping.font, size, variant]);
+  const style = useCallback((renderProps) => inlineVars(buttonStateVars, {
+    isCurrent: false,
+    isSelected: false,
+    ...renderProps,
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  const values = useMemo(() => [[IconContext, mapping.icon[size]]], [mapping.icon, size]);
+  const children = useCallback((renderProps) => jsx(Provider, { values, children: jsx("span", { className: classNames?.button, children: callRenderProps(childrenProp, {
+    state: noopToggleState,
+    isCurrent: false,
+    isPending: false,
+    isSelected: false,
+    ...renderProps
+  }) }) }), [values, classNames?.button, childrenProp]);
+  return useMemo(() => ({ ...rest, ref, children, className: classNames?.container, style }), [rest, ref, children, classNames?.container, style]);
+}
+const ButtonContext = createContext(null);
+const Button = forwardRef(function Button2(props, ref) {
+  const buttonProps = useButton(props, ref, ButtonContext, "Button");
+  return jsx(Button$1, { ...buttonProps });
+});
+const LinkButtonContext = createContext(null);
+const LinkButton = forwardRef(function LinkButton2(props, ref) {
+  const buttonProps = useButton(props, ref, LinkButtonContext, "LinkButton");
+  return jsx(Link, { ...buttonProps });
+});
+const ToggleButtonContext = createContext(null);
+const ToggleButton = forwardRef(function ToggleButton2(props, ref) {
+  const buttonProps = useButton(props, ref, ToggleButtonContext, "ToggleButton");
+  return jsx(ToggleButton$1, { ...buttonProps });
+});
+
+export { Button, ButtonContext, LinkButton, LinkButtonContext, ToggleButton, ToggleButtonContext };

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { noop } from 'lodash';\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type Context,\n  type ForwardedRef,\n} from 'react';\nimport {\n  Link,\n  Provider,\n  Button as RACButton,\n  ToggleButton as RACToggleButton,\n  type ButtonRenderProps,\n  type ContextValue,\n  type LinkRenderProps,\n  type ToggleButtonRenderProps,\n} from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies, surfaces } from '../../styles';\nimport type { OmitProtectedProps } from '../../types';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { IconContext, type IconProps } from '../icon';\nimport { buttonClassNames, buttonStateVars } from './button.css';\nimport type {\n  ButtonMapping,\n  ButtonProps,\n  ButtonSizes,\n  LinkButtonProps,\n  ToggleButtonProps,\n} from './types';\n\nconst noopToggleState = { isSelected: false, setSelected: noop, toggle: noop };\nconst buttonSizes: ButtonSizes[] = ['xs', 'sm', 'md', 'lg', 'xl'];\n\nconst defaultMapping: ButtonMapping = {\n  font: bodies,\n  icon: buttonSizes.reduce(\n    (acc, size) => {\n      acc[size] = { size };\n\n      return acc;\n    },\n    {} as Record<ButtonSizes, OmitProtectedProps<IconProps>>,\n  ),\n};\n\nfunction useButton<\n  P extends ButtonProps | LinkButtonProps | ToggleButtonProps,\n  E extends HTMLElement,\n>(\n  props: P,\n  ref: ForwardedRef<E>,\n  context: Context<ContextValue<P, E>>,\n  key: 'Button' | 'LinkButton' | 'ToggleButton',\n) {\n  [props, ref] = useContextProps(props, ref, context);\n\n  props = useDefaultProps(props, key);\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    color = 'primary',\n    mapping: mappingProp,\n    size = 'md',\n    variant = 'solid',\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(buttonClassNames, theme.Button, classNamesProp, {\n        button: clsx(\n          mapping.font[size],\n          variant === 'floating' && surfaces.default.proud,\n        ),\n      }),\n    [theme.Button, classNamesProp, mapping.font, size, variant],\n  );\n\n  const style = useCallback(\n    (\n      renderProps:\n        | ButtonRenderProps\n        | LinkRenderProps\n        | ToggleButtonRenderProps,\n    ) =>\n      inlineVars(buttonStateVars, {\n        isCurrent: false,\n        isSelected: false,\n        ...renderProps,\n        color,\n        size,\n        variant,\n      }),\n    [color, size, variant],\n  );\n\n  const values = useMemo<\n    [[typeof IconContext, ContextValue<IconProps, HTMLDivElement>]]\n  >(() => [[IconContext, mapping.icon[size]]], [mapping.icon, size]);\n\n  const children = useCallback(\n    (\n      renderProps:\n        | ButtonRenderProps\n        | LinkRenderProps\n        | ToggleButtonRenderProps,\n    ) => (\n      <Provider values={values}>\n        <span className={classNames?.button}>\n          {callRenderProps(childrenProp, {\n            state: noopToggleState,\n            isCurrent: false,\n            isPending: false,\n            isSelected: false,\n            ...renderProps,\n          })}\n        </span>\n      </Provider>\n    ),\n    [values, classNames?.button, childrenProp],\n  );\n\n  return useMemo(\n    () => ({ ...rest, ref, children, className: classNames?.container, style }),\n    [rest, ref, children, classNames?.container, style],\n  );\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<ButtonProps, HTMLButtonElement>>(null);\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const buttonProps = useButton(props, ref, ButtonContext, 'Button');\n\n  return <RACButton {...buttonProps} />;\n});\n\nexport const LinkButtonContext =\n  createContext<ContextValue<LinkButtonProps, HTMLAnchorElement>>(null);\n\nexport const LinkButton = forwardRef(function LinkButton(\n  props: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  const buttonProps = useButton(props, ref, LinkButtonContext, 'LinkButton');\n\n  return <Link {...buttonProps} />;\n});\n\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>(null);\n\nexport const ToggleButton = forwardRef(function ToggleButton(\n  props: ToggleButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const buttonProps = useButton(\n    props,\n    ref,\n    ToggleButtonContext,\n    'ToggleButton',\n  );\n\n  return <RACToggleButton {...buttonProps} />;\n});\n"],"names":["Button","RACButton","LinkButton","ToggleButton","RACToggleButton"],"mappings":"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"}

package/dist/components/button/button.vanilla.js

@@ -0,0 +1,8 @@
+
+var buttonClassNames = { container: "button_buttonClassNames_container__17k72zwp", button: "button_buttonClassNames_button__17k72zwq" };
+var buttonColorVars = { nonSolidColor: "var(--nonSolidColor__17k72zw1)", bareBackground: "var(--bareBackground__17k72zw2)", hollowBorder: "var(--hollowBorder__17k72zw3)", solidBackground: "var(--solidBackground__17k72zw4)", solidColor: "var(--solidColor__17k72zw5)", background: "var(--background__17k72zw6)", border: "var(--border__17k72zw7)", color: "var(--color__17k72zw8)" };
+var buttonContainer = "button_buttonContainer__17k72zw0";
+var buttonSpaceVars = { gap: "var(--gap__17k72zw9)", minWidth: "var(--minWidth__17k72zwa)", width: "var(--width__17k72zwb)", x: "var(--x__17k72zwc)", y: "var(--y__17k72zwd)" };
+var buttonStateVars = { color: "var(--color__17k72zwe)", size: "var(--size__17k72zwf)", variant: "var(--variant__17k72zwg)", isCurrent: "var(--isCurrent__17k72zwh)", isDisabled: "var(--isDisabled__17k72zwi)", isFocused: "var(--isFocused__17k72zwj)", isFocusVisible: "var(--isFocusVisible__17k72zwk)", isHovered: "var(--isHovered__17k72zwl)", isPending: "var(--isPending__17k72zwm)", isPressed: "var(--isPressed__17k72zwn)", isSelected: "var(--isSelected__17k72zwo)" };
+
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars };

package/dist/components/button/button.vanilla.js.map

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

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

@@ -0,0 +1,3 @@
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars, } from './button.css';
+export { Button, ButtonContext, LinkButton, LinkButtonContext, ToggleButton, ToggleButtonContext, } from './button';
+export { type ButtonClassNames, type ButtonColors, type ButtonMapping, type ButtonProps, type ButtonRenderProps, type ButtonSizes, type ButtonState, type LinkButtonProps, type ToggleButtonProps, } from './types';

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

@@ -0,0 +1,28 @@
+import type { LinkProps, LinkRenderProps, ButtonProps as RACButtonProps, ButtonRenderProps as RACButtonRenderProps, ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';
+import type { OmitProtectedProps, RenderPropsChildren } from '../../types';
+import type { IconProps } from '../icon/types';
+export type ButtonClassNames = Partial<{
+    container: string;
+    button: string;
+}>;
+export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'advisory' | 'affirmative' | 'serious' | 'critical';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonVariants = 'solid' | 'hollow' | 'bare' | 'icon' | 'floating';
+export type ButtonRenderProps = RACButtonRenderProps & LinkRenderProps & ToggleButtonRenderProps;
+export type ButtonMapping = {
+    font: Partial<Record<ButtonSizes, string>>;
+    icon: Partial<Record<ButtonSizes, OmitProtectedProps<IconProps>>>;
+};
+type BaseButtonProps = {
+    children?: RenderPropsChildren<ButtonRenderProps>;
+    classNames?: ButtonClassNames;
+    color?: ButtonColors;
+    mapping?: Partial<ButtonMapping>;
+    size?: ButtonSizes;
+    variant?: ButtonVariants;
+};
+export type ButtonState = Omit<ButtonRenderProps, 'state'> & Required<Pick<BaseButtonProps, 'color' | 'size' | 'variant'>>;
+export type ButtonProps = Omit<RACButtonProps, 'children' | 'className' | 'style'> & BaseButtonProps;
+export type ToggleButtonProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & BaseButtonProps;
+export type LinkButtonProps = Omit<LinkProps, 'children' | 'className' | 'style'> & BaseButtonProps;
+export {};

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

@@ -0,0 +1,35 @@
+import type { CheckboxClassNames } from './types';
+export declare const checkboxContainer: string;
+export declare const checkboxGroupContainer: string;
+export declare const checkboxColorVars: {
+    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})`;
+};
+export declare const checkboxSpaceVars: {
+    dimension: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    elementGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const checkboxStateVars: {
+    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})`;
+    isIndeterminate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `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})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const checkboxGroupStateVars: {
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `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})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const checkboxClassNames: CheckboxClassNames;

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,21 @@
+import { type ContextValue } from 'react-aria-components';
+import type { CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxProps, CheckboxRenderProps } from './types';
+export declare const CheckboxContext: import("react").Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
+export declare const Checkbox: (props: Omit<import("react-aria-components").CheckboxProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<CheckboxRenderProps>;
+    label?: string;
+    classNames?: import("./types").CheckboxClassNames;
+    alignInput?: import("./types").CheckboxAlignment;
+} & import("react").RefAttributes<HTMLLabelElement>) => import("react").ReactElement | null;
+export declare const CheckboxGroupContext: import("react").Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
+export declare const CheckboxGroup: (props: Omit<import("react-aria-components").CheckboxGroupProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<CheckboxGroupRenderProps>;
+    classNames?: import("./types").CheckboxClassNames;
+    label?: string;
+    orientation?: import("react-aria").Orientation;
+} & Pick<{
+    children?: import("../..").RenderPropsChildren<CheckboxRenderProps>;
+    label?: string;
+    classNames?: import("./types").CheckboxClassNames;
+    alignInput?: import("./types").CheckboxAlignment;
+}, "alignInput"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { TextContext, Provider, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useSlot } from '../../hooks/use-slot/use-slot.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { AriaTextContext, AriaLabelContext } from '../aria/aria.js';
+import { IconContext } from '../icon/icon.js';
+import { checkboxClassNames, checkboxStateVars, checkboxGroupStateVars } from './checkbox.vanilla.js';
+
+const CheckboxContext = createContext(null);
+const Checkbox = forwardRef(function Checkbox2(props, ref) {
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  props = useDefaultProps(props, "Checkbox");
+  const { children: childrenProp, classNames: classNamesProp, alignInput = "end", ...rest } = props;
+  const [iconRef, hasIcon] = useSlot();
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp), [theme.Checkbox, classNamesProp]);
+  const style = useCallback(({ ...renderProps }) => inlineVars(checkboxStateVars, {
+    ...renderProps,
+    alignInput
+  }), [alignInput]);
+  const values = useMemo(() => [
+    [AriaTextContext, { className: classNames?.checkbox?.label }],
+    [
+      IconContext,
+      {
+        ref: iconRef,
+        classNames: classNames?.checkbox?.icon
+      }
+    ],
+    [TextContext, null]
+  ], [classNames?.checkbox?.label, classNames?.checkbox?.icon, iconRef]);
+  const children = useCallback((renderProps) => jsx(Provider, { values, children: jsxs("div", { className: classNames?.checkbox?.checkbox, children: [!hasIcon && jsx("span", { className: classNames?.checkbox?.icon?.container }), callRenderProps(childrenProp, renderProps)] }) }), [childrenProp, classNames?.checkbox, hasIcon, values]);
+  return jsx(Checkbox$1, { ...rest, ref, className: classNames?.checkbox?.container, style, children });
+});
+const CheckboxGroupContext = createContext(null);
+const CheckboxGroup = forwardRef(function CheckboxGroup2(props, ref) {
+  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
+  props = useDefaultProps(props, "CheckboxGroup");
+  const { children: childrenProp, classNames: classNamesProp, alignInput = "end", orientation = "vertical", ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp), [classNamesProp, theme.Checkbox]);
+  const style = useCallback((renderProps) => inlineVars(checkboxGroupStateVars, {
+    ...renderProps,
+    orientation
+  }), [orientation]);
+  const values = useMemo(() => [
+    [AriaLabelContext, { className: classNames?.group?.label }],
+    [
+      CheckboxContext,
+      {
+        classNames,
+        alignInput
+      }
+    ]
+  ], [alignInput, classNames]);
+  const children = useCallback((renderProps) => jsx(Provider, { values, children: jsx("div", { className: classNames?.group?.group, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    defaultChildren: null
+  }) }) }), [childrenProp, classNames?.group, values]);
+  return jsx(CheckboxGroup$1, { ...rest, ref, className: classNames?.group?.container, style, children });
+});
+
+export { Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext };

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n} from 'react';\nimport {\n  Provider,\n  Checkbox as RACCheckbox,\n  CheckboxGroup as RACCheckboxGroup,\n  TextContext,\n  type ContextValue,\n  type LabelProps,\n  type TextProps,\n} from 'react-aria-components';\nimport {\n  useContextProps,\n  useDefaultProps,\n  useSlot,\n  useTheme,\n} from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { AriaLabelContext, AriaTextContext } from '../aria';\nimport { IconContext, type IconProps } from '../icon';\nimport {\n  checkboxClassNames,\n  checkboxGroupStateVars,\n  checkboxStateVars,\n} from './checkbox.css';\nimport type {\n  CheckboxGroupProps,\n  CheckboxGroupRenderProps,\n  CheckboxProps,\n  CheckboxRenderProps,\n} from './types';\n\nexport const CheckboxContext =\n  createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);\n\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  [props, ref] = useContextProps(props, ref, CheckboxContext);\n\n  props = useDefaultProps(props, 'Checkbox');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    alignInput = 'end',\n    ...rest\n  } = props;\n\n  const [iconRef, hasIcon] = useSlot();\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n    [theme.Checkbox, classNamesProp],\n  );\n\n  const style = useCallback(\n    ({ ...renderProps }: CheckboxRenderProps) =>\n      inlineVars(checkboxStateVars, {\n        ...renderProps,\n        alignInput,\n      }),\n    [alignInput],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n      [typeof TextContext, ContextValue<TextProps, HTMLElement>],\n    ]\n  >(\n    () => [\n      [AriaTextContext, { className: classNames?.checkbox?.label }],\n      [\n        IconContext,\n        {\n          ref: iconRef,\n          classNames: classNames?.checkbox?.icon,\n        },\n      ],\n      [TextContext, null],\n    ],\n    [classNames?.checkbox?.label, classNames?.checkbox?.icon, iconRef],\n  );\n\n  const children = useCallback(\n    (renderProps: CheckboxRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.checkbox?.checkbox}>\n          {!hasIcon && (\n            <span className={classNames?.checkbox?.icon?.container} />\n          )}\n          {callRenderProps(childrenProp, renderProps)}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.checkbox, hasIcon, values],\n  );\n\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={classNames?.checkbox?.container}\n      style={style}\n    >\n      {children}\n    </RACCheckbox>\n  );\n});\n\nexport const CheckboxGroupContext =\n  createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);\n\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(\n  props: CheckboxGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);\n\n  props = useDefaultProps(props, 'CheckboxGroup');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    alignInput = 'end',\n    orientation = 'vertical',\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n    [classNamesProp, theme.Checkbox],\n  );\n\n  const style = useCallback(\n    (renderProps: CheckboxGroupRenderProps) =>\n      inlineVars(checkboxGroupStateVars, {\n        ...renderProps,\n        orientation,\n      }),\n    [orientation],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof CheckboxContext, ContextValue<CheckboxProps, HTMLLabelElement>],\n    ]\n  >(\n    () => [\n      [AriaLabelContext, { className: classNames?.group?.label }],\n      [\n        CheckboxContext,\n        {\n          classNames,\n          alignInput,\n        },\n      ],\n    ],\n    [alignInput, classNames],\n  );\n\n  const children = useCallback(\n    (renderProps: CheckboxGroupRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.group?.group}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.group, values],\n  );\n\n  return (\n    <RACCheckboxGroup\n      {...rest}\n      ref={ref}\n      className={classNames?.group?.container}\n      style={style}\n    >\n      {children}\n    </RACCheckboxGroup>\n  );\n});\n"],"names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"mappings":"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"}

package/dist/components/checkbox/checkbox.vanilla.js

@@ -0,0 +1,9 @@
+
+var checkboxClassNames = { checkbox: { container: "checkbox_checkboxClassNames_checkbox_container__1rajo3pp", checkbox: "checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq", icon: { container: "checkbox_checkboxClassNames_checkbox_icon_container__1rajo3pr" }, label: "checkbox_checkboxClassNames_checkbox_label__1rajo3ps typography_label__j8fgabg" }, group: { container: "checkbox_checkboxClassNames_group_container__1rajo3pt", group: "checkbox_checkboxClassNames_group_group__1rajo3pu", label: "checkbox_checkboxClassNames_group_label__1rajo3pv typography_label__j8fgabg" } };
+var checkboxColorVars = { border: "var(--border__1rajo3p2)", background: "var(--background__1rajo3p3)", color: "var(--color__1rajo3p4)", indicator: "var(--indicator__1rajo3p5)" };
+var checkboxContainer = "checkbox_checkboxContainer__1rajo3p0";
+var checkboxGroupStateVars = { orientation: "var(--orientation__1rajo3pk)", isDisabled: "var(--isDisabled__1rajo3pl)", isReadOnly: "var(--isReadOnly__1rajo3pm)", isRequired: "var(--isRequired__1rajo3pn)", isInvalid: "var(--isInvalid__1rajo3po)" };
+var checkboxSpaceVars = { dimension: "var(--dimension__1rajo3p6)", gap: "var(--gap__1rajo3p7)", elementGap: "var(--elementGap__1rajo3p8)" };
+var checkboxStateVars = { alignInput: "var(--alignInput__1rajo3p9)", isDisabled: "var(--isDisabled__1rajo3pa)", isFocused: "var(--isFocused__1rajo3pb)", isFocusVisible: "var(--isFocusVisible__1rajo3pc)", isHovered: "var(--isHovered__1rajo3pd)", isIndeterminate: "var(--isIndeterminate__1rajo3pe)", isInvalid: "var(--isInvalid__1rajo3pf)", isPressed: "var(--isPressed__1rajo3pg)", isReadOnly: "var(--isReadOnly__1rajo3ph)", isRequired: "var(--isRequired__1rajo3pi)", isSelected: "var(--isSelected__1rajo3pj)" };
+
+export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars };

package/dist/components/checkbox/checkbox.vanilla.js.map

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

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

@@ -0,0 +1,3 @@
+export { Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, } from './checkbox';
+export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars, } from './checkbox.css';
+export { type CheckboxAlignment, type CheckboxClassNames, type CheckboxGroupProps, type CheckboxGroupRenderProps, type CheckboxGroupState, type CheckboxProps, type CheckboxRenderProps, type CheckboxState, } from './types';