@accelint/design-system 0.1.0 → 0.1.1

package/dist/utils/props.js

@@ -0,0 +1,108 @@
+import { clsx } from 'clsx';
+import { mergeWith } from 'lodash';
+import { mergeProps as mergeProps$1 } from 'react-aria';
+import { composeRenderProps } from 'react-aria-components';
+import { z } from 'zod';
+
+function processClassNameRenderProps(value, renderProps, ...propsToMerge) {
+  if (!propsToMerge.length) {
+    return "";
+  }
+  const [props, ...rest] = propsToMerge;
+  return clsx(value, composeRenderProps(props?.className ?? "", (prev) => processClassNameRenderProps(prev, renderProps, ...rest))(renderProps));
+}
+function mergeRenderClassName(...propsToMerge) {
+  return composeRenderProps((renderProps) => renderProps.defaultClassName ?? "", (prev, renderProps) => processClassNameRenderProps(prev, renderProps, ...propsToMerge));
+}
+function mergeStaticClassName(...propsToMerge) {
+  return clsx(propsToMerge.reduce((acc, props) => {
+    if (typeof props?.className !== "string") {
+      return acc;
+    }
+    return [...acc, props.className];
+  }, []));
+}
+function mergeClassNameProps(...propsToMerge) {
+  const anyFunctions = propsToMerge.some((props) => typeof props?.className === "function");
+  const anyPrimitives = propsToMerge.some((props) => typeof props?.className === "string");
+  if (!(anyFunctions || anyPrimitives)) {
+    return void 0;
+  }
+  return anyFunctions ? mergeRenderClassName(...propsToMerge) : mergeStaticClassName(...propsToMerge);
+}
+const classNamesValidator = z.record(z.string(), z.union([z.string(), z.lazy(() => classNamesValidator)]));
+const propsValidator = z.object({
+  classNames: classNamesValidator
+});
+function mergeClassNamesProps(...propsToMerge) {
+  return propsToMerge.reduce((acc, props) => {
+    const result = propsValidator.safeParse(props);
+    if (result.success) {
+      return acc ? mergeWith(acc, result.data.classNames, (accValue, srcValue) => (!accValue || typeof accValue === "string") && (!srcValue || typeof srcValue === "string") ? clsx(accValue, srcValue) : void 0) : result.data.classNames;
+    }
+    return acc;
+  }, void 0);
+}
+function mergeClassNames(...classNamesToMerge) {
+  return mergeClassNamesProps(...classNamesToMerge.map((classNames) => ({ classNames })));
+}
+function processStyleRenderProps(value, renderProps, ...propsToMerge) {
+  if (!propsToMerge.length) {
+    return {};
+  }
+  const [props, ...rest] = propsToMerge;
+  return {
+    ...value,
+    ...composeRenderProps(props?.style ?? {}, (prev) => processStyleRenderProps(prev, renderProps, ...rest))(renderProps)
+  };
+}
+function mergeRenderStyle(...propsToMerge) {
+  return composeRenderProps((renderProps) => renderProps.defaultStyle ?? {}, (prev, renderProps) => processStyleRenderProps(prev, renderProps, ...propsToMerge));
+}
+function mergeStaticStyle(...propsToMerge) {
+  return propsToMerge.reduce((acc, props) => {
+    if (!props?.style) {
+      return acc;
+    }
+    return {
+      ...acc,
+      ...props.style
+    };
+  }, {});
+}
+function mergeStyleProps(...propsToMerge) {
+  const anyFunctions = propsToMerge.some((props) => typeof props?.style === "function");
+  const anyObjects = propsToMerge.some((props) => typeof props?.style === "object" && props.style != null);
+  if (!(anyFunctions || anyObjects)) {
+    return void 0;
+  }
+  return anyFunctions ? mergeRenderStyle(...propsToMerge) : mergeStaticStyle(...propsToMerge);
+}
+function mergeProps(...propsToMerge) {
+  const className = mergeClassNameProps(...propsToMerge);
+  const classNames = mergeClassNamesProps(...propsToMerge);
+  const style = mergeStyleProps(...propsToMerge);
+  return {
+    ...mergeProps$1(...propsToMerge),
+    ...className ? { className } : {},
+    ...classNames ? { classNames } : {},
+    ...style ? { style } : {}
+  };
+}
+function callRenderProps(value, values) {
+  if (typeof value === "function") {
+    return value(values);
+  }
+  return value;
+}
+function wrapRenderProps(value, inject) {
+  if (typeof value === "function") {
+    return (renderProps) => value({
+      ...renderProps,
+      ...inject
+    });
+  }
+  return value;
+}
+
+export { callRenderProps, mergeClassNames, mergeProps, wrapRenderProps };

package/dist/utils/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sources":["../../src/utils/props.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport { mergeWith } from 'lodash';\nimport type { CSSProperties } from 'react';\nimport { mergeProps as mergePropsWithoutStyles } from 'react-aria';\nimport { composeRenderProps } from 'react-aria-components';\nimport { z } from 'zod';\nimport type {\n  ClassNameRenderProps,\n  ClassNames,\n  RenderProps,\n  StylePropRenderProps,\n  AsType,\n} from '../types';\n\ntype Props<T extends object> = AsType<T> | null | undefined;\n\n/**\n * Recursively process merging of all class name render props\n */\nfunction processClassNameRenderProps<T extends RenderProps<object>>(\n  value: string,\n  renderProps: ClassNameRenderProps<object>,\n  ...propsToMerge: Props<T>[]\n): string {\n  if (!propsToMerge.length) {\n    return '';\n  }\n\n  const [props, ...rest] = propsToMerge;\n\n  return clsx(\n    value,\n    composeRenderProps<string, ClassNameRenderProps<object>, string>(\n      props?.className ?? '',\n      (prev) => processClassNameRenderProps(prev, renderProps, ...rest),\n    )(renderProps),\n  );\n}\n\n/**\n * Compose class name render props to be processed and merged\n */\nfunction mergeRenderClassName<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  return composeRenderProps<string, ClassNameRenderProps<object>, string>(\n    (renderProps) => renderProps.defaultClassName ?? '',\n    (prev, renderProps) =>\n      processClassNameRenderProps(prev, renderProps, ...propsToMerge),\n  );\n}\n\n/**\n * Merge static class names\n */\nfunction mergeStaticClassName<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  return clsx(\n    propsToMerge.reduce<string[]>((acc, props) => {\n      if (typeof props?.className !== 'string') {\n        return acc;\n      }\n\n      return [...acc, props.className];\n    }, []),\n  );\n}\n\n/**\n * Determine if a static or composed merge of class names is necesary based on the presence of functions\n */\nfunction mergeClassNameProps<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  const anyFunctions = propsToMerge.some(\n    (props) => typeof props?.className === 'function',\n  );\n\n  const anyPrimitives = propsToMerge.some(\n    (props) => typeof props?.className === 'string',\n  );\n\n  if (!(anyFunctions || anyPrimitives)) {\n    return undefined;\n  }\n\n  return anyFunctions\n    ? mergeRenderClassName(...propsToMerge)\n    : mergeStaticClassName(...propsToMerge);\n}\n\nconst classNamesValidator: z.ZodType<ClassNames> = z.record(\n  z.string(),\n  z.union([z.string(), z.lazy(() => classNamesValidator)]),\n);\n\nconst propsValidator = z.object({\n  classNames: classNamesValidator,\n});\n\n/**\n * Deep merges classNames objects within props\n */\nfunction mergeClassNamesProps<T extends object>(...propsToMerge: Props<T>[]) {\n  return propsToMerge.reduce<ClassNames | undefined>((acc, props) => {\n    const result = propsValidator.safeParse(props);\n\n    if (result.success) {\n      return acc\n        ? mergeWith(acc, result.data.classNames, (accValue, srcValue) =>\n            (!accValue || typeof accValue === 'string') &&\n            (!srcValue || typeof srcValue === 'string')\n              ? clsx(accValue, srcValue)\n              : undefined,\n          )\n        : result.data.classNames;\n    }\n\n    return acc;\n  }, undefined);\n}\n\n/**\n * Deep merges classNames objects by concatenating class values\n *\n * @example\n * mergeClassNames({ foo: 'foo' }, { foo: 'FOO', bar: 'bar' })\n * // returns { foo: 'foo FOO', bar: 'bar' }\n */\nexport function mergeClassNames<T extends ClassNames>(\n  ...classNamesToMerge: (T | null | undefined)[]\n) {\n  return mergeClassNamesProps(\n    ...classNamesToMerge.map((classNames) => ({ classNames })),\n  ) as T | undefined;\n}\n\n/**\n * Recursively process merging of all style render props\n */\nfunction processStyleRenderProps<T extends RenderProps<object>>(\n  value: CSSProperties,\n  renderProps: StylePropRenderProps<object>,\n  ...propsToMerge: Props<T>[]\n): CSSProperties {\n  if (!propsToMerge.length) {\n    return {};\n  }\n\n  const [props, ...rest] = propsToMerge;\n\n  return {\n    ...value,\n    ...composeRenderProps<\n      CSSProperties,\n      StylePropRenderProps<object>,\n      CSSProperties\n    >(props?.style ?? {}, (prev) =>\n      processStyleRenderProps(prev, renderProps, ...rest),\n    )(renderProps),\n  };\n}\n\n/**\n * Compose style render props to be processed and merged\n */\nfunction mergeRenderStyle<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  return composeRenderProps<\n    CSSProperties,\n    StylePropRenderProps<object>,\n    CSSProperties\n  >(\n    (renderProps) => renderProps.defaultStyle ?? {},\n    (prev, renderProps) =>\n      processStyleRenderProps(prev, renderProps, ...propsToMerge),\n  );\n}\n\n/**\n * Merge static styles\n */\nfunction mergeStaticStyle<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  return propsToMerge.reduce<CSSProperties>((acc, props) => {\n    if (!props?.style) {\n      return acc;\n    }\n\n    return {\n      ...acc,\n      ...props.style,\n    };\n  }, {});\n}\n\n/**\n * Determine if a static or composed merge of styles is necesary based on the presence of functions\n */\nfunction mergeStyleProps<T extends RenderProps<object>>(\n  ...propsToMerge: Props<T>[]\n) {\n  const anyFunctions = propsToMerge.some(\n    (props) => typeof props?.style === 'function',\n  );\n\n  const anyObjects = propsToMerge.some(\n    (props) => typeof props?.style === 'object' && props.style != null,\n  );\n\n  if (!(anyFunctions || anyObjects)) {\n    return undefined;\n  }\n\n  return anyFunctions\n    ? mergeRenderStyle(...propsToMerge)\n    : mergeStaticStyle(...propsToMerge);\n}\n\n/**\n * Extends the base margeProps functionality to also merge styles and handle class/style render props\n */\nexport function mergeProps<T extends object>(...propsToMerge: Props<T>[]): T {\n  const className = mergeClassNameProps(...propsToMerge);\n  const classNames = mergeClassNamesProps(...propsToMerge);\n  const style = mergeStyleProps(...propsToMerge);\n\n  return {\n    ...(mergePropsWithoutStyles(...propsToMerge) as T),\n    ...(className ? { className } : {}),\n    ...(classNames ? { classNames } : {}),\n    ...(style ? { style } : {}),\n  };\n}\n\n/**\n * A helper for not having to reimplement the type check for a renderProp value being a function or not everywhere\n */\nexport function callRenderProps<T extends object, R>(\n  value: R | ((renderProps: T) => R),\n  values: T,\n) {\n  if (typeof value === 'function') {\n    return (value as (renderProps: T) => R)(values);\n  }\n\n  return value;\n}\n\n/**\n * A helper function to pair with React Aria's render props. Typically\n * implemented with children, className and styles\n *\n * Allows for the injection of additional renderProps that a component\n * from React Aria may not already provide\n *\n * If the value isn't a renderProp function, then it is passed through unchanged\n */\nexport function wrapRenderProps<T extends object, U extends object, R>(\n  value: R | ((renderProps: T & U) => R),\n  inject?: U,\n) {\n  if (typeof value === 'function') {\n    return (renderProps: T) =>\n      (value as (renderProps: T & U) => R)({\n        ...renderProps,\n        ...inject,\n      } as T & U);\n  }\n\n  return value;\n}\n"],"names":["mergePropsWithoutStyles"],"mappings":"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"}

package/dist/utils/validators.d.ts

@@ -0,0 +1,49 @@
+import { z } from 'zod';
+import type { RGBA } from '../types';
+/**
+ * Test for any safe number that could represent a pixel value
+ */
+export declare const pixelValueAsNumberValidator: z.ZodNumber;
+/**
+ * Test for and capture numeric pixel values
+ * Will allow decimals and negative numbers
+ *
+ * Examples:
+ * 0 -> 0
+ * 1px -> 1
+ * 20.5px -> 20.5
+ */
+export declare const pixelValueAsStringValidator: z.ZodPipeline<z.ZodPipeline<z.ZodUnion<[z.ZodLiteral<"0">, z.ZodEffects<z.ZodString, string, string>]>, z.ZodNumber>, z.ZodNumber>;
+/**
+ * Test for an integer in the range of 0-255 as a representation of an RGB color channel value
+ */
+export declare const colorChannelAsNumberValidator: z.ZodNumber;
+/**
+ * Test for and convert CSS RGB color channel to numeric value (0-255)
+ */
+export declare const colorChannelAsStringValidator: z.ZodPipeline<z.ZodPipeline<z.ZodString, z.ZodNumber>, z.ZodNumber>;
+/**
+ * DeckGL treats alpha channel the same as color channels (0-255)
+ */
+export declare const alphaChannelAsNumberValidator: z.ZodNumber;
+/**
+ * Test for and convert CSS RGBA alpha channel to DeckGL numeric value
+ */
+export declare const alphaChannelAsStringValidator: z.ZodEffects<z.ZodPipeline<z.ZodString, z.ZodNumber>, number, string>;
+/**
+ * Test for and convert CSS RGB(A) values to numeric RGBA tuple
+ * Will only allow for rgb with 3 valid numbers (0-255){3, intergers only}
+ * Will only allow for rgba with 4 valid numbers (0-255){3, intergers only} + (0-1){1, decimals allowed}
+ * Will allow for whitespace spread throughout
+ *
+ * Examples:
+ * rgb( 0, 0, 0 ) -> [0, 0, 0, 255]
+ * rgba(203,117,98,0.4) -> [203, 117, 98, 102]
+ */
+export declare const rgbaAsStringValidator: z.ZodPipeline<z.ZodEffects<z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>, string[], string>, z.ZodTuple<[z.ZodPipeline<z.ZodPipeline<z.ZodString, z.ZodNumber>, z.ZodNumber>, z.ZodPipeline<z.ZodPipeline<z.ZodString, z.ZodNumber>, z.ZodNumber>, z.ZodPipeline<z.ZodPipeline<z.ZodString, z.ZodNumber>, z.ZodNumber>, z.ZodEffects<z.ZodPipeline<z.ZodString, z.ZodNumber>, number, string>], null>>;
+/**
+ * Test for numeric RGB(A) tuple
+ *
+ * Will return RGB as RGBA with 100% alpha channel
+ */
+export declare const rgbaAsTupleValidator: z.ZodUnion<[z.ZodEffects<z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>, RGBA, [number, number, number]>, z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber, z.ZodNumber], null>]>;

package/dist/utils/validators.js

@@ -0,0 +1,37 @@
+import { clamp } from 'lodash';
+import { z } from 'zod';
+
+const pixelValueAsNumberValidator = z.number().safe();
+const pixelValueAsStringValidator = z.union([
+  z.literal("0"),
+  z.string().endsWith("px").transform((value) => value.replace(/px$/, ""))
+]).pipe(z.coerce.number()).pipe(pixelValueAsNumberValidator);
+const colorChannelAsNumberValidator = z.number().safe().int().min(0).max(255);
+const colorChannelAsStringValidator = z.string().trim().pipe(z.coerce.number()).pipe(colorChannelAsNumberValidator);
+const alphaChannelAsNumberValidator = colorChannelAsNumberValidator;
+const alphaChannelAsStringValidator = z.string().trim().pipe(z.coerce.number().safe().min(0)).transform((value) => Math.round(clamp(value, 0, 1) * 255));
+const rgbaAsStringValidator = z.union([
+  z.string().startsWith("rgb(").endsWith(")").transform((value) => value.replace(/\)$/, ",1")),
+  // Add on 100% alpha channel
+  z.string().startsWith("rgba(").endsWith(")").transform((value) => value.replace(/\)$/, ""))
+]).transform((value) => value.replace(/^rgba?\(/, "").split(",")).pipe(z.tuple([
+  colorChannelAsStringValidator,
+  colorChannelAsStringValidator,
+  colorChannelAsStringValidator,
+  alphaChannelAsStringValidator
+]));
+const rgbaAsTupleValidator = z.union([
+  z.tuple([
+    colorChannelAsNumberValidator,
+    colorChannelAsNumberValidator,
+    colorChannelAsNumberValidator
+  ]).transform((rgb) => [...rgb, 255]),
+  z.tuple([
+    colorChannelAsNumberValidator,
+    colorChannelAsNumberValidator,
+    colorChannelAsNumberValidator,
+    alphaChannelAsNumberValidator
+  ])
+]);
+
+export { alphaChannelAsNumberValidator, alphaChannelAsStringValidator, colorChannelAsNumberValidator, colorChannelAsStringValidator, pixelValueAsNumberValidator, pixelValueAsStringValidator, rgbaAsStringValidator, rgbaAsTupleValidator };

package/dist/utils/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sources":["../../src/utils/validators.ts"],"sourcesContent":["import { clamp } from 'lodash';\nimport { z } from 'zod';\nimport type { RGBA } from '../types';\n\n/**\n * Test for any safe number that could represent a pixel value\n */\nexport const pixelValueAsNumberValidator = z.number().safe();\n\n/**\n * Test for and capture numeric pixel values\n * Will allow decimals and negative numbers\n *\n * Examples:\n * 0 -> 0\n * 1px -> 1\n * 20.5px -> 20.5\n */\nexport const pixelValueAsStringValidator = z\n  .union([\n    z.literal('0'),\n    z\n      .string()\n      .endsWith('px')\n      .transform((value) => value.replace(/px$/, '')),\n  ])\n  .pipe(z.coerce.number())\n  .pipe(pixelValueAsNumberValidator);\n\n/**\n * Test for an integer in the range of 0-255 as a representation of an RGB color channel value\n */\nexport const colorChannelAsNumberValidator = z\n  .number()\n  .safe()\n  .int()\n  .min(0)\n  .max(255);\n\n/**\n * Test for and convert CSS RGB color channel to numeric value (0-255)\n */\nexport const colorChannelAsStringValidator = z\n  .string()\n  .trim()\n  .pipe(z.coerce.number())\n  .pipe(colorChannelAsNumberValidator);\n\n/**\n * DeckGL treats alpha channel the same as color channels (0-255)\n */\nexport const alphaChannelAsNumberValidator = colorChannelAsNumberValidator;\n\n/**\n * Test for and convert CSS RGBA alpha channel to DeckGL numeric value\n */\nexport const alphaChannelAsStringValidator = z\n  .string()\n  .trim()\n  .pipe(z.coerce.number().safe().min(0)) // CSS allows for values greater than 1\n  .transform((value) => Math.round(clamp(value, 0, 1) * 255));\n\n/**\n * Test for and convert CSS RGB(A) values to numeric RGBA tuple\n * Will only allow for rgb with 3 valid numbers (0-255){3, intergers only}\n * Will only allow for rgba with 4 valid numbers (0-255){3, intergers only} + (0-1){1, decimals allowed}\n * Will allow for whitespace spread throughout\n *\n * Examples:\n * rgb( 0, 0, 0 ) -> [0, 0, 0, 255]\n * rgba(203,117,98,0.4) -> [203, 117, 98, 102]\n */\nexport const rgbaAsStringValidator = z\n  .union([\n    z\n      .string()\n      .startsWith('rgb(')\n      .endsWith(')')\n      .transform((value) => value.replace(/\\)$/, ',1')), // Add on 100% alpha channel\n    z\n      .string()\n      .startsWith('rgba(')\n      .endsWith(')')\n      .transform((value) => value.replace(/\\)$/, '')),\n  ])\n  .transform((value) => value.replace(/^rgba?\\(/, '').split(','))\n  .pipe(\n    z.tuple([\n      colorChannelAsStringValidator,\n      colorChannelAsStringValidator,\n      colorChannelAsStringValidator,\n      alphaChannelAsStringValidator,\n    ]),\n  );\n\n/**\n * Test for numeric RGB(A) tuple\n *\n * Will return RGB as RGBA with 100% alpha channel\n */\nexport const rgbaAsTupleValidator = z.union([\n  z\n    .tuple([\n      colorChannelAsNumberValidator,\n      colorChannelAsNumberValidator,\n      colorChannelAsNumberValidator,\n    ])\n    .transform<RGBA>((rgb) => [...rgb, 255]),\n  z.tuple([\n    colorChannelAsNumberValidator,\n    colorChannelAsNumberValidator,\n    colorChannelAsNumberValidator,\n    alphaChannelAsNumberValidator,\n  ]),\n]);\n"],"names":[],"mappings":";;;;AAOO,MAAM,2BAA8B,GAAA,CAAA,CAAE,MAAO,EAAA,CAAE,IAAK,GAAA;AAW9C,MAAA,2BAAA,GAA8B,EACxC,KAAM,CAAA;AAAA,EACL,CAAA,CAAE,QAAQ,GAAG,CAAA;AAAA,EACb,CACG,CAAA,MAAA,EACA,CAAA,QAAA,CAAS,IAAI,CAAA,CACb,SAAU,CAAA,CAAC,KAAU,KAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,EAAO,EAAE,CAAC,CAAA;AAClD,CAAC,CAAA,CACA,KAAK,CAAE,CAAA,MAAA,CAAO,QAAQ,CAAA,CACtB,KAAK,2BAA2B,EAAA;AAK5B,MAAM,6BAAgC,GAAA,CAAA,CAC1C,MAAO,EAAA,CACP,IAAK,EAAA,CACL,GAAI,EAAA,CACJ,GAAI,CAAA,CAAC,CACL,CAAA,GAAA,CAAI,GAAG,EAAA;AAKH,MAAM,6BAAgC,GAAA,CAAA,CAC1C,MAAO,EAAA,CACP,IAAK,EAAA,CACL,IAAK,CAAA,CAAA,CAAE,MAAO,CAAA,MAAA,EAAQ,CAAA,CACtB,KAAK,6BAA6B,EAAA;AAK9B,MAAM,6BAAgC,GAAA,8BAAA;AAKtC,MAAM,6BAAgC,GAAA,CAAA,CAC1C,MAAO,EAAA,CACP,IAAK,EAAA,CACL,IAAK,CAAA,CAAA,CAAE,MAAO,CAAA,MAAA,EAAS,CAAA,IAAA,EAAO,CAAA,GAAA,CAAI,CAAC,CAAC,CACpC,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,IAAK,CAAA,KAAA,CAAM,KAAM,CAAA,KAAA,EAAO,CAAG,EAAA,CAAC,CAAI,GAAA,GAAG,CAAC,EAAA;AAY/C,MAAA,qBAAA,GAAwB,EAClC,KAAM,CAAA;AAAA,EACL,EACG,MAAO,EAAA,CACP,UAAW,CAAA,MAAM,EACjB,QAAS,CAAA,GAAG,CACZ,CAAA,SAAA,CAAU,CAAC,KAAU,KAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,EAAO,IAAI,CAAC,CAAA;AAAA;AAAA,EAClD,EACG,MAAO,EAAA,CACP,UAAW,CAAA,OAAO,EAClB,QAAS,CAAA,GAAG,CACZ,CAAA,SAAA,CAAU,CAAC,KAAU,KAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,EAAO,EAAE,CAAC,CAAA;AAClD,CAAC,CACA,CAAA,SAAA,CAAU,CAAC,KAAA,KAAU,KAAM,CAAA,OAAA,CAAQ,UAAY,EAAA,EAAE,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAC7D,CAAA,IAAA;AAAA,EACC,EAAE,KAAM,CAAA;AAAA,IACN,6BAAA;AAAA,IACA,6BAAA;AAAA,IACA,6BAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA;AACH,EAAA;AAOW,MAAA,oBAAA,GAAuB,EAAE,KAAM,CAAA;AAAA,EAC1C,EACG,KAAM,CAAA;AAAA,IACL,6BAAA;AAAA,IACA,6BAAA;AAAA,IACA,6BAAA;AAAA,GACD,EACA,SAAgB,CAAA,CAAC,QAAQ,CAAC,GAAG,GAAK,EAAA,GAAG,CAAC,CAAA;AAAA,EACzC,EAAE,KAAM,CAAA;AAAA,IACN,6BAAA;AAAA,IACA,6BAAA;AAAA,IACA,6BAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}

package/dist/vanilla.d.ts

@@ -0,0 +1,27 @@
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars } from './components/button/button.vanilla.js';
+export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars } from './components/checkbox/checkbox.vanilla.js';
+export { chipClassNames, chipColorVars, chipContainer, chipSpaceVars, chipStateVars } from './components/chip/chip.vanilla.js';
+export { comboBoxClassNames, comboBoxColorVars, comboBoxContainer, comboBoxSpaceVars, comboBoxStateVars } from './components/combo-box/combo-box.vanilla.js';
+export { dialogClassNames, dialogColorVars, dialogContainer, dialogSpaceVars, dialogStateVars } from './components/dialog/dialog.vanilla.js';
+export { drawerAnimationVars, drawerClassNames, drawerColorVars, drawerContainer, drawerDialogStateVars, drawerSpaceVars, drawerStateVars } from './components/drawer/drawer.vanilla.js';
+export { groupClassNames, groupContainer, groupSpaceVars, groupStateVars } from './components/group/group.vanilla.js';
+export { iconClassNames, iconColorVars, iconContainer, iconSpaceVars, iconStateVars } from './components/icon/icon.vanilla.js';
+export { inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars } from './components/input/input.vanilla.js';
+export { menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars } from './components/menu/menu.vanilla.js';
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars } from './components/options/options.vanilla.js';
+export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars } from './components/picker/picker.vanilla.js';
+export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars } from './components/popover/popover.vanilla.js';
+export { queryBuilderClassNames, queryBuilderColorVars, queryBuilderContainers, queryBuilderGroupStateVars, queryBuilderRuleStateVars, queryBuilderSpaceVars, queryBuilderStateVars } from './components/query-builder/query-builder.vanilla.js';
+export { radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars } from './components/radio/radio.vanilla.js';
+export { searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars } from './components/search-field/search-field.vanilla.js';
+export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './components/select/select.vanilla.js';
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './components/switch/switch.vanilla.js';
+export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './components/tabs/tabs.vanilla.js';
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './components/textarea/textarea.vanilla.js';
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars } from './components/tooltip/tooltip.vanilla.js';
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './components/tree/tree.vanilla.js';
+export { layers } from './styles/layers.vanilla.js';
+export { surfaces } from './styles/surfaces.vanilla.js';
+export { defaultElevationVarValues, defaultElevations, defaultFocus, defaultFocusVarValues, defaultGenericColorVarValues, defaultGenericColors, defaultRadius, defaultRadiusVarValues, defaultSemanticColorVarValues, defaultSemanticColors, defaultSizes, defaultSizesVarValues, defaultSpace, defaultSpaceVarValues, defaultTypography, defaultTypographyVarValues, defaultZIndex, defaultZIndexVarValues, elevationVars, focusOutlineStyle, focusVars, genericColorVars, radiusVars, semanticColorVars, sizeVars, spaceVars, typographyVars, zIndexVars } from './styles/theme.vanilla.js';
+export { bodies, families, headings, inputs, label } from './styles/typography.vanilla.js';
+export { applyThemeVars, assignPartialVars, computeContract, containerQueries, containerQuery, inlineVars, unwrapCssVar } from './utils/css.js';

package/dist/vanilla.js

@@ -0,0 +1,27 @@
+export { buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars } from './components/button/button.vanilla.js';
+export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars } from './components/checkbox/checkbox.vanilla.js';
+export { chipClassNames, chipColorVars, chipContainer, chipSpaceVars, chipStateVars } from './components/chip/chip.vanilla.js';
+export { comboBoxClassNames, comboBoxColorVars, comboBoxContainer, comboBoxSpaceVars, comboBoxStateVars } from './components/combo-box/combo-box.vanilla.js';
+export { dialogClassNames, dialogColorVars, dialogContainer, dialogSpaceVars, dialogStateVars } from './components/dialog/dialog.vanilla.js';
+export { drawerAnimationVars, drawerClassNames, drawerColorVars, drawerContainer, drawerDialogStateVars, drawerSpaceVars, drawerStateVars } from './components/drawer/drawer.vanilla.js';
+export { groupClassNames, groupContainer, groupSpaceVars, groupStateVars } from './components/group/group.vanilla.js';
+export { iconClassNames, iconColorVars, iconContainer, iconSpaceVars, iconStateVars } from './components/icon/icon.vanilla.js';
+export { inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars } from './components/input/input.vanilla.js';
+export { menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars } from './components/menu/menu.vanilla.js';
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars } from './components/options/options.vanilla.js';
+export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars } from './components/picker/picker.vanilla.js';
+export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars } from './components/popover/popover.vanilla.js';
+export { queryBuilderClassNames, queryBuilderColorVars, queryBuilderContainers, queryBuilderGroupStateVars, queryBuilderRuleStateVars, queryBuilderSpaceVars, queryBuilderStateVars } from './components/query-builder/query-builder.vanilla.js';
+export { radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars } from './components/radio/radio.vanilla.js';
+export { searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars } from './components/search-field/search-field.vanilla.js';
+export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './components/select/select.vanilla.js';
+export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './components/switch/switch.vanilla.js';
+export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './components/tabs/tabs.vanilla.js';
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './components/textarea/textarea.vanilla.js';
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars } from './components/tooltip/tooltip.vanilla.js';
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './components/tree/tree.vanilla.js';
+export { layers } from './styles/layers.vanilla.js';
+export { surfaces } from './styles/surfaces.vanilla.js';
+export { defaultElevationVarValues, defaultElevations, defaultFocus, defaultFocusVarValues, defaultGenericColorVarValues, defaultGenericColors, defaultRadius, defaultRadiusVarValues, defaultSemanticColorVarValues, defaultSemanticColors, defaultSizes, defaultSizesVarValues, defaultSpace, defaultSpaceVarValues, defaultTypography, defaultTypographyVarValues, defaultZIndex, defaultZIndexVarValues, elevationVars, focusOutlineStyle, focusVars, genericColorVars, radiusVars, semanticColorVars, sizeVars, spaceVars, typographyVars, zIndexVars } from './styles/theme.vanilla.js';
+export { bodies, families, headings, inputs, label } from './styles/typography.vanilla.js';
+export { applyThemeVars, assignPartialVars, computeContract, containerQueries, containerQuery, inlineVars, unwrapCssVar } from './utils/css.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelint/design-system",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "license": "Apache-2.0",
   "type": "module",
@@ -44,9 +44,9 @@
     "rollup-plugin-typescript-paths": "^1.5.0",
     "vite": "^5.4.9",
     "vitest": "^2.1.3",
-    "@accelint/biome-config": "0.1.0",
-    "@accelint/typescript-config": "0.1.0",
-    "@accelint/vitest-config": "0.1.0"
+    "@accelint/biome-config": "0.1.1",
+    "@accelint/typescript-config": "0.1.1",
+    "@accelint/vitest-config": "0.1.1"
   },
   "dependencies": {
     "@react-aria/collections": "3.0.0-alpha.5",
@@ -67,7 +67,7 @@
     "type-fest": "^4.26.1",
     "typescript": "^5.6.3",
     "zod": "^3.23.8",
-    "@accelint/converters": "0.1.0"
+    "@accelint/converters": "0.1.1"
   },
   "$schema": "https://json.schemastore.org/package",
   "author": "https://hypergiant.com",