@blockle/blocks-react 2.5.0 → 2.5.1

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/package.json

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