@blockle/blocks-react 2.5.0 → 2.5.2

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

@@ -1,8 +1,12 @@
-import { Atoms } from '@blockle/blocks-core';
+import { Atoms, ComponentThemes, vars } from '@blockle/blocks-core';
 export type DividerProps = {
+    alignment?: 'start' | 'center' | 'end';
     className?: string;
-    color?: Atoms['backgroundColor'];
+    color?: keyof typeof vars.color;
+    children?: React.ReactNode;
+    size?: ComponentThemes['divider']['variants']['size'];
     style?: React.CSSProperties;
+    gap?: Atoms['gap'];
 };
 export declare const Divider: React.FC<DividerProps>;
 //# sourceMappingURL=Divider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,sBAAsB,CAAC;AAO9D,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiB1C,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,eAAe,EAEpB,IAAI,EACL,MAAM,sBAAsB,CAAC;AAa9B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,OAAO,IAAI,CAAC,KAAK,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8B1C,CAAC"}

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

@@ -1,25 +1,40 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { classnames } from "@blockle/blocks-core";
-import { useComponentStyleDefaultProps } from "../../../hooks/useComponentStyles/useComponentStyleDefaultProps.js";
+import { vars, classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
-import { divider } from "./divider.css.js";
+import { divider, dividerColorVar } from "./divider.css.js";
+function getVanillaVarName(variable) {
+  return (variable ?? "").replace(/var\((.+)\)/, "$1");
+}
+const dividerColorVarName = getVanillaVarName(dividerColorVar);
 const Divider = ({
+  alignment = "center",
   className,
   color,
+  children,
+  size,
+  gap = 2,
   ...restProps
 }) => {
-  const dividerClass = useComponentStyles("divider", { root: true });
-  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  const dividerClass = useComponentStyles("divider", {
+    root: true,
+    variants: { size }
+  });
   return /* @__PURE__ */ jsx(
     Box,
     {
       role: "separator",
+      "aria-orientation": "horizontal",
       inlineSize: "full",
-      backgroundColor: color ?? dividerDefaults.color,
+      gap,
       className: classnames(className, dividerClass, divider),
-      ...restProps
+      "data-alignment": alignment,
+      style: {
+        [dividerColorVarName]: color ? vars.color[color] : "currentColor"
+      },
+      ...restProps,
+      children
     }
   );
 };

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

@@ -1,2 +1,3 @@
+export declare const dividerColorVar: `var(--${string})`;
 export declare const divider: string;
 //# sourceMappingURL=divider.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"divider.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/divider.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAOlB,CAAC"}
+{"version":3,"file":"divider.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/divider.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,oBAAc,CAAC;AAE3C,eAAO,MAAM,OAAO,QAiClB,CAAC"}

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

@@ -1,16 +1,44 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { layers } from "@blockle/blocks-core";
-import { style } from "@vanilla-extract/css";
+import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks-react");
+const dividerColorVar = createVar();
 const divider = style({
   "@layer": {
     [layers.molecule]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
       clear: "both",
-      blockSize: "1px"
+      minBlockSize: "1px",
+      ":empty": {
+        gap: 0
+      },
+      ":before": {
+        flex: 1,
+        content: '""',
+        display: "block",
+        backgroundColor: dividerColorVar
+      },
+      ":after": {
+        flex: 1,
+        content: '""',
+        display: "block",
+        backgroundColor: dividerColorVar
+      },
+      selectors: {
+        '&[data-alignment="start"]:before': {
+          maxInlineSize: "3rem"
+        },
+        '&[data-alignment="end"]:after': {
+          maxInlineSize: "3rem"
+        }
+      }
     }
   }
 });
 endFileScope();
 export {
-  divider
+  divider,
+  dividerColorVar
 };

package/dist/components/display/Icon/exampleIconMask.d.ts

@@ -0,0 +1,8 @@
+import { HeroIconName } from './heroicons.js';
+/**
+ * EXPORTED ONLY FOR DEMO PURPOSES
+ */
+export declare const HeroIcon: ({ name, ...props }: Omit<import('./IconMask.js').IconMaskProps, "src"> & {
+    name: HeroIconName;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=exampleIconMask.d.ts.map

package/dist/components/display/Icon/exampleIconMask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exampleIconMask.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/exampleIconMask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAOnD;;GAEG;AACH,eAAO,MAAM,QAAQ;;6CAA6B,CAAC"}

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

@@ -1,6 +1,6 @@
 import { TextInputProps } from '../TextInput/TextInput.js';
 export type NumericInputProps = {
-    value: number | string;
+    value?: number | string;
     min?: number;
     max?: number;
     step?: number;

package/dist/components/form/NumericInput/NumericInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}

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

@@ -13,8 +13,8 @@ export type SliderProps = {
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
     'aria-label'?: string;
-    size: SliderTheme['variants']['size'];
-    colorScheme: SliderTheme['variants']['colorScheme'];
+    size?: SliderTheme['variants']['size'];
+    colorScheme?: SliderTheme['variants']['colorScheme'];
     disabled?: boolean;
 };
 export declare const Slider: React.FC<SliderProps>;

package/dist/components/form/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}

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

@@ -1,7 +1,7 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
 export type TextareaProps = {
-    value: string;
-    ref: React.RefObject<HTMLTextAreaElement>;
+    value?: string;
+    ref?: React.RefObject<HTMLTextAreaElement>;
 } & HTMLElementProps<HTMLTextAreaElement>;
 export declare const Textarea: React.FC<TextareaProps>;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/components/form/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMzE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;CAE3C,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsB5C,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMzE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;CAE5C,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsB5C,CAAC"}

package/dist/components/typography/Heading/Heading.d.ts

@@ -2,7 +2,7 @@ import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle
 export type HeadingProps = {
     children: React.ReactNode;
     className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
 } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 export declare const Heading: React.FC<HeadingProps>;
 //# sourceMappingURL=Heading.d.ts.map

package/dist/components/typography/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC9B,GAAG,SAAS,GACX,WAAW,GACX,YAAY,GACZ,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiB1C,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B,GAAG,SAAS,GACX,WAAW,GACX,YAAY,GACZ,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiB1C,CAAC"}

package/dist/components/typography/Text/Text.d.ts

@@ -6,7 +6,7 @@ export type TextProps<Tag extends Tags = 'span'> = {
     children: React.ReactNode;
     ref?: React.Ref<HTMLElementTagNameMap[Tag]>;
     tag?: Tag;
-} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'>;
 export declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/typography/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,IAAI,GACL,KAAK,GACL,IAAI,GACJ,KAAK,GACL,OAAO,GACP,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,GAAG,SAAS,GACX,WAAW,GACX,YAAY,GACZ,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,0DAO3C,SAAS,CAAC,CAAC,CAAC,4CAad,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,IAAI,GACL,KAAK,GACL,IAAI,GACJ,KAAK,GACL,OAAO,GACP,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,GAAG,SAAS,GACX,WAAW,GACX,YAAY,GACZ,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,0DAO3C,SAAS,CAAC,CAAC,CAAC,4CAad,CAAC"}

package/dist/hooks/useComponentStyles/useComponentStyles.d.ts

@@ -1,3 +1,3 @@
 import { ComponentThemesProps } from '@blockle/blocks-core';
-export declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
+export declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, styleProps: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 //# sourceMappingURL=useComponentStyles.d.ts.map

package/dist/hooks/useComponentStyles/useComponentStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentStyles.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComponentStyles/useComponentStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAO9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,oBAAoB,EACrE,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAC9B,kBAAkB,UAAO,GACxB,MAAM,CAkGR"}
+{"version":3,"file":"useComponentStyles.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComponentStyles/useComponentStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,sBAAsB,CAAC;AAI9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,oBAAoB,EACrE,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC,EACnC,kBAAkB,UAAO,GACxB,MAAM,CAIR"}

package/dist/hooks/useComponentStyles/useComponentStyles.js

@@ -1,73 +1,9 @@
 "use client";
+import { getComponentStyles } from "@blockle/blocks-core";
 import { useTheme } from "../useTheme/useTheme.js";
-function useComponentStyles(name, props, useDefaultVariants = true) {
-  const { components } = useTheme();
-  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: type assertion
-        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 useComponentStyles(name, styleProps, useDefaultVariants = true) {
+  const theme = useTheme();
+  return getComponentStyles(theme, name, styleProps, useDefaultVariants);
 }
 export {
   useComponentStyles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {