@blockle/blocks 0.20.0-alpha1.0 → 1.0.1

package/dist/components/form/Input/Input.cjs

@@ -1,51 +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 input_css = require("./input.css.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = react.useId();
-  const containerClassName = theme.getComponentStyles(
-    "input",
-    { container: true },
-    false
-  );
-  const inputClassName = theme.getComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Box.Box,
-    {
-      display: "flex",
-      alignItems: "center",
-      className: classnames.classnames(containerClassName, className),
-      children: [
-        startSlot,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id,
-            ref,
-            name,
-            type,
-            placeholder,
-            className: classnames.classnames(input_css.input, inputClassName),
-            ...restProps
-          }
-        ),
-        endSlot
-      ]
-    }
-  ) });
-};
-exports.Input = Input;

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

@@ -1,11 +0,0 @@
-import { OptionalLiteral } from '../../../lib/utils/helpers';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type InputProps = {
-    className?: string;
-    endSlot?: React.ReactNode;
-    name: string;
-    ref?: React.Ref<HTMLInputElement>;
-    startSlot?: React.ReactNode;
-    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
-export declare const Input: React.FC<InputProps>;

package/dist/components/form/Input/Input.js

@@ -1,51 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { input } from "./input.css.js";
-import { Box } from "../../layout/Box/Box.js";
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = useId();
-  const containerClassName = getComponentStyles(
-    "input",
-    { container: true },
-    false
-  );
-  const inputClassName = getComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      display: "flex",
-      alignItems: "center",
-      className: classnames(containerClassName, className),
-      children: [
-        startSlot,
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id,
-            ref,
-            name,
-            type,
-            placeholder,
-            className: classnames(input, inputClassName),
-            ...restProps
-          }
-        ),
-        endSlot
-      ]
-    }
-  ) });
-};
-export {
-  Input
-};

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

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

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

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

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

@@ -1 +0,0 @@
-export { Input, type InputProps } from './Input';

package/dist/components/form/Input/input.css.cjs

@@ -1,21 +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/Input/input.css.ts", "@blockle/blocks");
-const input = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      appearance: "none",
-      width: "100%",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-});
-fileScope.endFileScope();
-exports.input = input;

package/dist/components/form/Input/input.css.d.ts

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

package/dist/components/form/Input/input.css.js

@@ -1,21 +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/Input/input.css.ts", "@blockle/blocks");
-const input = style({
-  "@layer": {
-    [blocksLayer]: {
-      appearance: "none",
-      width: "100%",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-});
-endFileScope();
-export {
-  input
-};

package/dist/components/form/Label/Label.cjs

@@ -1,30 +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 sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const Label = ({
-  asSpan,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = asSpan ? "span" : "label";
-  const containerClassName = theme.getComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: classnames.classnames(containerClassName, className, sprinkles_css.atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-exports.Label = Label;

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

@@ -1,18 +0,0 @@
-import { Atoms } from '../../../lib/css/atoms';
-import { LabelTheme } from '../../../lib/theme/componentThemes';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type LabelProps = {
-    /**
-     * If true, the label will be rendered as a span element
-     * but will still have the same styles as a label.
-     * Useful for when you want to use a label element but
-     * can't because of the parent element's structure.
-     */
-    asSpan?: boolean;
-    htmlFor?: string;
-    children?: React.ReactNode;
-    required?: boolean;
-    size?: LabelTheme['variants']['size'];
-    cursor?: Atoms['cursor'];
-} & HTMLElementProps<HTMLLabelElement>;
-export declare const Label: React.FC<LabelProps>;

package/dist/components/form/Label/Label.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-const Label = ({
-  asSpan,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = asSpan ? "span" : "label";
-  const containerClassName = getComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-export {
-  Label
-};

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

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

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

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { LabelProps } from './Label';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<LabelProps>;
-export declare const WithInput: StoryObj<LabelProps>;

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

@@ -1 +0,0 @@
-export { Label, type LabelProps } from './Label';

package/dist/components/form/Radio/Radio.cjs

@@ -1,48 +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 radio_css = require("./radio.css.cjs");
-const Label = require("../Label/Label.cjs");
-const Radio = ({
-  name,
-  children,
-  className,
-  ref,
-  ...restProps
-}) => {
-  const containerClassName = theme.getComponentStyles("radio", { base: true }, false);
-  const iconClassName = theme.getComponentStyles("radio", { icon: true }, false);
-  const labelClassName = theme.getComponentStyles("checkbox", { label: true }, false);
-  const input = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classnames.classnames(radio_css.container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "radio",
-            name,
-            className: radio_css.input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(radio_css.icon, iconClassName) })
-      ]
-    }
-  );
-  if (!children) {
-    return input;
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-      input,
-      /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { asSpan: true, children })
-    ] })
-  );
-};
-exports.Radio = Radio;

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

@@ -1,8 +0,0 @@
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type RadioProps = {
-    children?: React.ReactNode;
-    name: string;
-    ref?: React.Ref<HTMLInputElement>;
-    value: string;
-} & HTMLElementProps<HTMLInputElement>;
-export declare const Radio: React.FC<RadioProps>;

package/dist/components/form/Radio/Radio.js

@@ -1,48 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { input, icon, container } from "./radio.css.js";
-import { Label } from "../Label/Label.js";
-const Radio = ({
-  name,
-  children,
-  className,
-  ref,
-  ...restProps
-}) => {
-  const containerClassName = getComponentStyles("radio", { base: true }, false);
-  const iconClassName = getComponentStyles("radio", { icon: true }, false);
-  const labelClassName = getComponentStyles("checkbox", { label: true }, false);
-  const input$1 = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classnames(container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "radio",
-            name,
-            className: input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
-      ]
-    }
-  );
-  if (!children) {
-    return input$1;
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-    /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
-      input$1,
-      /* @__PURE__ */ jsx(Label, { asSpan: true, children })
-    ] })
-  );
-};
-export {
-  Radio
-};

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

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

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

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RadioProps } from './Radio';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<RadioProps>;
-export declare const WithRadioGroup: StoryObj<RadioProps>;

package/dist/components/form/Radio/RadioGroup.d.ts

@@ -1,8 +0,0 @@
-export type RadioGroupProps = {
-    'aria-labelledby'?: string;
-    children: React.ReactNode;
-    className?: string;
-    required?: boolean;
-    style?: React.CSSProperties;
-};
-export declare const RadioGroup: React.FC<RadioGroupProps>;

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

@@ -1,2 +0,0 @@
-export { Radio, type RadioProps } from './Radio';
-export { RadioGroup, type RadioGroupProps } from './RadioGroup';

package/dist/components/form/Radio/radio.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/Radio/radio.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/Radio/radio.css.d.ts

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

package/dist/components/form/Radio/radio.css.js

@@ -1,32 +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/Radio/radio.css.ts", "@blockle/blocks");
-const container = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-});
-const input = style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset"
-    }
-  }
-});
-const icon = style({
-  pointerEvents: "none"
-});
-endFileScope();
-export {
-  container,
-  icon,
-  input
-};

package/dist/components/form/Select/Select.cjs

@@ -1,65 +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 select_css = require("./select.css.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Select = ({
-  children,
-  placeholder,
-  className,
-  variant,
-  ref,
-  ...restProps
-}) => {
-  const wrapperClassName = theme.getComponentStyles(
-    "select",
-    { wrapper: true },
-    false
-  );
-  const selectClassName = theme.getComponentStyles("select", {
-    select: true,
-    variants: { variant }
-  });
-  const iconClassName = theme.getComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { className: classnames.classnames(select_css.wrapper, wrapperClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        ref,
-        className: classnames.classnames(select_css.select, selectClassName, className),
-        ...restProps,
-        children: [
-          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Box.Box,
-      {
-        className: classnames.classnames(select_css.icon, iconClassName),
-        role: "presentation",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
-      }
-    )
-  ] });
-};
-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", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-        clipRule: "evenodd"
-      }
-    ) })
-  );
-};
-exports.Select = Select;

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

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-import { SelectTheme } from '../../../lib/theme/componentThemes';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type SelectProps = {
-    children: React.ReactNode;
-    placeholder?: string;
-    ref?: React.Ref<HTMLSelectElement>;
-    variant?: SelectTheme['variants']['variant'];
-} & HTMLElementProps<HTMLSelectElement>;
-export declare const Select: React.FC<SelectProps>;

package/dist/components/form/Select/Select.js

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { select, icon, wrapper } from "./select.css.js";
-import { Box } from "../../layout/Box/Box.js";
-const Select = ({
-  children,
-  placeholder,
-  className,
-  variant,
-  ref,
-  ...restProps
-}) => {
-  const wrapperClassName = getComponentStyles(
-    "select",
-    { wrapper: true },
-    false
-  );
-  const selectClassName = getComponentStyles("select", {
-    select: true,
-    variants: { variant }
-  });
-  const iconClassName = getComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        ref,
-        className: classnames(select, selectClassName, className),
-        ...restProps,
-        children: [
-          placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: classnames(icon, iconClassName),
-        role: "presentation",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsx(DefaultIcon, {})
-      }
-    )
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-        clipRule: "evenodd"
-      }
-    ) })
-  );
-};
-export {
-  Select
-};

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

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

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

@@ -1 +0,0 @@
-export { Select, type SelectProps } from './Select';

package/dist/components/form/Select/select.css.cjs

@@ -1,38 +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/Select/select.css.ts", "@blockle/blocks");
-const wrapper = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "relative"
-    }
-  }
-});
-const select = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      appearance: "none",
-      inlineSize: "100%"
-    }
-  }
-});
-const icon = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none",
-      display: "flex",
-      alignItems: "center"
-    }
-  }
-});
-fileScope.endFileScope();
-exports.icon = icon;
-exports.select = select;
-exports.wrapper = wrapper;