@zag-js/color-picker 1.17.3 → 1.18.0

package/dist/index.d.mts

@@ -141,6 +141,10 @@ interface ColorPickerProps extends CommonProperties, DirectionProperty, Interact
      * @default true
      */
     openAutoFocus?: boolean | undefined;
+    /**
+     * Whether to render the color picker inline
+     */
+    inline?: boolean | undefined;
 }
 type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
 type ColorPickerSchema = {
@@ -224,6 +228,10 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
      * Whether the color picker is open
      */
     open: boolean;
+    /**
+     * Whether the color picker is rendered inline
+     */
+    inline: boolean;
     /**
      * The current color value (as a string)
      */

package/dist/index.d.ts

@@ -141,6 +141,10 @@ interface ColorPickerProps extends CommonProperties, DirectionProperty, Interact
      * @default true
      */
     openAutoFocus?: boolean | undefined;
+    /**
+     * Whether to render the color picker inline
+     */
+    inline?: boolean | undefined;
 }
 type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
 type ColorPickerSchema = {
@@ -224,6 +228,10 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
      * Whether the color picker is open
      */
     open: boolean;
+    /**
+     * Whether the color picker is rendered inline
+     */
+    inline: boolean;
     /**
      * The current color value (as a string)
      */

package/dist/index.js

@@ -229,7 +229,9 @@ function connect(service, normalize) {
     open,
     valueAsString,
     value,
+    inline: !!prop("inline"),
     setOpen(nextOpen) {
+      if (prop("inline")) return;
       const open2 = state.hasTag("open");
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
@@ -817,6 +819,17 @@ var parse = (colorString) => {
   return colorUtils.parseColor(colorString);
 };
 
+// src/utils/is-valid-hex.ts
+var HEX_REGEX = /^[0-9a-fA-F]{3,8}$/;
+function isValidHex(value) {
+  return HEX_REGEX.test(value);
+}
+function prefixHex(value) {
+  if (value.startsWith("#")) return value;
+  if (isValidHex(value)) return `#${value}`;
+  return value;
+}
+
 // src/color-picker.machine.ts
 var { and } = core.createGuards();
 var machine = core.createMachine({
@@ -834,7 +847,7 @@ var machine = core.createMachine({
     };
   },
   initialState({ prop }) {
-    const open = prop("open") || prop("defaultOpen");
+    const open = prop("open") || prop("defaultOpen") || prop("inline");
     return open ? "open" : "idle";
   },
   context({ prop, bindable, getContext }) {
@@ -1167,11 +1180,12 @@ var machine = core.createMachine({
   implementations: {
     guards: {
       closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
-      isOpenControlled: ({ prop }) => prop("open") != null,
+      isOpenControlled: ({ prop }) => prop("open") != null || !!prop("inline"),
       shouldRestoreFocus: ({ context }) => !!context.get("restoreFocus")
     },
     effects: {
       trackPositioning({ context, prop, scope }) {
+        if (prop("inline")) return;
         if (!context.get("currentPlacement")) {
           context.set("currentPlacement", prop("positioning")?.placement);
         }
@@ -1186,6 +1200,7 @@ var machine = core.createMachine({
         });
       },
       trackDismissableElement({ context, scope, prop, send }) {
+        if (prop("inline")) return;
         const getContentEl2 = () => getContentEl(scope);
         return dismissable.trackDismissableElement(getContentEl2, {
           exclude: getTriggerEl(scope),
@@ -1303,7 +1318,10 @@ var machine = core.createMachine({
           color = context.get("value").withChannelValue("alpha", valueAsNumber);
         } else if (isTextField) {
           color = utils.tryCatch(
-            () => parse(value).withChannelValue("alpha", currentAlpha),
+            () => {
+              const parseValue = channel === "hex" ? prefixHex(value) : value;
+              return parse(parseValue).withChannelValue("alpha", currentAlpha);
+            },
             () => context.get("value")
           );
         } else {
@@ -1387,9 +1405,11 @@ var machine = core.createMachine({
         syncFormatSelect(scope, context.get("format"));
       },
       invokeOnOpen({ prop }) {
+        if (prop("inline")) return;
         prop("onOpenChange")?.({ open: true });
       },
       invokeOnClose({ prop }) {
+        if (prop("inline")) return;
         prop("onOpenChange")?.({ open: false });
       },
       toggleVisibility({ prop, event, send }) {
@@ -1422,6 +1442,7 @@ var props = types.createProps()([
   "id",
   "ids",
   "initialFocusEl",
+  "inline",
   "name",
   "positioning",
   "onFocusOutside",

package/dist/index.mjs

@@ -227,7 +227,9 @@ function connect(service, normalize) {
     open,
     valueAsString,
     value,
+    inline: !!prop("inline"),
     setOpen(nextOpen) {
+      if (prop("inline")) return;
       const open2 = state.hasTag("open");
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
@@ -815,6 +817,17 @@ var parse = (colorString) => {
   return parseColor(colorString);
 };
 
+// src/utils/is-valid-hex.ts
+var HEX_REGEX = /^[0-9a-fA-F]{3,8}$/;
+function isValidHex(value) {
+  return HEX_REGEX.test(value);
+}
+function prefixHex(value) {
+  if (value.startsWith("#")) return value;
+  if (isValidHex(value)) return `#${value}`;
+  return value;
+}
+
 // src/color-picker.machine.ts
 var { and } = createGuards();
 var machine = createMachine({
@@ -832,7 +845,7 @@ var machine = createMachine({
     };
   },
   initialState({ prop }) {
-    const open = prop("open") || prop("defaultOpen");
+    const open = prop("open") || prop("defaultOpen") || prop("inline");
     return open ? "open" : "idle";
   },
   context({ prop, bindable, getContext }) {
@@ -1165,11 +1178,12 @@ var machine = createMachine({
   implementations: {
     guards: {
       closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
-      isOpenControlled: ({ prop }) => prop("open") != null,
+      isOpenControlled: ({ prop }) => prop("open") != null || !!prop("inline"),
       shouldRestoreFocus: ({ context }) => !!context.get("restoreFocus")
     },
     effects: {
       trackPositioning({ context, prop, scope }) {
+        if (prop("inline")) return;
         if (!context.get("currentPlacement")) {
           context.set("currentPlacement", prop("positioning")?.placement);
         }
@@ -1184,6 +1198,7 @@ var machine = createMachine({
         });
       },
       trackDismissableElement({ context, scope, prop, send }) {
+        if (prop("inline")) return;
         const getContentEl2 = () => getContentEl(scope);
         return trackDismissableElement(getContentEl2, {
           exclude: getTriggerEl(scope),
@@ -1301,7 +1316,10 @@ var machine = createMachine({
           color = context.get("value").withChannelValue("alpha", valueAsNumber);
         } else if (isTextField) {
           color = tryCatch(
-            () => parse(value).withChannelValue("alpha", currentAlpha),
+            () => {
+              const parseValue = channel === "hex" ? prefixHex(value) : value;
+              return parse(parseValue).withChannelValue("alpha", currentAlpha);
+            },
             () => context.get("value")
           );
         } else {
@@ -1385,9 +1403,11 @@ var machine = createMachine({
         syncFormatSelect(scope, context.get("format"));
       },
       invokeOnOpen({ prop }) {
+        if (prop("inline")) return;
         prop("onOpenChange")?.({ open: true });
       },
       invokeOnClose({ prop }) {
+        if (prop("inline")) return;
         prop("onOpenChange")?.({ open: false });
       },
       toggleVisibility({ prop, event, send }) {
@@ -1420,6 +1440,7 @@ var props = createProps()([
   "id",
   "ids",
   "initialFocusEl",
+  "inline",
   "name",
   "positioning",
   "onFocusOutside",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.17.3",
+  "version": "1.18.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "1.17.3",
-    "@zag-js/anatomy": "1.17.3",
-    "@zag-js/dom-query": "1.17.3",
-    "@zag-js/dismissable": "1.17.3",
-    "@zag-js/utils": "1.17.3",
-    "@zag-js/color-utils": "1.17.3",
-    "@zag-js/popper": "1.17.3",
-    "@zag-js/types": "1.17.3"
+    "@zag-js/core": "1.18.0",
+    "@zag-js/anatomy": "1.18.0",
+    "@zag-js/dom-query": "1.18.0",
+    "@zag-js/dismissable": "1.18.0",
+    "@zag-js/utils": "1.18.0",
+    "@zag-js/color-utils": "1.18.0",
+    "@zag-js/popper": "1.18.0",
+    "@zag-js/types": "1.18.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"