@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/lib/theme/componentThemes.d.ts

@@ -0,0 +1,134 @@
+import { Atoms } from '../css/atoms';
+import { RecordLike } from '../utils/helpers';
+export type ButtonTheme = {
+    base: string;
+    variants: {
+        variant: 'solid' | 'outline' | 'ghost';
+        intent: 'neutral' | 'danger';
+        size: 'small' | 'medium' | 'large';
+        loading: boolean;
+        disabled: boolean;
+    };
+};
+export type LinkTheme = {
+    base: string;
+    variants: {
+        variant: 'inherit' | 'primary' | 'secondary';
+        underline: boolean;
+    };
+};
+export type SpinnerTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+export type DividerTheme = {
+    base?: string;
+    variants: {
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+export type DialogTheme = {
+    dialog: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+    };
+};
+export type InputTheme = {
+    container: string;
+    input: string;
+    variants: {
+        variant: 'solid' | 'outline';
+        disabled: boolean;
+        required: boolean;
+    };
+};
+export type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
+    };
+};
+export type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+export type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
+    };
+};
+export type ProgressTheme = {
+    base: string;
+    bar: string;
+    variants: {
+        indeterminate: boolean;
+    };
+};
+export type SwitchTheme = {
+    base: string;
+    slider: string;
+};
+export type PopoverTheme = {
+    base: string;
+};
+export type SelectTheme = {
+    wrapper?: string;
+    select: string;
+    icon: string;
+    variants: {
+        variant: 'solid' | 'outline';
+    };
+};
+export type SliderTheme = {
+    base: string;
+    track: string;
+    filledTrack: string;
+    thumb: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        colorScheme: 'primary' | 'secondary';
+        disabled: boolean;
+    };
+};
+export type TooltipTheme = {
+    base: string;
+    variants: {
+        colorScheme: 'primary' | 'secondary';
+    };
+};
+export type ComponentThemes = {
+    button: ButtonTheme;
+    checkbox: CheckboxTheme;
+    dialog: DialogTheme;
+    divider: DividerTheme;
+    input: InputTheme;
+    label: LabelTheme;
+    link: LinkTheme;
+    popover: PopoverTheme;
+    progress: ProgressTheme;
+    radio: RadioTheme;
+    select: SelectTheme;
+    slider: SliderTheme;
+    spinner: SpinnerTheme;
+    switch: SwitchTheme;
+    tooltip: TooltipTheme;
+};
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+export type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
+};
+export type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
+};

package/dist/{styles/lib → lib}/theme/makeComponentTheme.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function makeComponentTheme(component, componentTheme) {
   return componentTheme;
 }

package/dist/lib/theme/makeComponentTheme.d.ts

@@ -0,0 +1,49 @@
+import { RecordLike } from '../utils/helpers';
+import { ComponentThemes } from './componentThemes';
+/**
+ * Helper generic to convert a component theme to a styles object
+ *
+ * export type ThemeIn = {
+ *  base: string;
+ *  variants: {
+ *    intent: 'neutral' | 'danger';
+ *    level?: 1 | 2;
+ *    loading: boolean;
+ *  };
+ * };
+ * export type ThemeOut = {
+ *  base: string;
+ *  variants: {
+ *    intent: Record<'neutral' | 'danger', string>;
+ *    level?: Record<1 | 2, string>;
+ *    loading: string;
+ *  };
+ * };
+ */
+type VariantsToStyle<T extends RecordLike> = {
+    [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
+};
+/**
+ * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
+ */
+export type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
+};
+export type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
+    variants: {
+        [K in keyof T['variants']]?: T['variants'][K];
+    };
+    style: string;
+}[] : never;
+export type ComponentThemeDefaultVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
+    [K in keyof T['variants']]?: T['variants'][K];
+} : never;
+export type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
+    compoundVariants?: ComponentThemeCompoundVariants<T>;
+    defaultVariants?: ComponentThemeDefaultVariants<T>;
+};
+export type ThemeComponentsStyles = {
+    [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
+};
+export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
+export {};

package/dist/lib/theme/makeTheme.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const css = require("@vanilla-extract/css");
+const makeVanillaTheme = require("./makeVanillaTheme.cjs");
+const vars_css = require("./vars.css.cjs");
+function makeTheme(theme) {
+  return {
+    name: theme.name,
+    vars: css.createTheme(vars_css.vars, makeVanillaTheme.makeVanillaTheme(theme.tokens)),
+    components: theme.components
+  };
+}
+exports.makeTheme = makeTheme;

package/dist/lib/theme/makeTheme.d.ts

@@ -0,0 +1,14 @@
+import { ThemeComponentsStyles } from './makeComponentTheme';
+import { ThemeTokens } from './tokensType';
+type ThemeInput = {
+    name: string;
+    tokens: ThemeTokens;
+    components: ThemeComponentsStyles;
+};
+export type Theme = {
+    name: string;
+    vars: string;
+    components: ThemeComponentsStyles;
+};
+export declare function makeTheme(theme: ThemeInput): Theme;
+export {};

package/dist/{styles/lib/theme/makeTheme.mjs → lib/theme/makeTheme.js}

@@ -1,6 +1,6 @@
 import { createTheme } from "@vanilla-extract/css";
-import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { vars } from "./vars.css.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.js";
+import { vars } from "./vars.css.js";
 function makeTheme(theme) {
   return {
     name: theme.name,

package/dist/{styles/lib → lib}/theme/makeVanillaTheme.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const makeVanillaTheme = (tokens) => {
   return {
     space: tokens.spacing,

package/dist/lib/theme/makeVanillaTheme.d.ts

@@ -0,0 +1,16 @@
+import { ThemeTokens } from './tokensType';
+export declare const makeVanillaTheme: (tokens: ThemeTokens) => {
+    space: Record<keyof typeof tokens.spacing, string>;
+    borderRadius: Record<keyof typeof tokens.border.radius, string>;
+    color: Record<keyof typeof tokens.color, string>;
+    borderWidth: Record<keyof typeof tokens.border.width, string>;
+    fontFamily: Record<keyof typeof tokens.typography.fontFamily, string>;
+    fontSize: Record<keyof typeof tokens.typography.fontSize, string>;
+    fontWeight: Record<keyof typeof tokens.typography.fontWeight, string>;
+    lineHeight: Record<keyof typeof tokens.typography.lineHeight, string>;
+    transition: Record<keyof typeof tokens.transition, string>;
+    shadow: Record<keyof typeof tokens.shadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+};

package/dist/lib/theme/store/theme.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let currentTheme = null;
+function setTheme(theme) {
+  currentTheme = theme;
+}
+function getTheme() {
+  if (!currentTheme) {
+    throw new Error("No theme has been set. Use setTheme() to set a theme.");
+  }
+  return currentTheme;
+}
+function getComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: This is a type assertion for a dynamic key
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(
+        compoundVariant.variants
+      );
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+function getComponentStyleDefaults(name) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+}
+exports.getComponentStyleDefaults = getComponentStyleDefaults;
+exports.getComponentStyles = getComponentStyles;
+exports.getTheme = getTheme;
+exports.setTheme = setTheme;

package/dist/lib/theme/store/theme.d.ts

@@ -0,0 +1,13 @@
+import { RecordLike } from '../../utils/helpers';
+import { ComponentThemesProps } from '../componentThemes';
+import { ThemeComponentsStyles } from '../makeComponentTheme';
+import { Theme } from '../makeTheme';
+export declare function setTheme(theme: Theme): void;
+export declare function getTheme(): Theme;
+export declare function getComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
+type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
+type Components = {
+    [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
+};
+export declare function getComponentStyleDefaults<T extends keyof ThemeComponentsStyles>(name: T): Components[T];
+export {};

package/dist/lib/theme/store/theme.js

@@ -0,0 +1,93 @@
+let currentTheme = null;
+function setTheme(theme) {
+  currentTheme = theme;
+}
+function getTheme() {
+  if (!currentTheme) {
+    throw new Error("No theme has been set. Use setTheme() to set a theme.");
+  }
+  return currentTheme;
+}
+function getComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: This is a type assertion for a dynamic key
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(
+        compoundVariant.variants
+      );
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+function getComponentStyleDefaults(name) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+}
+export {
+  getComponentStyleDefaults,
+  getComponentStyles,
+  getTheme,
+  setTheme
+};

package/dist/{styles/lib → lib}/theme/tokens.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tokens = {
   typography: {
     fontFamily: {

package/dist/lib/theme/tokens.d.ts

@@ -0,0 +1,2 @@
+import { ThemeTokens } from './tokensType';
+export declare const tokens: ThemeTokens;

package/dist/lib/theme/tokensType.d.ts

@@ -0,0 +1,33 @@
+type FontWeight = 'regular' | 'medium' | 'strong';
+type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Transition = 'slow' | 'normal' | 'fast';
+type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
+type BorderWidth = 'small' | 'medium' | 'large';
+type BoxShadow = 'small' | 'medium' | 'large';
+type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
+export type ThemeTokens = {
+    typography: {
+        fontFamily: {
+            body?: string;
+            primary?: string;
+            secondary?: string;
+        };
+        fontSize: Record<FontSize, number | string>;
+        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
+        lineHeight: Record<LineHeight, number | string>;
+    };
+    spacing: Record<Space, number | string>;
+    transition: Record<Transition, string>;
+    border: {
+        radius: Record<BorderRadius, number | string>;
+        width: Record<BorderWidth, number | string>;
+    };
+    shadow: Record<BoxShadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+    color: Record<Color, string>;
+};
+export {};

package/dist/lib/theme/vars.css.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const makeVanillaTheme = require("./makeVanillaTheme.cjs");
+const tokens = require("./tokens.cjs");
+fileScope.setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
+const vars = css.createThemeContract(makeVanillaTheme.makeVanillaTheme(tokens.tokens));
+fileScope.endFileScope();
+exports.vars = vars;

package/dist/lib/theme/vars.css.d.ts

@@ -0,0 +1,75 @@
+export declare const vars: {
+    space: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadius: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    color: {
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderWidth: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontFamily: {
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSize: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeight: {
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    lineHeight: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadow: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    focus: {
+        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};

package/dist/{styles/lib/theme/vars.css.mjs → lib/theme/vars.css.js}

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createThemeContract } from "@vanilla-extract/css";
-import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { tokens } from "./tokens.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.js";
+import { tokens } from "./tokens.js";
 setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
 const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();

package/dist/{styles/lib → lib}/utils/atom-props.cjs

@@ -1,10 +1,11 @@
 "use strict";
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sprinkles_css = require("../css/atoms/sprinkles.css.cjs");
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (sprinkles_css.atoms.properties.has(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;

package/dist/lib/utils/atom-props.d.ts

@@ -0,0 +1,4 @@
+/**
+ *
+ */
+export declare function getAtomsAndProps(props: Record<string, unknown>): [atomsClassNames: Record<string, unknown>, props: Record<string, unknown>];

package/dist/{styles/lib/utils/atom-props.mjs → lib/utils/atom-props.js}

@@ -1,4 +1,4 @@
-import { atoms } from "../css/atoms/sprinkles.css.mjs";
+import { atoms } from "../css/atoms/sprinkles.css.js";
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};

package/dist/lib/utils/classnames.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+exports.classnames = classnames;

package/dist/lib/utils/classnames.d.ts

@@ -0,0 +1,3 @@
+type Args = null | undefined | boolean | string | unknown;
+export declare const classnames: (...args: Args[]) => string | undefined;
+export {};

package/dist/lib/utils/classnames.js

@@ -0,0 +1,7 @@
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+export {
+  classnames
+};

package/dist/lib/utils/dom-focus.d.ts

@@ -0,0 +1,2 @@
+export declare const getFirstFocusableElement: (container: HTMLElement) => HTMLElement | null;
+export declare const focusFirstElement: (container: HTMLElement) => void;

package/dist/lib/utils/dom.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
+}
+function hasDuration(duration) {
+  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
+}
+exports.hasAnimationDuration = hasAnimationDuration;