@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

package/dist/components/display/Divider/divider.css.d.ts

@@ -1 +0,0 @@
-export declare const divider: string;

package/dist/components/display/Divider/divider.css.js

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
-setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
-const divider = style({
-  "@layer": {
-    [blocksLayer]: {
-      clear: "both",
-      blockSize: "1px"
-    }
-  }
-});
-endFileScope();
-export {
-  divider
-};

package/dist/components/display/Divider/index.d.ts

@@ -1 +0,0 @@
-export { Divider, type DividerProps } from './Divider';

package/dist/components/feedback/Progress/Progress.cjs

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Progress = ({
-  className,
-  indeterminate,
-  max = 100,
-  ref,
-  value = 0,
-  ...restProps
-}) => {
-  const progress = value / max * 100;
-  const containerClassName = theme.getComponentStyles(
-    "progress",
-    {
-      base: true
-    },
-    false
-  );
-  const barClassName = theme.getComponentStyles(
-    "progress",
-    { bar: true, variants: { indeterminate } },
-    false
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      ref,
-      className: classnames.classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Box.Box,
-        {
-          className: barClassName,
-          backgroundColor: "currentColor",
-          inlineSize: "full",
-          blockSize: "full",
-          style: {
-            transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)`
-          }
-        }
-      )
-    }
-  );
-};
-exports.Progress = Progress;

package/dist/components/feedback/Progress/Progress.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-export type ProgressProps = {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-valuetext'?: string;
-    className?: string;
-    indeterminate?: boolean;
-    max?: number;
-    style?: React.CSSProperties;
-    /**
-     * The value of the progress bar, between 0 and max=100.
-     */
-    value?: number;
-    ref?: React.Ref<HTMLDivElement>;
-};
-export declare const Progress: React.FC<ProgressProps>;

package/dist/components/feedback/Progress/Progress.js

@@ -1,54 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { Box } from "../../layout/Box/Box.js";
-const Progress = ({
-  className,
-  indeterminate,
-  max = 100,
-  ref,
-  value = 0,
-  ...restProps
-}) => {
-  const progress = value / max * 100;
-  const containerClassName = getComponentStyles(
-    "progress",
-    {
-      base: true
-    },
-    false
-  );
-  const barClassName = getComponentStyles(
-    "progress",
-    { bar: true, variants: { indeterminate } },
-    false
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className: classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: barClassName,
-          backgroundColor: "currentColor",
-          inlineSize: "full",
-          blockSize: "full",
-          style: {
-            transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)`
-          }
-        }
-      )
-    }
-  );
-};
-export {
-  Progress
-};

package/dist/components/feedback/Progress/Progress.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ProgressProps } from './Progress';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<ProgressProps>;

package/dist/components/feedback/Progress/index.d.ts

@@ -1 +0,0 @@
-export { Progress, type ProgressProps } from './Progress';

package/dist/components/feedback/Spinner/Spinner.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Spinner = ({
-  className,
-  size,
-  color,
-  ...restProps
-}) => {
-  const spinnerClassName = theme.getComponentStyles("spinner", {
-    base: true,
-    variants: { size, color }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      color,
-      className: classnames.classnames(spinnerClassName, className),
-      ...restProps
-    }
-  );
-};
-exports.Spinner = Spinner;

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -1,9 +0,0 @@
-import { MarginAtoms } from '../../../lib/css/atoms';
-import { SpinnerTheme } from '../../../lib/theme/componentThemes';
-export type SpinnerProps = {
-    className?: string;
-    color?: SpinnerTheme['variants']['color'];
-    size?: SpinnerTheme['variants']['size'];
-    style?: React.CSSProperties;
-} & MarginAtoms;
-export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/feedback/Spinner/Spinner.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { Box } from "../../layout/Box/Box.js";
-const Spinner = ({
-  className,
-  size,
-  color,
-  ...restProps
-}) => {
-  const spinnerClassName = getComponentStyles("spinner", {
-    base: true,
-    variants: { size, color }
-  });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      color,
-      className: classnames(spinnerClassName, className),
-      ...restProps
-    }
-  );
-};
-export {
-  Spinner
-};

package/dist/components/feedback/Spinner/Spinner.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { SpinnerProps } from './Spinner';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<SpinnerProps>;

package/dist/components/feedback/Spinner/index.d.ts

@@ -1 +0,0 @@
-export { Spinner, type SpinnerProps } from './Spinner';

package/dist/components/form/Button/Button.cjs

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const createAsChildTemplate = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const atomProps = require("../../../lib/utils/atom-props.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const Button_css = require("./Button.css.cjs");
-const Spinner = require("../../feedback/Spinner/Spinner.cjs");
-const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("button");
-const Button = ({
-  asChild,
-  children,
-  className,
-  disabled,
-  endSlot,
-  intent,
-  loading,
-  ref,
-  size,
-  startSlot,
-  variant,
-  ...restProps
-}) => {
-  const buttonClassName = theme.getComponentStyles("button", {
-    base: true,
-    variants: {
-      variant,
-      intent,
-      size,
-      disabled,
-      loading
-    }
-  });
-  const [atomsProps, otherProps] = atomProps.getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Template,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: classnames.classnames(
-        Button_css.buttonReset,
-        buttonClassName,
-        sprinkles_css.atoms(atomsProps),
-        className
-      ),
-      ...otherProps,
-      children: [
-        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { size }),
-        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
-        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
-      ]
-    }
-  );
-};
-exports.Button = Button;

package/dist/components/form/Button/Button.css.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-const buttonReset = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-});
-fileScope.endFileScope();
-exports.buttonReset = buttonReset;

package/dist/components/form/Button/Button.css.d.ts

@@ -1 +0,0 @@
-export declare const buttonReset: string;

package/dist/components/form/Button/Button.css.js

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
-setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-const buttonReset = style({
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-});
-endFileScope();
-export {
-  buttonReset
-};

package/dist/components/form/Button/Button.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-import { Atoms, MarginAtoms } from '../../../lib/css/atoms';
-import { ButtonTheme } from '../../../lib/theme/componentThemes';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type ButtonProps = {
-    alignSelf?: Atoms['alignSelf'];
-    asChild?: boolean;
-    children: React.ReactNode;
-    disabled?: boolean;
-    endSlot?: React.ReactNode;
-    inlineSize?: Atoms['inlineSize'];
-    intent?: ButtonTheme['variants']['intent'];
-    loading?: boolean;
-    popovertarget?: string;
-    ref?: React.Ref<HTMLButtonElement>;
-    size?: ButtonTheme['variants']['size'];
-    startSlot?: React.ReactNode;
-    type?: 'button' | 'submit' | 'reset';
-    variant?: ButtonTheme['variants']['variant'];
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
-export declare const Button: React.FC<ButtonProps>;

package/dist/components/form/Button/Button.js

@@ -1,59 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { getAtomsAndProps } from "../../../lib/utils/atom-props.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { buttonReset } from "./Button.css.js";
-import { Spinner } from "../../feedback/Spinner/Spinner.js";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-const { Template, Slot } = createAsChildTemplate("button");
-const Button = ({
-  asChild,
-  children,
-  className,
-  disabled,
-  endSlot,
-  intent,
-  loading,
-  ref,
-  size,
-  startSlot,
-  variant,
-  ...restProps
-}) => {
-  const buttonClassName = getComponentStyles("button", {
-    base: true,
-    variants: {
-      variant,
-      intent,
-      size,
-      disabled,
-      loading
-    }
-  });
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxs(
-    Template,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: classnames(
-        buttonReset,
-        buttonClassName,
-        atoms(atomsProps),
-        className
-      ),
-      ...otherProps,
-      children: [
-        startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsx(Spinner, { size }),
-        /* @__PURE__ */ jsx(Slot, { children }),
-        endSlot && /* @__PURE__ */ jsx("div", { children: endSlot })
-      ]
-    }
-  );
-};
-export {
-  Button
-};

package/dist/components/form/Button/Button.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/form/Button/Button.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ButtonProps } from './Button';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<ButtonProps>;
-export declare const LinkButton: StoryObj<ButtonProps>;
-export declare const Play: StoryObj<ButtonProps>;

package/dist/components/form/Button/index.d.ts

@@ -1 +0,0 @@
-export { Button, type ButtonProps } from './Button';

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const Label = require("../Label/Label.cjs");
-const checkbox_css = require("./checkbox.css.cjs");
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  const containerClassName = theme.getComponentStyles(
-    "checkbox",
-    { base: true },
-    false
-  );
-  const iconClassName = theme.getComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = theme.getComponentStyles("checkbox", { label: true }, false);
-  const reactId = react.useId();
-  const inputId = id || reactId;
-  const input = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classnames.classnames(checkbox_css.container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            name,
-            id: inputId,
-            className: checkbox_css.input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(checkbox_css.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
-      ]
-    }
-  );
-  if (!children) {
-    return input;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: labelClassName, children: [
-    input,
-    children && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { required, htmlFor: inputId, children })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "m4.5 12.75 6 6 9-13.5"
-          }
-        )
-      }
-    )
-  );
-};
-exports.Checkbox = Checkbox;

package/dist/components/form/Checkbox/Checkbox.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type CheckboxProps = {
-    children?: React.ReactNode;
-    name: string;
-    ref?: React.Ref<HTMLInputElement>;
-    required?: boolean;
-} & HTMLElementProps<HTMLInputElement>;
-export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/form/Checkbox/Checkbox.js

@@ -1,79 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { Label } from "../Label/Label.js";
-import { input, icon, container } from "./checkbox.css.js";
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  const containerClassName = getComponentStyles(
-    "checkbox",
-    { base: true },
-    false
-  );
-  const iconClassName = getComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = getComponentStyles("checkbox", { label: true }, false);
-  const reactId = useId();
-  const inputId = id || reactId;
-  const input$1 = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classnames(container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            name,
-            id: inputId,
-            className: input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
-      ]
-    }
-  );
-  if (!children) {
-    return input$1;
-  }
-  return /* @__PURE__ */ jsxs("span", { className: labelClassName, children: [
-    input$1,
-    children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "m4.5 12.75 6 6 9-13.5"
-          }
-        )
-      }
-    )
-  );
-};
-export {
-  Checkbox
-};

package/dist/components/form/Checkbox/Checkbox.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/form/Checkbox/Checkbox.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { CheckboxProps } from './Checkbox';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<CheckboxProps>;

package/dist/components/form/Checkbox/checkbox.css.cjs

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-});
-const input = css.style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      all: "unset"
-    }
-  }
-});
-const icon = css.style({
-  pointerEvents: "none"
-});
-fileScope.endFileScope();
-exports.container = container;
-exports.icon = icon;
-exports.input = input;

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

@@ -1,3 +0,0 @@
-export declare const container: string;
-export declare const input: string;
-export declare const icon: string;