@accelint/design-system 0.3.2 → 0.4.0

package/README.md

@@ -12,13 +12,13 @@ This design system, which we've designated C2DS for simplicity, was born of thre
 
 From an engineering perspective, we also want to future-proof our investment by switching to an approach more natively compatible with React Server Components. This is the future of React and getting out ahead of that transition is valuable before it becomes a significant pain point inhibiting rapid feature development.
 
-Developed by the Core team, C2DS is a shared platform that all engineers can -- and are encouraged -- to contribute to. Eventually, this system will be published as open source to invite collaboration across our partners and the engineering community in general.
+Developed by the Core team at Accelint, C2DS is a shared platform that all engineers can -- and are encouraged -- to contribute to. This system is published as open source to invite collaboration across our partners and the engineering community in general.
 
 ### Performance
 
 The runtime performance of our applications is an enduring central concern. Our applications place a high performance demand on the browser client, primarily due to the sheer data throughput and intensive rendering requirements. Therefore, it makes sense to move away from a runtime CSS-in-JS solution in favor of a build/compile time styling solution.
 
-[Advantages >](./documentation/concepts.md#build-&-runtime)
+[Advantages >](./documentation/concepts.md#build-and-runtime)
 
 ### Flexibility and control
 
@@ -44,20 +44,24 @@ This design system is built on a number of concepts with which you may not be fa
 
 ## Getting started
 
-Check out what exists:
+Check out what exists. You can review the components, tokens and primitives available in the system using the Ladle stories for each element: [C2DS Stories](https://gohypergiant.github.io/standard-toolkit).
+
+From the root of the standard toolkit project, run:
 
 ```bash
-npm i
+pnpm i
 
-npm run preview -w @accelint/design-system
+pnpm --filter=@accelint/design-system preview
 ```
 
+If you run into errors, try running
+`pnpm build` after you install the dependencies and then run the preview command again. If you don't have pnpm enabled then you can enable it with the command
+[`corepack enable pnpm`](https://pnpm.io/installation#using-corepack) .
+
 ### Implementation
 
 [Learn](./documentation/implementation.md) how to get your app up and running.
 
-<!-- TODO - documentation around build systems -->
-
 ### Contribution
 
 [Learn](./documentation/contribution.md) how to craft components for this design system.

package/dist/chunk-PZ5AY32C.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export { __export };
+//# sourceMappingURL=chunk-PZ5AY32C.js.map
+//# sourceMappingURL=chunk-PZ5AY32C.js.map

package/dist/chunk-PZ5AY32C.js.map

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

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

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { RefAttributes } from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue, SectionProps, SelectValueProps } from 'react-aria-components';
+
+declare const AriaFieldError: (props: react_aria_components.FieldErrorProps & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaFieldErrorContext: react.Context<ContextValue<react_aria_components.FieldErrorProps & RefAttributes<HTMLElement>, HTMLElement>>;
+declare const AriaGroup: (props: react_aria_components.GroupProps & RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const AriaGroupContext: react.Context<ContextValue<react_aria_components.GroupProps & RefAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const AriaHeader: (props: react.HTMLAttributes<HTMLElement> & RefAttributes<object> & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaHeaderContext: react.Context<ContextValue<react.HTMLAttributes<HTMLElement> & RefAttributes<object>, HTMLElement>>;
+declare const AriaHeading: (props: react_aria_components.HeadingProps & RefAttributes<HTMLHeadingElement>) => react.ReactElement | null;
+declare const AriaHeadingContext: react.Context<ContextValue<react_aria_components.HeadingProps & RefAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+declare const AriaKeyboard: (props: react.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaKeyboardContext: react.Context<ContextValue<react.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>, HTMLElement>>;
+declare const AriaLabel: (props: react_aria_components.LabelProps & RefAttributes<HTMLLabelElement>) => react.ReactElement | null;
+declare const AriaLabelContext: react.Context<ContextValue<react_aria_components.LabelProps & RefAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+declare const AriaSeparator: (props: react_aria_components.SeparatorProps & RefAttributes<object> & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaSeparatorContext: react.Context<ContextValue<react_aria_components.SeparatorProps & RefAttributes<object>, HTMLElement>>;
+declare const AriaText: (props: react_aria_components.TextProps & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaTextContext: react.Context<ContextValue<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
+ */
+declare const AriaSectionContext: react.Context<ContextValue<SectionProps<object>, HTMLElement>>;
+declare const AriaSection: <T extends object>(props: SectionProps<T> & RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const AriaSelectValueContext: react.Context<ContextValue<SelectValueProps<object>, HTMLSpanElement>>;
+declare const AriaSelectValue: <T extends object>(props: SelectValueProps<T> & RefAttributes<HTMLSpanElement>) => react.ReactElement | null;
+
+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

@@ -0,0 +1,39 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef } from 'react';
+import { Section, SelectValue, FieldError, Group, Header, Heading, Keyboard, Label, Separator, Text } from 'react-aria-components';
+import { useContextProps } from '../../hooks/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 /* @__PURE__ */ jsx(Component, { ...props, ref });
+    }),
+    Context
+  };
+}
+var { Component: AriaFieldError, Context: AriaFieldErrorContext } = wrap(FieldError);
+var { Component: AriaGroup, Context: AriaGroupContext } = wrap(Group);
+var { Component: AriaHeader, Context: AriaHeaderContext } = wrap(Header);
+var { Component: AriaHeading, Context: AriaHeadingContext } = wrap(Heading);
+var { Component: AriaKeyboard, Context: AriaKeyboardContext } = wrap(Keyboard);
+var { Component: AriaLabel, Context: AriaLabelContext } = wrap(Label);
+var { Component: AriaSeparator, Context: AriaSeparatorContext } = wrap(Separator);
+var { Component: AriaText, Context: AriaTextContext } = wrap(Text);
+var AriaSectionContext = createContext(null);
+var AriaSection = forwardRef(function AriaSection2(props, ref) {
+  [props, ref] = useContextProps(props, ref, AriaSectionContext);
+  return /* @__PURE__ */ jsx(Section, { ...props, ref });
+});
+var AriaSelectValueContext = createContext(null);
+var AriaSelectValue = forwardRef(function AriaSelectValue2(props, ref) {
+  [props, ref] = useContextProps(props, ref, AriaSelectValueContext);
+  return /* @__PURE__ */ 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 };
+//# sourceMappingURL=aria.js.map
+//# sourceMappingURL=aria.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/aria/aria.tsx"],"names":["AriaSection","AriaSelectValue"],"mappings":";;;;;;AA8BA,SAAS,KACP,SACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,cAAkC,IAAI,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;AAElD,MAAA,uBAAQ,GAAA,CAAA,SAAA,EAAA,EAAW,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA;AAAA,KACxC,CAAA;AAAA,IACD;AAAA,GACF;AACF;AAEO,IAAM,EAAE,SAAW,EAAA,cAAA,EAAgB,SAAS,qBAAsB,EAAA,GACvE,KAAK,UAAU;AAEV,IAAM,EAAE,SAAW,EAAA,SAAA,EAAW,SAAS,gBAAiB,EAAA,GAAI,KAAK,KAAK;AAEtE,IAAM,EAAE,SAAW,EAAA,UAAA,EAAY,SAAS,iBAAkB,EAAA,GAC/D,KAAK,MAAM;AAEN,IAAM,EAAE,SAAW,EAAA,WAAA,EAAa,SAAS,kBAAmB,EAAA,GACjE,KAAK,OAAO;AAEP,IAAM,EAAE,SAAW,EAAA,YAAA,EAAc,SAAS,mBAAoB,EAAA,GACnE,KAAK,QAAQ;AAER,IAAM,EAAE,SAAW,EAAA,SAAA,EAAW,SAAS,gBAAiB,EAAA,GAAI,KAAK,KAAK;AAEtE,IAAM,EAAE,SAAW,EAAA,aAAA,EAAe,SAAS,oBAAqB,EAAA,GACrE,KAAK,SAAS;AAET,IAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,eAAgB,EAAA,GAAI,KAAK,IAAI;AAQ7D,IAAA,kBAAA,GACX,cAA+D,IAAI;AAE9D,IAAM,WAAc,GAAA,UAAA,CAAW,SAASA,YAAAA,CAC7C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,kBAAkB,CAAA;AAE7D,EAAA,uBAAQ,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA;AACvC,CAAC;AAEY,IAAA,sBAAA,GACX,cAAuE,IAAI;AAEtE,IAAM,eAAkB,GAAA,UAAA,CAAW,SAASC,gBAAAA,CAEjD,OAA4B,GAAoC,EAAA;AAChE,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,sBAAsB,CAAA;AAEjE,EAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA;AAC3C,CAAC","file":"aria.js","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"]}

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

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

package/dist/components/aria/index.js

@@ -0,0 +1,4 @@
+import '../../chunk-PZ5AY32C.js';
+export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext } from './aria.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,41 @@
+import { ButtonClassNames } from './types.js';
+import 'react-aria-components';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import 'react';
+import '../icon/types.js';
+
+declare const buttonContainer: string;
+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})`;
+};
+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})`;
+};
+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})`;
+};
+declare const buttonClassNames: ButtonClassNames;
+
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars };

package/dist/components/button/button.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/button/button.css.ts
+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 };
+//# sourceMappingURL=button.css.js.map
+//# sourceMappingURL=button.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,gBAAmB,GAAA,EAAC,SAAU,EAAA,6CAAA,EAA8C,QAAO,0CAA0C;AACjI,IAAI,kBAAkB,EAAC,aAAA,EAAc,gCAAiC,EAAA,cAAA,EAAe,mCAAkC,YAAa,EAAA,+BAAA,EAAgC,eAAgB,EAAA,kCAAA,EAAmC,YAAW,6BAA8B,EAAA,UAAA,EAAW,+BAA8B,MAAO,EAAA,yBAAA,EAA0B,OAAM,wBAAwB;AACxW,IAAI,eAAkB,GAAA;AAClB,IAAA,eAAA,GAAkB,EAAC,GAAA,EAAI,sBAAuB,EAAA,QAAA,EAAS,2BAA4B,EAAA,KAAA,EAAM,wBAAyB,EAAA,CAAA,EAAE,oBAAqB,EAAA,CAAA,EAAE,oBAAoB;AAC/J,IAAA,eAAA,GAAkB,EAAC,KAAM,EAAA,wBAAA,EAAyB,MAAK,uBAAwB,EAAA,OAAA,EAAQ,0BAA2B,EAAA,SAAA,EAAU,4BAA6B,EAAA,UAAA,EAAW,+BAA8B,SAAU,EAAA,4BAAA,EAA6B,cAAe,EAAA,iCAAA,EAAkC,SAAU,EAAA,4BAAA,EAA6B,WAAU,4BAA6B,EAAA,SAAA,EAAU,4BAA6B,EAAA,UAAA,EAAW,6BAA6B","file":"button.css.js","sourcesContent":["export var buttonClassNames = {container:'button_buttonClassNames_container__17k72zwp',button:'button_buttonClassNames_button__17k72zwq'};\nexport 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)'};\nexport var buttonContainer = 'button_buttonContainer__17k72zw0';\nexport var buttonSpaceVars = {gap:'var(--gap__17k72zw9)',minWidth:'var(--minWidth__17k72zwa)',width:'var(--width__17k72zwb)',x:'var(--x__17k72zwc)',y:'var(--y__17k72zwd)'};\nexport 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)'};"]}

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

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

package/dist/components/button/button.js

@@ -0,0 +1,104 @@
+import '../../chunk-PZ5AY32C.js';
+import { clsx } from 'clsx';
+import { noop } from '@accelint/core';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Button as Button$1, Link, ToggleButton as ToggleButton$1, Provider } from 'react-aria-components';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { bodies, surfaces } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { IconContext } from '../icon/index.js';
+import { buttonClassNames, buttonStateVars } from './button.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var noopToggleState = { isSelected: false, setSelected: noop, toggle: noop };
+var buttonSizes = ["xs", "sm", "md", "lg", "xl"];
+var 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) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ 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]
+  );
+}
+var ButtonContext = createContext(null);
+var Button = forwardRef(function Button2(props, ref) {
+  const buttonProps = useButton(props, ref, ButtonContext, "Button");
+  return /* @__PURE__ */ jsx(Button$1, { ...buttonProps });
+});
+var LinkButtonContext = createContext(null);
+var LinkButton = forwardRef(function LinkButton2(props, ref) {
+  const buttonProps = useButton(props, ref, LinkButtonContext, "LinkButton");
+  return /* @__PURE__ */ jsx(Link, { ...buttonProps });
+});
+var ToggleButtonContext = createContext(null);
+var ToggleButton = forwardRef(function ToggleButton2(props, ref) {
+  const buttonProps = useButton(
+    props,
+    ref,
+    ToggleButtonContext,
+    "ToggleButton"
+  );
+  return /* @__PURE__ */ jsx(ToggleButton$1, { ...buttonProps });
+});
+
+export { Button, ButtonContext, LinkButton, LinkButtonContext, ToggleButton, ToggleButtonContext };
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["Button","RACButton","LinkButton","ToggleButton","RACToggleButton"],"mappings":"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","file":"button.js","sourcesContent":["import { clsx } from 'clsx';\nimport { noop } from '@accelint/core';\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"]}

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

@@ -0,0 +1,8 @@
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars } from './button.css.js';
+export { Button, ButtonContext, LinkButton, LinkButtonContext, ToggleButton, ToggleButtonContext } from './button.js';
+export { ButtonClassNames, ButtonColors, ButtonMapping, ButtonProps, ButtonRenderProps, ButtonSizes, ButtonState, LinkButtonProps, ToggleButtonProps } from './types.js';
+import 'react';
+import 'react-aria-components';
+import '../../types/react-aria.js';
+import '../../types/props.js';
+import '../icon/types.js';

package/dist/components/button/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars } from './button.css.js';
+export { Button, ButtonContext, LinkButton, LinkButtonContext, ToggleButton, ToggleButtonContext } from './button.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/components/button/types.js

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

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

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

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

@@ -0,0 +1,44 @@
+import { CheckboxClassNames } from './types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/react-aria.js';
+import 'react';
+import '../icon/types.js';
+
+declare const checkboxContainer: string;
+declare const checkboxGroupContainer: string;
+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})`;
+};
+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})`;
+};
+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})`;
+};
+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})`;
+};
+declare const checkboxClassNames: CheckboxClassNames;
+
+export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars };

package/dist/components/checkbox/checkbox.css.js

@@ -0,0 +1,14 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/checkbox/checkbox.css.ts
+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 checkboxGroupContainer = "checkbox_checkboxGroupContainer__1rajo3p1";
+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, checkboxGroupContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars };
+//# sourceMappingURL=checkbox.css.js.map
+//# sourceMappingURL=checkbox.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.css.ts"],"names":[],"mappings":";;;AAAW,IAAA,kBAAA,GAAqB,EAAC,QAAA,EAAS,EAAC,SAAA,EAAU,4DAA2D,QAAS,EAAA,yDAAA,EAA0D,IAAK,EAAA,EAAC,SAAU,EAAA,+DAAA,IAAiE,KAAM,EAAA,gFAAA,EAAkF,EAAA,KAAA,EAAM,EAAC,SAAA,EAAU,yDAAwD,KAAM,EAAA,mDAAA,EAAoD,KAAM,EAAA,6EAAA,EAA8E;AACxiB,IAAA,iBAAA,GAAoB,EAAC,MAAO,EAAA,yBAAA,EAA0B,YAAW,6BAA8B,EAAA,KAAA,EAAM,wBAAyB,EAAA,SAAA,EAAU,4BAA4B;AACxK,IAAI,iBAAoB,GAAA;AACxB,IAAI,sBAAyB,GAAA;AACzB,IAAA,sBAAA,GAAyB,EAAC,WAAA,EAAY,8BAA+B,EAAA,UAAA,EAAW,6BAA8B,EAAA,UAAA,EAAW,6BAA8B,EAAA,UAAA,EAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA4B;AAC1O,IAAI,oBAAoB,EAAC,SAAA,EAAU,8BAA6B,GAAI,EAAA,sBAAA,EAAuB,YAAW,6BAA6B;AAC/H,IAAA,iBAAA,GAAoB,EAAC,UAAW,EAAA,6BAAA,EAA8B,YAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA6B,EAAA,cAAA,EAAe,iCAAkC,EAAA,SAAA,EAAU,8BAA6B,eAAgB,EAAA,kCAAA,EAAmC,SAAU,EAAA,4BAAA,EAA6B,SAAU,EAAA,4BAAA,EAA6B,YAAW,6BAA8B,EAAA,UAAA,EAAW,6BAA8B,EAAA,UAAA,EAAW,6BAA6B","file":"checkbox.css.js","sourcesContent":["export 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'}};\nexport var checkboxColorVars = {border:'var(--border__1rajo3p2)',background:'var(--background__1rajo3p3)',color:'var(--color__1rajo3p4)',indicator:'var(--indicator__1rajo3p5)'};\nexport var checkboxContainer = 'checkbox_checkboxContainer__1rajo3p0';\nexport var checkboxGroupContainer = 'checkbox_checkboxGroupContainer__1rajo3p1';\nexport var checkboxGroupStateVars = {orientation:'var(--orientation__1rajo3pk)',isDisabled:'var(--isDisabled__1rajo3pl)',isReadOnly:'var(--isReadOnly__1rajo3pm)',isRequired:'var(--isRequired__1rajo3pn)',isInvalid:'var(--isInvalid__1rajo3po)'};\nexport var checkboxSpaceVars = {dimension:'var(--dimension__1rajo3p6)',gap:'var(--gap__1rajo3p7)',elementGap:'var(--elementGap__1rajo3p8)'};\nexport 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)'};"]}

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

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