@blockle/blocks 0.20.0-alpha1.0 → 1.0.1

package/dist/components/form/Switch/Switch.cjs

@@ -1,73 +0,0 @@
-"use client";
-"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 switch_css = require("./switch.css.cjs");
-const Switch = ({
-  checked,
-  className,
-  defaultChecked,
-  onChange,
-  ref,
-  ...restProps
-}) => {
-  const [isChecked, setIsChecked] = react.useState(
-    defaultChecked || checked || false
-  );
-  const baseClassName = theme.getComponentStyles("switch", { base: true });
-  const sliderClassName = theme.getComponentStyles("switch", { slider: true }, false);
-  react.useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
-    }
-  }, [checked]);
-  const toggle = react.useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = react.useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classnames.classnames(className, switch_css.container, baseClassName),
-      "data-checked": isChecked,
-      onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: switch_css.input,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
-    }
-  ) });
-};
-exports.Switch = Switch;

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

@@ -1,6 +0,0 @@
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type SwitchProps = {
-    onChange?: (value: boolean) => void;
-    ref?: React.Ref<HTMLInputElement>;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
-export declare const Switch: React.FC<SwitchProps>;

package/dist/components/form/Switch/Switch.js

@@ -1,73 +0,0 @@
-"use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { input, container } from "./switch.css.js";
-const Switch = ({
-  checked,
-  className,
-  defaultChecked,
-  onChange,
-  ref,
-  ...restProps
-}) => {
-  const [isChecked, setIsChecked] = useState(
-    defaultChecked || checked || false
-  );
-  const baseClassName = getComponentStyles("switch", { base: true });
-  const sliderClassName = getComponentStyles("switch", { slider: true }, false);
-  useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
-    }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classnames(className, container, baseClassName),
-      "data-checked": isChecked,
-      onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: input,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
-    }
-  ) });
-};
-export {
-  Switch
-};

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

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

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

@@ -1 +0,0 @@
-export { Switch, type SwitchProps } from './Switch';

package/dist/components/form/Switch/switch.css.cjs

@@ -1,27 +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/Switch/switch.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      cursor: "pointer",
-      userSelect: "none",
-      position: "relative"
-    }
-  }
-});
-const input = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      opacity: 0,
-      maxBlockSize: 0,
-      maxInlineSize: 0
-    }
-  }
-});
-fileScope.endFileScope();
-exports.container = container;
-exports.input = input;

package/dist/components/form/Switch/switch.css.d.ts

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

package/dist/components/form/Switch/switch.css.js

@@ -1,27 +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/Switch/switch.css.ts", "@blockle/blocks");
-const container = style({
-  "@layer": {
-    [blocksLayer]: {
-      cursor: "pointer",
-      userSelect: "none",
-      position: "relative"
-    }
-  }
-});
-const input = style({
-  "@layer": {
-    [blocksLayer]: {
-      opacity: 0,
-      maxBlockSize: 0,
-      maxInlineSize: 0
-    }
-  }
-});
-endFileScope();
-export {
-  container,
-  input
-};

package/dist/components/layout/Box/Box.cjs

@@ -1,28 +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 atomProps = require("../../../lib/utils/atom-props.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("div");
-const Box = ({
-  asChild,
-  className,
-  children,
-  ref,
-  ...restProps
-}) => {
-  const [atomsProps, otherProps] = atomProps.getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Template,
-    {
-      ref,
-      asChild,
-      className: classnames.classnames(className, sprinkles_css.atoms(atomsProps)),
-      ...otherProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
-    }
-  );
-};
-exports.Box = Box;

package/dist/components/layout/Box/Box.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { Atoms } from '../../../lib/css/atoms/atomTypes';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type BoxProps = {
-    asChild?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLDivElement>;
-    style?: React.CSSProperties;
-} & Atoms & HTMLElementProps<HTMLDivElement>;
-export declare const Box: React.FC<BoxProps>;

package/dist/components/layout/Box/Box.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
-import { getAtomsAndProps } from "../../../lib/utils/atom-props.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-const { Template, Slot } = createAsChildTemplate("div");
-const Box = ({
-  asChild,
-  className,
-  children,
-  ref,
-  ...restProps
-}) => {
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsx(
-    Template,
-    {
-      ref,
-      asChild,
-      className: classnames(className, atoms(atomsProps)),
-      ...otherProps,
-      children: /* @__PURE__ */ jsx(Slot, { children })
-    }
-  );
-};
-export {
-  Box
-};

package/dist/components/layout/Box/Box.spec.d.ts

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

package/dist/components/layout/Box/Box.stories.d.ts

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

package/dist/components/layout/Box/index.d.ts

@@ -1 +0,0 @@
-export { Box, type BoxProps } from './Box';

package/dist/components/layout/Inline/Inline.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const flexbox = require("../../../lib/css/flexbox/flexbox.cjs");
-const Box = require("../Box/Box.cjs");
-const Inline = ({
-  alignX,
-  alignY,
-  tag: Tag = "div",
-  children,
-  display = "flex",
-  spacing,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "row",
-      justifyContent: alignX ? flexbox.justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? flexbox.alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
-    }
-  );
-};
-exports.Inline = Inline;

package/dist/components/layout/Inline/Inline.d.ts

@@ -1,13 +0,0 @@
-import { Atoms, MarginAtoms, PaddingAtoms, ResponsiveDisplayFlex } from '../../../lib/css/atoms';
-import { AlignItemsMap, JustifyContentMap } from '../../../lib/css/flexbox/flexbox';
-export type InlineProps = {
-    alignX?: keyof JustifyContentMap;
-    alignY?: keyof AlignItemsMap;
-    tag?: 'div' | 'ul' | 'ol' | 'nav';
-    children: React.ReactNode;
-    className?: string;
-    display?: ResponsiveDisplayFlex;
-    spacing: Atoms['gap'];
-    style?: React.CSSProperties;
-} & MarginAtoms & PaddingAtoms;
-export declare const Inline: React.FC<InlineProps>;

package/dist/components/layout/Inline/Inline.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { alignItemsMap, justifyContentMap } from "../../../lib/css/flexbox/flexbox.js";
-import { Box } from "../Box/Box.js";
-const Inline = ({
-  alignX,
-  alignY,
-  tag: Tag = "div",
-  children,
-  display = "flex",
-  spacing,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "row",
-      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-export {
-  Inline
-};

package/dist/components/layout/Inline/Inline.stories.d.ts

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

package/dist/components/layout/Inline/index.d.ts

@@ -1 +0,0 @@
-export { Inline, type InlineProps } from './Inline';

package/dist/components/layout/Stack/Stack.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const flexbox = require("../../../lib/css/flexbox/flexbox.cjs");
-const Box = require("../Box/Box.cjs");
-const Stack = ({
-  tag: Tag = "div",
-  display = "flex",
-  children,
-  spacing,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
-    console.warn('Stack: "start" prop is only valid with tag="ol"');
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "column",
-      alignItems: alignX ? flexbox.alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
-    }
-  );
-};
-exports.Stack = Stack;

package/dist/components/layout/Stack/Stack.d.ts

@@ -1,17 +0,0 @@
-import { Atoms, MarginAtoms, PaddingAtoms, ResponsiveDisplayFlex } from '../../../lib/css/atoms';
-import { AlignItemsMap } from '../../../lib/css/flexbox/flexbox';
-export type StackProps = {
-    alignX?: keyof AlignItemsMap;
-    tag?: 'div' | 'section' | 'ul' | 'ol';
-    children: React.ReactNode;
-    className?: string;
-    display?: ResponsiveDisplayFlex;
-    spacing: Atoms['gap'];
-    style?: React.CSSProperties;
-    role?: React.AriaRole;
-    /**
-     * Start prop is only valid when tag="ol"
-     */
-    start?: number;
-} & MarginAtoms & PaddingAtoms;
-export declare const Stack: React.FC<StackProps>;

package/dist/components/layout/Stack/Stack.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { alignItemsMap } from "../../../lib/css/flexbox/flexbox.js";
-import { Box } from "../Box/Box.js";
-const Stack = ({
-  tag: Tag = "div",
-  display = "flex",
-  children,
-  spacing,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
-    console.warn('Stack: "start" prop is only valid with tag="ol"');
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "column",
-      alignItems: alignX ? alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-export {
-  Stack
-};

package/dist/components/layout/Stack/Stack.stories.d.ts

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

package/dist/components/layout/Stack/index.d.ts

@@ -1 +0,0 @@
-export { Stack, type StackProps } from './Stack';

package/dist/components/navigation/Link/Link.cjs

@@ -1,32 +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 classnames = require("../../../lib/utils/classnames.cjs");
-const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("a");
-const Link = ({
-  asChild,
-  children,
-  className,
-  ref,
-  underline,
-  variant,
-  ...restProps
-}) => {
-  const linkClassName = theme.getComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Template,
-    {
-      asChild,
-      ref,
-      className: classnames.classnames(className, linkClassName),
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
-    }
-  );
-};
-exports.Link = Link;

package/dist/components/navigation/Link/Link.d.ts

@@ -1,11 +0,0 @@
-import { MarginAtoms } from '../../../lib/css/atoms';
-import { LinkTheme } from '../../../lib/theme/componentThemes';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type LinkProps = {
-    asChild?: boolean;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLAnchorElement>;
-    underline?: LinkTheme['variants']['underline'];
-    variant?: LinkTheme['variants']['variant'];
-} & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
-export declare const Link: React.FC<LinkProps>;

package/dist/components/navigation/Link/Link.js

@@ -1,32 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-const { Template, Slot } = createAsChildTemplate("a");
-const Link = ({
-  asChild,
-  children,
-  className,
-  ref,
-  underline,
-  variant,
-  ...restProps
-}) => {
-  const linkClassName = getComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsx(
-    Template,
-    {
-      asChild,
-      ref,
-      className: classnames(className, linkClassName),
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Slot, { children })
-    }
-  );
-};
-export {
-  Link
-};

package/dist/components/navigation/Link/Link.stories.d.ts

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

package/dist/components/navigation/Link/index.d.ts

@@ -1 +0,0 @@
-export { Link, type LinkProps } from './Link';

package/dist/components/other/BlocksProvider/BlocksProvider.cjs

@@ -1,38 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const context = require("./context.cjs");
-const BlocksProvider = ({
-  children,
-  theme: theme$1,
-  className,
-  ...restProps
-}) => {
-  const [ariaHidden, setAriaHidden] = react.useState(false);
-  const contextValue = react.useMemo(
-    () => ({
-      setAriaHidden
-    }),
-    []
-  );
-  theme.setTheme(theme$1);
-  return /* @__PURE__ */ jsxRuntime.jsx(context.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classnames.classnames(
-        theme$1.vars,
-        sprinkles_css.atoms({ fontFamily: "primary" }),
-        className
-      ),
-      inert: ariaHidden ? true : void 0,
-      ...restProps,
-      children
-    }
-  ) });
-};
-exports.BlocksProvider = BlocksProvider;

package/dist/components/other/BlocksProvider/BlocksProvider.d.ts

@@ -1,8 +0,0 @@
-import { Theme } from '../../../lib/theme/makeTheme';
-export type BlocksProviderProps = {
-    children: React.ReactNode;
-    theme: Theme;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const BlocksProvider: React.FC<BlocksProviderProps>;

package/dist/components/other/BlocksProvider/BlocksProvider.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-import { setTheme } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { BlocksProviderContext } from "./context.js";
-const BlocksProvider = ({
-  children,
-  theme,
-  className,
-  ...restProps
-}) => {
-  const [ariaHidden, setAriaHidden] = useState(false);
-  const contextValue = useMemo(
-    () => ({
-      setAriaHidden
-    }),
-    []
-  );
-  setTheme(theme);
-  return /* @__PURE__ */ jsx(BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classnames(
-        theme.vars,
-        atoms({ fontFamily: "primary" }),
-        className
-      ),
-      inert: ariaHidden ? true : void 0,
-      ...restProps,
-      children
-    }
-  ) });
-};
-export {
-  BlocksProvider
-};