@accelint/design-system 0.3.2 → 0.4.0

package/dist/types/deckgl.d.ts

@@ -0,0 +1,3 @@
+type RGBA = [number, number, number, number] & number[];
+
+export type { RGBA };

package/dist/types/deckgl.js

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

package/dist/types/deckgl.js.map

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

package/dist/types/generic.d.ts

@@ -0,0 +1,5 @@
+type AsType<T> = T extends object ? {
+    [Key in keyof T]: T[Key];
+} : T;
+
+export type { AsType };

package/dist/types/generic.js

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

package/dist/types/generic.js.map

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

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+export { RGBA } from './deckgl.js';
+export { AsType } from './generic.js';
+export { ClassNames, OmitProtectedProps } from './props.js';
+export { ChildrenRenderProps, ClassNameRenderProps, ProviderValue, ProviderValues, RenderProps, RenderPropsChildren, RenderPropsClassName, RenderPropsStyle, StylePropRenderProps, StyleRenderProps } from './react-aria.js';
+export { TreeActions, TreeGroupNode, TreeItemNode, TreeNode, TreeNodes, UseTreeOptions, UseTreeResult } from './use-tree.js';
+export { Contract, CssVarFunction, MapLeafNodes, PartialMapLeafNodes, Primitive } from './vanilla-extract.js';
+import 'react';
+import '@react-types/shared';
+import '@react-stately/data';
+import '@vanilla-extract/css';

package/dist/types/index.js

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

package/dist/types/index.js.map

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

package/dist/types/props.d.ts

@@ -0,0 +1,6 @@
+type ClassNames = {
+    [key: string]: string | ClassNames;
+};
+type OmitProtectedProps<T extends object> = Omit<Partial<T>, 'key' | 'ref' | 'id' | 'children' | 'className' | 'classNames' | 'style'>;
+
+export type { ClassNames, OmitProtectedProps };

package/dist/types/props.js

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

package/dist/types/props.js.map

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

package/dist/types/react-aria.d.ts

@@ -0,0 +1,94 @@
+import { CSSProperties, ReactNode, Context } from 'react';
+
+/**
+ * Re-export due to not being exported by library
+ */
+type ClassNameRenderProps<T extends object> = T & {
+    defaultClassName?: string;
+};
+type RenderPropsClassName<T extends object> = string | ((values: ClassNameRenderProps<T>) => string);
+type StylePropRenderProps<T extends object> = T & {
+    defaultStyle?: CSSProperties;
+};
+type RenderPropsStyle<T extends object> = CSSProperties | ((values: StylePropRenderProps<T>) => CSSProperties);
+type ChildrenRenderProps<T extends object> = T & {
+    defaultChildren?: ReactNode;
+};
+type RenderPropsChildren<T extends object> = ReactNode | ((values: ChildrenRenderProps<T>) => ReactNode);
+type StyleRenderProps<T extends object> = {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
+    className?: RenderPropsClassName<T>;
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
+    style?: RenderPropsStyle<T>;
+};
+type RenderProps<T extends object> = StyleRenderProps<T> & {
+    /** The children of the component. A function may be provided to alter the children based on component state. */
+    children?: RenderPropsChildren<T>;
+};
+type ProviderValue<T> = [Context<T>, T];
+type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> = [ProviderValue<A>] | [ProviderValue<A>, ProviderValue<B>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>,
+    ProviderValue<G>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>,
+    ProviderValue<G>,
+    ProviderValue<H>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>,
+    ProviderValue<G>,
+    ProviderValue<H>,
+    ProviderValue<I>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>,
+    ProviderValue<G>,
+    ProviderValue<H>,
+    ProviderValue<I>,
+    ProviderValue<J>
+] | [
+    ProviderValue<A>,
+    ProviderValue<B>,
+    ProviderValue<C>,
+    ProviderValue<D>,
+    ProviderValue<E>,
+    ProviderValue<F>,
+    ProviderValue<G>,
+    ProviderValue<H>,
+    ProviderValue<I>,
+    ProviderValue<J>,
+    ProviderValue<K>
+];
+
+export type { ChildrenRenderProps, ClassNameRenderProps, ProviderValue, ProviderValues, RenderProps, RenderPropsChildren, RenderPropsClassName, RenderPropsStyle, StylePropRenderProps, StyleRenderProps };

package/dist/types/react-aria.js

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

package/dist/types/react-aria.js.map

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

package/dist/types/react.d.d.ts

@@ -0,0 +1,6 @@
+declare module 'react' {
+  // Redeclare to support generics being passed through component to props
+  function forwardRef<T, P = object>(
+    render: (props: P, ref: ForwardedRef<T>) => ReactElement | null,
+  ): (props: P & RefAttributes<T>) => ReactElement | null;
+}

package/dist/types/react.d.js

@@ -0,0 +1,3 @@
+import 'react';
+//# sourceMappingURL=react.d.js.map
+//# sourceMappingURL=react.d.js.map

package/dist/types/react.d.js.map

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

package/dist/types/use-tree.d.ts

@@ -0,0 +1,55 @@
+import { Key, Selection, SelectionMode } from '@react-types/shared';
+import { TreeData } from '@react-stately/data';
+
+type TreeItemNode<T> = {
+    id: Key;
+    label: string;
+    type?: string;
+    value?: T;
+    isViewable?: boolean;
+    isVisible?: boolean;
+};
+type TreeGroupNode<T> = TreeItemNode<T> & {
+    nodes: TreeNodes<T>[];
+    types?: string[];
+    isExpanded?: boolean;
+};
+type TreeNodes<T> = TreeGroupNode<T> | TreeItemNode<T>;
+type TreeNode<T, N extends TreeNodes<T> = TreeNodes<T>> = {
+    key: Key;
+    parentKey: Key;
+    value: N;
+    children: TreeNode<T, N>[];
+};
+type TreeActions<T> = Omit<TreeData<TreeNodes<T>>, 'items' | 'selectedKeys' | 'update'> & {
+    revertIsExpanded: () => void;
+    toggleIsExpanded: (selection?: Selection, isExpanded?: boolean, isRevertable?: boolean) => void;
+    toggleIsSelected: (selection?: Selection, isSelected?: boolean) => void;
+    toggleIsViewable: (selection?: Selection, isViewable?: boolean) => void;
+    update: (key: Key, node: Partial<TreeNodes<T>>) => void;
+};
+type UseTreeOptions<T> = {
+    allowsExpansion?: boolean;
+    allowsVisibility?: boolean;
+    nodes: TreeNodes<T>[];
+    selectionMode?: SelectionMode;
+    onSelectionChange?: (keys: Selection) => void;
+    /**
+     * Due to being triggered during the render cycle, this event
+     * handler should not be tied to any state change updates
+     */
+    onUpdate?: (nodes: TreeNodes<T>[]) => void;
+};
+type UseTreeResult<T> = Required<Omit<UseTreeOptions<T>, 'nodes' | 'onSelectionChange' | 'onUpdate'>> & Pick<TreeData<TreeNodes<T>>, 'selectedKeys'> & {
+    lookup: Record<Key, TreeNode<T>>;
+    tree: TreeNode<T>;
+    /**
+     * DO NOT DESTRUCTURE THIS PROPERTY
+     *
+     * The underlying useTreeData hook relies on "this" within certain methods
+     * and destructuring the actions will cause errors to be thrown
+     */
+    actions: TreeActions<T>;
+};
+
+export type { TreeActions, TreeGroupNode, TreeItemNode, TreeNode, TreeNodes, UseTreeOptions, UseTreeResult };

package/dist/types/use-tree.js

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

package/dist/types/use-tree.js.map

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

package/dist/types/vanilla-extract.d.ts

@@ -0,0 +1,18 @@
+import { createVar } from '@vanilla-extract/css';
+
+/**
+ * Re-export due to not being exported by library
+ */
+type CssVarFunction = ReturnType<typeof createVar>;
+type Contract = {
+    [key: string]: CssVarFunction | null | Contract;
+};
+type Primitive = string | boolean | number | null | undefined;
+type MapLeafNodes<Obj, LeafType> = {
+    [Prop in keyof Obj]: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<string | number, unknown> ? MapLeafNodes<Obj[Prop], LeafType> : never;
+};
+type PartialMapLeafNodes<Obj, LeafType> = {
+    [Prop in keyof Obj]?: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<string | number, unknown> ? PartialMapLeafNodes<Obj[Prop], LeafType> : never;
+};
+
+export type { Contract, CssVarFunction, MapLeafNodes, PartialMapLeafNodes, Primitive };

package/dist/types/vanilla-extract.js

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

package/dist/types/vanilla-extract.js.map

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

package/dist/utils/css.d.ts

@@ -0,0 +1,142 @@
+import { StyleRule, GlobalStyleRule } from '@vanilla-extract/css';
+import { RGBA } from '../types/deckgl.js';
+import { Contract, PartialMapLeafNodes, Primitive, MapLeafNodes, CssVarFunction } from '../types/vanilla-extract.js';
+
+/**
+ * Parse out CSS var name from CSS var implementation
+ *
+ * @example
+ * unwrapCssVar('var(--foo)')
+ * // returns '--foo'
+ *
+ * @example
+ * unwrapCssVar('var(--foo, blue)')
+ * // returns '--foo'
+ *
+ * @example
+ * unwrapCssVar('var(--foo, var(--bar))')
+ * // returns '--foo'
+ */
+declare function unwrapCssVar(cssVar: string): string;
+type FulfilledContract<T> = MapLeafNodes<T, null | number | string | RGBA>;
+/**
+ * Convert contract to nested object of identical shape with computed CSS values
+ * Pixel values are converted to numbers
+ * RGB(A) values are converted to DeckGL compatible tuples
+ * All other values are left unconverted
+ */
+declare function computeContract<T extends Contract>(contract: T, css: CSSStyleDeclaration): FulfilledContract<T>;
+/**
+ * Convert potentially nested contract and values pair into flattened CSS var record
+ * The contract provides a lookup for CSS vars
+ * The values are expected to partially match the contract shapeForm
+ */
+declare function reduceContract<T extends Contract, U>(contract: T, values: PartialMapLeafNodes<T, U>): Record<`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`, U>;
+/**
+ * Reduce contract and values into Vanilla Extract friendly CSS vars
+ */
+declare function assignPartialVars<T extends Contract>(contract: T, values: PartialMapLeafNodes<T, Primitive>): {
+    [k: string]: string;
+};
+type CssVarValues = {
+    [key: string]: CssVarValues | Primitive;
+};
+type CssVarValueOptions<T extends object> = {
+    [P in keyof T]?: T[P] extends object ? CssVarValueOptions<T[P]> : T[P] | T[P][];
+};
+type Operators = 'and' | 'or';
+type ContainerQueryOptions = {
+    container?: string;
+    operator?: Operators;
+    maxHeight?: string;
+    minHeight?: string;
+    maxWidth?: string;
+    minWidth?: string;
+};
+type ContainerQueryValues<T extends CssVarValues> = CssVarValueOptions<T> & ContainerQueryOptions;
+type MultiContainerQuery<T extends CssVarValues> = {
+    operator?: Operators;
+    groups: ContainerQueryValues<T>[];
+};
+/**
+ * Create simple or complex container queries with and/or operators.
+ *
+ * To provide type safety and ease of use, this function accepts a generic and a contract
+ * The generic type defines the possible values for the parameters defined within the contract
+ *
+ * Ex: containerQuery<{ foo: boolean }>({ foo: 'var(--foo)' }, { foo: true })
+ *
+ * By providing the type constraint and contract, the query parameters will have intellisense
+ * on which parameters exist and what their possible values can be
+ *
+ * @example
+ * containerQuery(contract, { a: true })
+ * // returns (a: true)
+ *
+ * @example
+ * containerQuery(contract, { a: true, b: true })
+ * // returns (a: true) and (b: true)
+ *
+ * @example
+ * containerQuery(contract, { operator: 'or', a: true, b: true })
+ * // returns (a: true) or (b: true)
+ *
+ * @example
+ * containerQuery(contract, { groups: [{ a: true }, { b: true }] })
+ * // returns (a: true) or (b: true)
+ *
+ * @example
+ * containerQuery(contract, { a: ['foo', 'bar'] })
+ * // returns (a: 'foo') or (a: 'bar')
+ *
+ * @example
+ * containerQuery(contract, { a: ['foo', 'bar'], b: true })
+ * // returns ((a: 'foo') or (a: 'bar')) and (b: true)
+ *
+ * @example
+ * containerQuery(contract, { operator: 'or', a: ['foo', 'bar'], b: true })
+ * // returns ((a: 'foo') or (a: 'bar')) or (b: true)
+ *
+ * @example
+ * containerQuery(contract, { groups: [{ a: true, b: true }, { c: true, d: true }] })
+ * // returns ((a: true) and (b: true)) or ((c: true) and (d: true))
+ *
+ * @example
+ * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { c: true, d: true }] })
+ * // returns ((a: true) or (b: true)) and ((c: true) and (d: true))
+ *
+ * @example
+ * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { operator: 'or', c: true, d: true }] })
+ * // returns ((a: true) or (b: true)) and ((c: true) or (d: true))
+ */
+declare function containerQuery<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, query: ContainerQueryValues<T> | MultiContainerQuery<T>): string;
+type ContainerStyle = Exclude<StyleRule['@container'], undefined>[string];
+type ContainerQuery<T extends CssVarValues> = {
+    query: ContainerQueryValues<T> | MultiContainerQuery<T>;
+};
+type ContainerQueries<T extends CssVarValues> = ContainerStyle & ContainerQuery<T>;
+type GlobalContainerStyle = Exclude<GlobalStyleRule['@container'], undefined>[string];
+type GlobalContainerQueries<T extends CssVarValues> = GlobalContainerStyle & ContainerQuery<T>;
+/**
+ * Bulk container query creation based on the same contract
+ */
+declare function containerQueries<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, ...styles: ContainerQueries<T>[]): Record<string, ContainerStyle>;
+declare function containerQueries<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, ...styles: GlobalContainerQueries<T>[]): Record<string, GlobalContainerStyle>;
+type VarsOnlyContainerQuery<T extends CssVarValues> = Required<Pick<ContainerQueries<T>, 'query' | 'vars'>>;
+type QueryOptionalVarsOnlyContainerQuery<T extends CssVarValues> = Partial<Pick<VarsOnlyContainerQuery<T>, 'query'>> & Pick<VarsOnlyContainerQuery<T>, 'vars'>;
+/**
+ * Helper for establishing global theme variables with the restriction that
+ * only variables may be set (and are required). All other styles must be
+ * established using alternative utils
+ *
+ * The first style rule has an optional query. If the query is missing, the vars
+ * are set outside of a container query
+ */
+declare function applyThemeVars<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, styles: [QueryOptionalVarsOnlyContainerQuery<T>, ...VarsOnlyContainerQuery<T>[]] | VarsOnlyContainerQuery<T>[], layer?: string): StyleRule;
+/**
+ * Runtime creation of inline style CSS vars that enable CSS container queries
+ */
+declare function inlineVars(vars: Record<string, Primitive>): Record<string, string>;
+declare function inlineVars<T extends Contract>(contract: T, values: PartialMapLeafNodes<T, Primitive>): Record<string, string>;
+
+export { applyThemeVars, assignPartialVars, computeContract, containerQueries, containerQuery, inlineVars, reduceContract, unwrapCssVar };

package/dist/utils/css.js

@@ -0,0 +1,165 @@
+import '../chunk-PZ5AY32C.js';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import kebabCase from 'lodash/kebabCase';
+import { layers } from '../styles/index.js';
+import { pixelValueAsStringValidator, rgbaAsStringValidator } from './validators.js';
+
+function unwrapCssVar(cssVar) {
+  return cssVar.replace(/^var\((--[\w-]+)[^\w-]+.*/i, "$1");
+}
+function computeContract(contract, css) {
+  return Object.entries(contract).reduce(
+    (acc, [key, cssVarOrContract]) => {
+      if (cssVarOrContract == null) {
+        acc[key] = null;
+        return acc;
+      }
+      if (typeof cssVarOrContract === "object") {
+        acc[key] = computeContract(cssVarOrContract, css);
+        return acc;
+      }
+      const cssVar = unwrapCssVar(cssVarOrContract);
+      const value = css.getPropertyValue(cssVar);
+      const pixel = pixelValueAsStringValidator.safeParse(value);
+      if (pixel.success) {
+        acc[key] = pixel.data;
+        return acc;
+      }
+      const rgba = rgbaAsStringValidator.safeParse(value);
+      if (rgba.success) {
+        acc[key] = rgba.data;
+        return acc;
+      }
+      acc[key] = value ?? null;
+      return acc;
+    },
+    {}
+  );
+}
+function reduceContract(contract, values) {
+  const nodes = [
+    { contract, values }
+  ];
+  const vars = {};
+  for (let node of nodes) {
+    Object.entries(node.values).forEach(([key, value]) => {
+      const cssVarOrSubContract = node.contract[key];
+      if (cssVarOrSubContract == null || value == null) {
+        return;
+      }
+      if (typeof cssVarOrSubContract === "string" && (typeof value !== "object" || Array.isArray(value))) {
+        vars[cssVarOrSubContract] = value;
+        return;
+      }
+      if (typeof cssVarOrSubContract === "object" && typeof value === "object") {
+        nodes.push({ contract: cssVarOrSubContract, values: value });
+      }
+    });
+  }
+  return vars;
+}
+function assignPartialVars(contract, values) {
+  return Object.fromEntries(
+    Object.entries(reduceContract(contract, values)).map(([key, value]) => [
+      key,
+      `${value}`
+    ])
+  );
+}
+function processConditions(contract, values) {
+  return Object.entries(
+    reduceContract(
+      {
+        ...contract,
+        maxHeight: "maxHeight",
+        // NOTE: Passthrough these values not as CSS vars
+        minHeight: "minHeight",
+        maxWidth: "maxWidth",
+        minWidth: "minWidth"
+      },
+      values
+    )
+  ).reduce((acc, [key, value]) => {
+    if (key === "container" || key === "operator" || value == null) {
+      return acc;
+    }
+    const isStyle = !/^(?:max|min)(?:Height|Width)$/.test(key);
+    const prefix = isStyle ? "style" : "";
+    const prop = isStyle ? unwrapCssVar(key) : kebabCase(key);
+    if (Array.isArray(value)) {
+      const group = value.reduce((ac, val) => {
+        if (val != null) {
+          ac.push(`${prefix}(${prop}: ${val})`);
+        }
+        return ac;
+      }, []);
+      acc.push(`(${group.join(" or ")})`);
+    } else {
+      acc.push(`${prefix}(${prop}: ${value})`);
+    }
+    return acc;
+  }, []);
+}
+function isMultiQuery(value) {
+  return value != null && typeof value === "object" && (!("operator" in value) || "operator" in value && (value.operator === "and" || value.operator === "or")) && "groups" in value && Array.isArray(value.groups) && value.groups.every((group) => group != null && typeof group === "object");
+}
+function containerQuery(contract, query) {
+  const isMultiGroup = isMultiQuery(query);
+  const groups = isMultiGroup ? query.groups : [query];
+  const groupsOperator = ` ${(isMultiGroup ? query.operator : null) ?? "or"} `;
+  return groups.map((group, index) => {
+    const operator = ` ${group.operator ?? "and"} `;
+    let container = group.container ?? "";
+    if (index) {
+      container = "";
+    }
+    const conditions = processConditions(contract, group);
+    const isMultiCondition = groups.length > 1 && conditions.length > 1;
+    return [
+      container,
+      container && " ",
+      isMultiCondition ? "(" : "",
+      conditions.join(operator),
+      isMultiCondition ? ")" : ""
+    ].join("");
+  }).join(groupsOperator);
+}
+function containerQueries(contract, ...styles) {
+  return Object.fromEntries(
+    styles.map(({ query, ...style }) => [
+      containerQuery(contract, query),
+      style
+    ])
+  );
+}
+function applyThemeVars(contract, styles, layer = layers.variables.l1) {
+  const [style, ...rest] = styles;
+  const stylesWithQueries = !style.query ? rest : styles;
+  return {
+    "@layer": {
+      [layer]: {
+        ...!style.query ? { vars: style.vars } : {},
+        ...stylesWithQueries.length ? {
+          "@container": containerQueries(contract, ...stylesWithQueries)
+        } : {}
+      }
+    }
+  };
+}
+function inlineVars(varsOrContract, values) {
+  return assignInlineVars(
+    !values ? Object.entries(varsOrContract).reduce(
+      (acc, [key, value]) => {
+        if (value != null) {
+          acc[key] = `${value}`;
+        }
+        return acc;
+      },
+      {}
+    ) : assignPartialVars(varsOrContract, values)
+  );
+}
+
+export { applyThemeVars, assignPartialVars, computeContract, containerQueries, containerQuery, inlineVars, reduceContract, unwrapCssVar };
+//# sourceMappingURL=css.js.map
+//# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/css.ts"],"names":[],"mappings":"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","file":"css.js","sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport kebabCase from 'lodash/kebabCase';\nimport { layers } from '../styles';\nimport type { GlobalStyleRule, StyleRule } from '@vanilla-extract/css';\nimport type {\n  Contract,\n  CssVarFunction,\n  MapLeafNodes,\n  PartialMapLeafNodes,\n  Primitive,\n  RGBA,\n} from '../types';\nimport {\n  pixelValueAsStringValidator,\n  rgbaAsStringValidator,\n} from './validators';\n\n/**\n * Parse out CSS var name from CSS var implementation\n *\n * @example\n * unwrapCssVar('var(--foo)')\n * // returns '--foo'\n *\n * @example\n * unwrapCssVar('var(--foo, blue)')\n * // returns '--foo'\n *\n * @example\n * unwrapCssVar('var(--foo, var(--bar))')\n * // returns '--foo'\n */\nexport function unwrapCssVar(cssVar: string) {\n  return cssVar.replace(/^var\\((--[\\w-]+)[^\\w-]+.*/i, '$1');\n}\n\ntype FulfilledContract<T> = MapLeafNodes<T, null | number | string | RGBA>;\n\n// TODO: remove if possible\n// NOTE: had to create a generic version not bound to type of T because of type issues around setting values on accumulator\ntype GenericFulfilledContract = {\n  [key: string]: GenericFulfilledContract | null | number | string | RGBA;\n};\n\n/**\n * Convert contract to nested object of identical shape with computed CSS values\n * Pixel values are converted to numbers\n * RGB(A) values are converted to DeckGL compatible tuples\n * All other values are left unconverted\n */\nexport function computeContract<T extends Contract>(\n  contract: T,\n  css: CSSStyleDeclaration,\n): FulfilledContract<T> {\n  return Object.entries(contract).reduce<GenericFulfilledContract>(\n    (acc, [key, cssVarOrContract]) => {\n      if (cssVarOrContract == null) {\n        acc[key] = null;\n\n        return acc;\n      }\n\n      if (typeof cssVarOrContract === 'object') {\n        acc[key] = computeContract(cssVarOrContract, css);\n\n        return acc;\n      }\n\n      const cssVar = unwrapCssVar(cssVarOrContract);\n      const value = css.getPropertyValue(cssVar);\n      const pixel = pixelValueAsStringValidator.safeParse(value);\n\n      if (pixel.success) {\n        acc[key] = pixel.data;\n\n        return acc;\n      }\n\n      const rgba = rgbaAsStringValidator.safeParse(value);\n\n      if (rgba.success) {\n        acc[key] = rgba.data;\n\n        return acc;\n      }\n\n      acc[key] = value ?? null;\n\n      return acc;\n    },\n    {},\n  ) as FulfilledContract<T>;\n}\n\n/**\n * Convert potentially nested contract and values pair into flattened CSS var record\n * The contract provides a lookup for CSS vars\n * The values are expected to partially match the contract shapeForm\n */\nexport function reduceContract<T extends Contract, U>(\n  contract: T,\n  values: PartialMapLeafNodes<T, U>,\n) {\n  const nodes: { contract: Contract; values: PartialMapLeafNodes<T, U> }[] = [\n    { contract, values },\n  ];\n\n  const vars: Record<CssVarFunction, U> = {};\n\n  for (let node of nodes) {\n    Object.entries(node.values).forEach(([key, value]: [string, U]) => {\n      const cssVarOrSubContract = node.contract[key];\n\n      if (cssVarOrSubContract == null || value == null) {\n        return;\n      }\n\n      if (\n        typeof cssVarOrSubContract === 'string' &&\n        (typeof value !== 'object' || Array.isArray(value))\n      ) {\n        vars[cssVarOrSubContract] = value;\n\n        return;\n      }\n\n      if (\n        typeof cssVarOrSubContract === 'object' &&\n        typeof value === 'object'\n      ) {\n        nodes.push({ contract: cssVarOrSubContract, values: value });\n      }\n    });\n  }\n\n  return vars;\n}\n\n/**\n * Reduce contract and values into Vanilla Extract friendly CSS vars\n */\nexport function assignPartialVars<T extends Contract>(\n  contract: T,\n  values: PartialMapLeafNodes<T, Primitive>,\n) {\n  return Object.fromEntries(\n    Object.entries(reduceContract(contract, values)).map(([key, value]) => [\n      key,\n      `${value}`,\n    ]),\n  );\n}\n\ntype CssVarValues = {\n  [key: string]: CssVarValues | Primitive;\n};\n\ntype CssVarValueOptions<T extends object> = {\n  [P in keyof T]?: T[P] extends object\n    ? CssVarValueOptions<T[P]>\n    : T[P] | T[P][];\n};\n\ntype Operators = 'and' | 'or';\n\ntype ContainerQueryOptions = {\n  container?: string;\n  operator?: Operators;\n  maxHeight?: string;\n  minHeight?: string;\n  maxWidth?: string;\n  minWidth?: string;\n};\n\ntype ContainerQueryValues<T extends CssVarValues> = CssVarValueOptions<T> &\n  ContainerQueryOptions;\n\ntype MultiContainerQuery<T extends CssVarValues> = {\n  operator?: Operators;\n  groups: ContainerQueryValues<T>[];\n};\n\n/**\n * Handle creation of query groups based on options and values\n * Internal to containerQueries\n */\nfunction processConditions<T extends CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  values: ContainerQueryValues<T>,\n) {\n  return Object.entries(\n    reduceContract(\n      {\n        ...contract,\n        maxHeight: 'maxHeight', // NOTE: Passthrough these values not as CSS vars\n        minHeight: 'minHeight',\n        maxWidth: 'maxWidth',\n        minWidth: 'minWidth',\n      },\n      values as PartialMapLeafNodes<\n        MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n        ContainerQueryValues<T>[string]\n      >,\n    ),\n  ).reduce<string[]>((acc, [key, value]) => {\n    if (key === 'container' || key === 'operator' || value == null) {\n      return acc;\n    }\n\n    const isStyle = !/^(?:max|min)(?:Height|Width)$/.test(key);\n    const prefix = isStyle ? 'style' : '';\n    const prop = isStyle ? unwrapCssVar(key) : kebabCase(key);\n\n    if (Array.isArray(value)) {\n      const group = value.reduce<string[]>((ac, val) => {\n        if (val != null) {\n          ac.push(`${prefix}(${prop}: ${val})`);\n        }\n\n        return ac;\n      }, []);\n\n      acc.push(`(${group.join(' or ')})`);\n    } else {\n      acc.push(`${prefix}(${prop}: ${value})`);\n    }\n\n    return acc;\n  }, []);\n}\n\nfunction isMultiQuery<T extends CssVarValues>(\n  value: unknown,\n): value is MultiContainerQuery<T> {\n  return (\n    value != null &&\n    typeof value === 'object' &&\n    (!('operator' in value) ||\n      ('operator' in value &&\n        (value.operator === 'and' || value.operator === 'or'))) &&\n    'groups' in value &&\n    Array.isArray(value.groups) &&\n    value.groups.every((group) => group != null && typeof group === 'object')\n  );\n}\n\n/**\n * Create simple or complex container queries with and/or operators.\n *\n * To provide type safety and ease of use, this function accepts a generic and a contract\n * The generic type defines the possible values for the parameters defined within the contract\n *\n * Ex: containerQuery<{ foo: boolean }>({ foo: 'var(--foo)' }, { foo: true })\n *\n * By providing the type constraint and contract, the query parameters will have intellisense\n * on which parameters exist and what their possible values can be\n *\n * @example\n * containerQuery(contract, { a: true })\n * // returns (a: true)\n *\n * @example\n * containerQuery(contract, { a: true, b: true })\n * // returns (a: true) and (b: true)\n *\n * @example\n * containerQuery(contract, { operator: 'or', a: true, b: true })\n * // returns (a: true) or (b: true)\n *\n * @example\n * containerQuery(contract, { groups: [{ a: true }, { b: true }] })\n * // returns (a: true) or (b: true)\n *\n * @example\n * containerQuery(contract, { a: ['foo', 'bar'] })\n * // returns (a: 'foo') or (a: 'bar')\n *\n * @example\n * containerQuery(contract, { a: ['foo', 'bar'], b: true })\n * // returns ((a: 'foo') or (a: 'bar')) and (b: true)\n *\n * @example\n * containerQuery(contract, { operator: 'or', a: ['foo', 'bar'], b: true })\n * // returns ((a: 'foo') or (a: 'bar')) or (b: true)\n *\n * @example\n * containerQuery(contract, { groups: [{ a: true, b: true }, { c: true, d: true }] })\n * // returns ((a: true) and (b: true)) or ((c: true) and (d: true))\n *\n * @example\n * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { c: true, d: true }] })\n * // returns ((a: true) or (b: true)) and ((c: true) and (d: true))\n *\n * @example\n * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { operator: 'or', c: true, d: true }] })\n * // returns ((a: true) or (b: true)) and ((c: true) or (d: true))\n */\nexport function containerQuery<T extends CssVarValues = CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  query: ContainerQueryValues<T> | MultiContainerQuery<T>,\n) {\n  const isMultiGroup = isMultiQuery<T>(query);\n  const groups = isMultiGroup ? query.groups : [query];\n  const groupsOperator = ` ${(isMultiGroup ? query.operator : null) ?? 'or'} `;\n\n  return groups\n    .map((group, index) => {\n      const operator = ` ${group.operator ?? 'and'} `;\n\n      let container = group.container ?? '';\n\n      if (index) {\n        // Multiple container specifiers is not yet supported: https://github.com/w3c/csswg-drafts/issues/6876\n        container = '';\n      }\n\n      const conditions = processConditions(contract, group);\n      const isMultiCondition = groups.length > 1 && conditions.length > 1;\n\n      return [\n        container,\n        container && ' ',\n        isMultiCondition ? '(' : '',\n        conditions.join(operator),\n        isMultiCondition ? ')' : '',\n      ].join('');\n    })\n    .join(groupsOperator);\n}\n\ntype ContainerStyle = Exclude<StyleRule['@container'], undefined>[string];\n\ntype ContainerQuery<T extends CssVarValues> = {\n  query: ContainerQueryValues<T> | MultiContainerQuery<T>;\n};\n\ntype ContainerQueries<T extends CssVarValues> = ContainerStyle &\n  ContainerQuery<T>;\n\ntype GlobalContainerStyle = Exclude<\n  GlobalStyleRule['@container'],\n  undefined\n>[string];\n\ntype GlobalContainerQueries<T extends CssVarValues> = GlobalContainerStyle &\n  ContainerQuery<T>;\n\n/**\n * Bulk container query creation based on the same contract\n */\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  ...styles: ContainerQueries<T>[]\n): Record<string, ContainerStyle>;\n\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  ...styles: GlobalContainerQueries<T>[]\n): Record<string, GlobalContainerStyle>;\n\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  ...styles: ContainerQueries<T>[] | GlobalContainerQueries<T>[]\n): Record<string, ContainerStyle | GlobalContainerStyle> {\n  return Object.fromEntries(\n    styles.map(({ query, ...style }) => [\n      containerQuery<T>(contract, query),\n      style,\n    ]),\n  );\n}\n\ntype VarsOnlyContainerQuery<T extends CssVarValues> = Required<\n  Pick<ContainerQueries<T>, 'query' | 'vars'>\n>;\n\ntype QueryOptionalVarsOnlyContainerQuery<T extends CssVarValues> = Partial<\n  Pick<VarsOnlyContainerQuery<T>, 'query'>\n> &\n  Pick<VarsOnlyContainerQuery<T>, 'vars'>;\n\n/**\n * Helper for establishing global theme variables with the restriction that\n * only variables may be set (and are required). All other styles must be\n * established using alternative utils\n *\n * The first style rule has an optional query. If the query is missing, the vars\n * are set outside of a container query\n */\nexport function applyThemeVars<T extends CssVarValues = CssVarValues>(\n  contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n  styles:\n    | [QueryOptionalVarsOnlyContainerQuery<T>, ...VarsOnlyContainerQuery<T>[]]\n    | VarsOnlyContainerQuery<T>[],\n  layer = layers.variables.l1,\n): StyleRule {\n  const [style, ...rest] = styles;\n\n  const stylesWithQueries = (\n    !style.query ? rest : styles\n  ) as VarsOnlyContainerQuery<T>[];\n\n  return {\n    '@layer': {\n      [layer]: {\n        ...(!style.query ? { vars: style.vars } : {}),\n        ...(stylesWithQueries.length\n          ? {\n              '@container': containerQueries<T>(contract, ...stylesWithQueries),\n            }\n          : {}),\n      },\n    },\n  };\n}\n\n/**\n * Runtime creation of inline style CSS vars that enable CSS container queries\n */\nexport function inlineVars(\n  vars: Record<string, Primitive>,\n): Record<string, string>;\n\nexport function inlineVars<T extends Contract>(\n  contract: T,\n  values: PartialMapLeafNodes<T, Primitive>,\n): Record<string, string>;\n\nexport function inlineVars<T extends Contract>(\n  varsOrContract: Record<string, Primitive> | T,\n  values?: PartialMapLeafNodes<T, Primitive>,\n): Record<string, string> {\n  return assignInlineVars(\n    !values\n      ? Object.entries(varsOrContract).reduce<Record<string, string>>(\n          (acc, [key, value]) => {\n            if (value != null) {\n              acc[key] = `${value}`;\n            }\n\n            return acc;\n          },\n          {},\n        )\n      : assignPartialVars(varsOrContract as T, values),\n  );\n}\n"]}

package/dist/utils/events.d.ts

@@ -0,0 +1,11 @@
+type ContinuableEvent = {
+    continuePropagation: () => void;
+};
+/**
+ * The default behavior of events within React Aria is to stop progagation
+ *
+ * To reenable propagation, continuePropagation must be called
+ */
+declare function continuePropagation(event: ContinuableEvent): void;
+
+export { continuePropagation };

package/dist/utils/events.js

@@ -0,0 +1,10 @@
+import '../chunk-PZ5AY32C.js';
+
+// src/utils/events.ts
+function continuePropagation(event) {
+  event.continuePropagation();
+}
+
+export { continuePropagation };
+//# sourceMappingURL=events.js.map
+//# sourceMappingURL=events.js.map