@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

package/dist/lib/react/mergeProps.js

@@ -1,43 +0,0 @@
-import { classnames } from "../utils/classnames.js";
-import { composeRefs } from "./refs.js";
-function mergeProps(slotProps, childProps) {
-  const overrideProps = {};
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    if (childPropValue === void 0) {
-      continue;
-    }
-    if (slotPropValue === void 0) {
-      overrideProps[propName] = childPropValue;
-      continue;
-    }
-    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
-      overrideProps[propName] = (...args) => {
-        childPropValue(...args);
-        slotPropValue(...args);
-      };
-    } else
-      switch (propName) {
-        case "style": {
-          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-          break;
-        }
-        case "className": {
-          overrideProps[propName] = classnames(slotPropValue, childPropValue);
-          break;
-        }
-        case "ref": {
-          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
-          break;
-        }
-        default: {
-          overrideProps[propName] = childPropValue;
-        }
-      }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-export {
-  mergeProps
-};

package/dist/lib/react/refs.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
-exports.composeRefs = composeRefs;

package/dist/lib/react/refs.d.ts

@@ -1,3 +0,0 @@
-type PossibleRef<T> = React.Ref<T> | undefined | unknown;
-export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
-export {};

package/dist/lib/react/refs.js

@@ -1,17 +0,0 @@
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
-export {
-  composeRefs
-};

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

@@ -1,134 +0,0 @@
-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/lib/theme/makeComponentTheme.cjs

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

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

@@ -1,49 +0,0 @@
-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/makeComponentTheme.js

@@ -1,6 +0,0 @@
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
-export {
-  makeComponentTheme
-};

package/dist/lib/theme/makeTheme.cjs

@@ -1,13 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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/lib/theme/makeTheme.js

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

package/dist/lib/theme/makeVanillaTheme.cjs

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const makeVanillaTheme = (tokens) => {
-  return {
-    space: tokens.spacing,
-    borderRadius: tokens.border.radius,
-    color: tokens.color,
-    borderWidth: tokens.border.width,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    lineHeight: tokens.typography.lineHeight,
-    transition: tokens.transition,
-    shadow: tokens.shadow,
-    focus: {
-      boxShadow: tokens.focus.boxShadow
-    }
-  };
-};
-exports.makeVanillaTheme = makeVanillaTheme;

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

@@ -1,16 +0,0 @@
-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/makeVanillaTheme.js

@@ -1,20 +0,0 @@
-const makeVanillaTheme = (tokens) => {
-  return {
-    space: tokens.spacing,
-    borderRadius: tokens.border.radius,
-    color: tokens.color,
-    borderWidth: tokens.border.width,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    lineHeight: tokens.typography.lineHeight,
-    transition: tokens.transition,
-    shadow: tokens.shadow,
-    focus: {
-      boxShadow: tokens.focus.boxShadow
-    }
-  };
-};
-export {
-  makeVanillaTheme
-};

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

@@ -1,93 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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/lib/theme/tokens.cjs

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tokens = {
-  typography: {
-    fontFamily: {
-      body: "Roboto, sans-serif",
-      primary: "Roboto, sans-serif",
-      secondary: "Roboto, sans-serif"
-    },
-    fontSize: {
-      xsmall: "0.75rem",
-      small: "0.875rem",
-      medium: "1rem",
-      large: "1.125rem",
-      xlarge: "1.25rem"
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    lineHeight: {
-      xsmall: "1rem",
-      small: "1.25rem",
-      medium: "1.5rem",
-      large: "1.75rem",
-      xlarge: "2rem"
-    }
-  },
-  spacing: {
-    none: 0,
-    gutter: "1rem",
-    xsmall: "0.25rem",
-    small: "0.5rem",
-    medium: "1rem",
-    large: "1.5rem",
-    xlarge: "2rem"
-  },
-  transition: {
-    slow: "500ms",
-    normal: "300ms",
-    fast: "100ms"
-  },
-  border: {
-    radius: {
-      small: "0.25rem",
-      medium: "0.5rem",
-      large: "1rem",
-      xlarge: "2rem"
-    },
-    width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
-    }
-  },
-  shadow: {
-    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
-    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
-  },
-  focus: {
-    boxShadow: "0 0 0 2px #AF8EFF"
-  },
-  color: {
-    black: "#000000",
-    white: "#ffffff",
-    body: "#ffffff",
-    primaryLight: "#f5f5f5",
-    primary: "#e0e0e0",
-    primaryDark: "#aeaeae",
-    secondaryLight: "#f5f5f5",
-    secondary: "#e0e0e0",
-    secondaryDark: "#aeaeae",
-    text: "#000000",
-    textLight: "#ffffff",
-    textDark: "#aeaeae",
-    danger: "#ff0000",
-    link: "#0000ff"
-  }
-};
-exports.tokens = tokens;

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

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