@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/editable/Editable.cjs

@@ -62,6 +62,9 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
     defaultValue = "",
     placeholder = "Enter text...",
     submitOnBlur = true,
+    activationMode = "click",
+    disabled = false,
+    invalid = false,
     previewClassName,
     inputClassName,
     onChange,
@@ -99,6 +102,9 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
       isEditing,
       value,
       placeholder,
+      activationMode,
+      disabled,
+      invalid,
       setValue,
       setEditing,
       submitOnBlur,
@@ -107,15 +113,21 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
       handleCancel,
       handleSubmit
     }),
-    [isEditing, value, placeholder, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit]
+    [isEditing, value, placeholder, activationMode, disabled, invalid, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
       ...restProps,
       ref: forwardedRef,
-      className: (0, import_classnames.default)("dsx-editable", className),
+      className: (0, import_classnames.default)(
+        "dsx-editable",
+        disabled && "dsx-editable--disabled",
+        invalid && "dsx-editable--invalid",
+        className
+      ),
       "data-editing": isEditing ? "true" : void 0,
+      "data-disabled": disabled || void 0,
       "data-radius": radius,
       "data-size": size,
       "data-slot": "editable",
@@ -129,6 +141,7 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
               type: "button",
               className: "dsx-editable__action dsx-editable__action--submit",
               onClick: handleSubmit,
+              disabled,
               "aria-label": "Save changes",
               "data-slot": "editable-submit",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 14 })
@@ -140,6 +153,7 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
               type: "button",
               className: "dsx-editable__action dsx-editable__action--cancel",
               onClick: handleCancel,
+              disabled,
               "aria-label": "Cancel editing",
               "data-slot": "editable-cancel",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 14 })
@@ -150,7 +164,8 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
           {
             type: "button",
             className: "dsx-editable__action dsx-editable__action--edit",
-            onClick: () => setIsEditing(true),
+            onClick: () => !disabled && setEditing(true),
+            disabled,
             "aria-label": "Edit text",
             "data-slot": "editable-edit",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Pencil, { size: 14 })
@@ -162,8 +177,19 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
 });
 EditableRoot.displayName = "Editable";
 const EditablePreview = React.forwardRef((props, forwardedRef) => {
-  const { className, ...restProps } = props;
-  const { isEditing, value, placeholder, setEditing, previewClassName } = useEditableContext();
+  const { className, onClick, onDoubleClick, onFocus, onKeyDown, ...restProps } = props;
+  const { isEditing, value, placeholder, activationMode, disabled, setEditing, previewClassName } = useEditableContext();
+  const activate = React.useCallback(() => {
+    if (!disabled) setEditing(true);
+  }, [disabled, setEditing]);
+  const handleKeyDown = React.useCallback((e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      activate();
+    }
+  }, [activate, onKeyDown]);
   if (isEditing) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
@@ -171,7 +197,22 @@ const EditablePreview = React.forwardRef((props, forwardedRef) => {
       ...restProps,
       ref: forwardedRef,
       className: (0, import_classnames.default)("dsx-editable__preview", previewClassName, className),
-      onClick: () => setEditing(true),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (activationMode === "click") activate();
+      },
+      onDoubleClick: (e) => {
+        onDoubleClick?.(e);
+        if (activationMode === "dblclick") activate();
+      },
+      onFocus: (e) => {
+        onFocus?.(e);
+        if (activationMode === "focus") activate();
+      },
+      onKeyDown: handleKeyDown,
       "data-slot": "editable-preview",
       children: value || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-editable__placeholder", children: placeholder })
     }
@@ -180,7 +221,7 @@ const EditablePreview = React.forwardRef((props, forwardedRef) => {
 EditablePreview.displayName = "EditablePreview";
 const EditableInput = React.forwardRef((props, forwardedRef) => {
   const { className, onBlur, ...restProps } = props;
-  const { isEditing, value, setValue, setEditing, submitOnBlur, inputClassName, handleCancel, handleSubmit } = useEditableContext();
+  const { isEditing, value, setValue, setEditing, submitOnBlur, disabled, invalid, inputClassName, handleCancel, handleSubmit } = useEditableContext();
   const inputRef = React.useRef(null);
   React.useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -227,6 +268,8 @@ const EditableInput = React.forwardRef((props, forwardedRef) => {
       onChange: (e) => setValue(e.target.value),
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
+      disabled,
+      "aria-invalid": invalid || void 0,
       className: (0, import_classnames.default)("dsx-editable__input", inputClassName, className),
       "data-slot": "editable-input"
     }

package/dist/components/editable/Editable.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editable/Editable.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Pencil, Check, X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { editablePropDefs } from './editable.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype EditableOwnProps = GetPropDefTypes<typeof editablePropDefs> & {\n  value?: string\n  onChange?: (value: string) => void\n  onSubmit?: (value: string) => void\n  onCancel?: () => void\n}\n\ninterface EditableProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'onSubmit'>,\n    EditableOwnProps {}\n\ntype EditableContextValue = {\n  isEditing: boolean\n  value: string\n  placeholder: string\n  setValue: (value: string) => void\n  setEditing: (editing: boolean) => void\n  submitOnBlur: boolean\n  previewClassName?: string\n  inputClassName?: string\n  handleCancel: () => void\n  handleSubmit: () => void\n}\n\nconst EditableContext = React.createContext<EditableContextValue | null>(null)\n\nfunction useEditableContext() {\n  const context = React.useContext(EditableContext)\n  if (!context) {\n    throw new Error('Editable compound components must be used within Editable')\n  }\n  return context\n}\n\nconst EditableRoot = React.forwardRef<HTMLDivElement, EditableProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    radius,\n    size = 'md',\n    variant = 'default',\n    value: controlledValue,\n    defaultValue = '',\n    placeholder = 'Enter text...',\n    submitOnBlur = true,\n    previewClassName,\n    inputClassName,\n    onChange,\n    onSubmit,\n    onCancel,\n    ...restProps\n  } = extractProps(props, editablePropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const setEditing = React.useCallback((editing: boolean) => {\n    setIsEditing(editing)\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    setIsEditing(false)\n    onSubmit?.(value)\n  }, [value, onSubmit])\n\n  const handleCancel = React.useCallback(() => {\n    if (!isControlled) {\n      setUncontrolledValue(defaultValue)\n    }\n    setIsEditing(false)\n    onCancel?.()\n  }, [isControlled, defaultValue, onCancel])\n\n  const contextValue = React.useMemo<EditableContextValue>(\n    () => ({\n      isEditing,\n      value,\n      placeholder,\n      setValue,\n      setEditing,\n      submitOnBlur,\n      previewClassName,\n      inputClassName,\n      handleCancel,\n      handleSubmit,\n    }),\n    [isEditing, value, placeholder, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit],\n  )\n\n  return (\n    <EditableContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-editable', className)}\n        data-editing={isEditing ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-slot=\"editable\"\n        data-variant={variant}\n      >\n        {children}\n        <div className=\"dsx-editable__actions\" data-slot=\"editable-actions\">\n          {isEditing ? (\n            <>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--submit\"\n                onClick={handleSubmit}\n                aria-label=\"Save changes\"\n                data-slot=\"editable-submit\"\n              >\n                <Check size={14} />\n              </button>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--cancel\"\n                onClick={handleCancel}\n                aria-label=\"Cancel editing\"\n                data-slot=\"editable-cancel\"\n              >\n                <X size={14} />\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"dsx-editable__action dsx-editable__action--edit\"\n              onClick={() => setIsEditing(true)}\n              aria-label=\"Edit text\"\n              data-slot=\"editable-edit\"\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n        </div>\n      </Comp>\n    </EditableContext.Provider>\n  )\n})\nEditableRoot.displayName = 'Editable'\n\ninterface EditablePreviewProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst EditablePreview = React.forwardRef<HTMLSpanElement, EditablePreviewProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { isEditing, value, placeholder, setEditing, previewClassName } = useEditableContext()\n\n  if (isEditing) return null\n\n  return (\n    <span\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-editable__preview', previewClassName, className)}\n      onClick={() => setEditing(true)}\n      data-slot=\"editable-preview\"\n    >\n      {value || <span className=\"dsx-editable__placeholder\">{placeholder}</span>}\n    </span>\n  )\n})\nEditablePreview.displayName = 'EditablePreview'\n\ninterface EditableInputProps extends React.ComponentPropsWithoutRef<'input'> {}\n\nconst EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((props, forwardedRef) => {\n  const { className, onBlur, ...restProps } = props\n  const { isEditing, value, setValue, setEditing, submitOnBlur, inputClassName, handleCancel, handleSubmit } = useEditableContext()\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus()\n      inputRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e)\n      if (submitOnBlur) {\n        setEditing(false)\n      }\n    },\n    [onBlur, submitOnBlur, setEditing],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        handleSubmit()\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSubmit, handleCancel],\n  )\n\n  if (!isEditing) return null\n\n  return (\n    <input\n      {...restProps}\n      ref={(node) => {\n        inputRef.current = node\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else if (forwardedRef) {\n          forwardedRef.current = node\n        }\n      }}\n      value={value}\n      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      className={classNames('dsx-editable__input', inputClassName, className)}\n      data-slot=\"editable-input\"\n    />\n  )\n})\nEditableInput.displayName = 'EditableInput'\n\nconst Editable: typeof EditableRoot & {\n  Preview: typeof EditablePreview\n  Input: typeof EditableInput\n} = Object.assign(EditableRoot, {\n  Preview: EditablePreview,\n  Input: EditableInput,\n})\n\nexport { Editable, EditableInput, EditablePreview, EditableRoot }\nexport type { EditableInputProps, EditableOwnProps, EditablePreviewProps, EditableProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Pencil, Check, X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { editablePropDefs } from './editable.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype EditableOwnProps = GetPropDefTypes<typeof editablePropDefs> & {\n  value?: string\n  onChange?: (value: string) => void\n  onSubmit?: (value: string) => void\n  onCancel?: () => void\n}\n\ninterface EditableProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'onSubmit'>,\n    EditableOwnProps {}\n\ntype EditableContextValue = {\n  isEditing: boolean\n  value: string\n  placeholder: string\n  activationMode: 'click' | 'dblclick' | 'focus'\n  disabled: boolean\n  invalid: boolean\n  setValue: (value: string) => void\n  setEditing: (editing: boolean) => void\n  submitOnBlur: boolean\n  previewClassName?: string\n  inputClassName?: string\n  handleCancel: () => void\n  handleSubmit: () => void\n}\n\nconst EditableContext = React.createContext<EditableContextValue | null>(null)\n\nfunction useEditableContext() {\n  const context = React.useContext(EditableContext)\n  if (!context) {\n    throw new Error('Editable compound components must be used within Editable')\n  }\n  return context\n}\n\nconst EditableRoot = React.forwardRef<HTMLDivElement, EditableProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    radius,\n    size = 'md',\n    variant = 'default',\n    value: controlledValue,\n    defaultValue = '',\n    placeholder = 'Enter text...',\n    submitOnBlur = true,\n    activationMode = 'click',\n    disabled = false,\n    invalid = false,\n    previewClassName,\n    inputClassName,\n    onChange,\n    onSubmit,\n    onCancel,\n    ...restProps\n  } = extractProps(props, editablePropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const setEditing = React.useCallback((editing: boolean) => {\n    setIsEditing(editing)\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    setIsEditing(false)\n    onSubmit?.(value)\n  }, [value, onSubmit])\n\n  const handleCancel = React.useCallback(() => {\n    if (!isControlled) {\n      setUncontrolledValue(defaultValue)\n    }\n    setIsEditing(false)\n    onCancel?.()\n  }, [isControlled, defaultValue, onCancel])\n\n  const contextValue = React.useMemo<EditableContextValue>(\n    () => ({\n      isEditing,\n      value,\n      placeholder,\n      activationMode,\n      disabled,\n      invalid,\n      setValue,\n      setEditing,\n      submitOnBlur,\n      previewClassName,\n      inputClassName,\n      handleCancel,\n      handleSubmit,\n    }),\n    [isEditing, value, placeholder, activationMode, disabled, invalid, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit],\n  )\n\n  return (\n    <EditableContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-editable',\n          disabled && 'dsx-editable--disabled',\n          invalid && 'dsx-editable--invalid',\n          className,\n        )}\n        data-editing={isEditing ? 'true' : undefined}\n        data-disabled={disabled || undefined}\n        data-radius={radius}\n        data-size={size}\n        data-slot=\"editable\"\n        data-variant={variant}\n      >\n        {children}\n        <div className=\"dsx-editable__actions\" data-slot=\"editable-actions\">\n          {isEditing ? (\n            <>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--submit\"\n                onClick={handleSubmit}\n                disabled={disabled}\n                aria-label=\"Save changes\"\n                data-slot=\"editable-submit\"\n              >\n                <Check size={14} />\n              </button>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--cancel\"\n                onClick={handleCancel}\n                disabled={disabled}\n                aria-label=\"Cancel editing\"\n                data-slot=\"editable-cancel\"\n              >\n                <X size={14} />\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"dsx-editable__action dsx-editable__action--edit\"\n              onClick={() => !disabled && setEditing(true)}\n              disabled={disabled}\n              aria-label=\"Edit text\"\n              data-slot=\"editable-edit\"\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n        </div>\n      </Comp>\n    </EditableContext.Provider>\n  )\n})\nEditableRoot.displayName = 'Editable'\n\ninterface EditablePreviewProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst EditablePreview = React.forwardRef<HTMLSpanElement, EditablePreviewProps>((props, forwardedRef) => {\n  const { className, onClick, onDoubleClick, onFocus, onKeyDown, ...restProps } = props\n  const { isEditing, value, placeholder, activationMode, disabled, setEditing, previewClassName } = useEditableContext()\n\n  const activate = React.useCallback(() => {\n    if (!disabled) setEditing(true)\n  }, [disabled, setEditing])\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(e)\n    if (e.defaultPrevented) return\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      activate()\n    }\n  }, [activate, onKeyDown])\n\n  if (isEditing) return null\n\n  return (\n    <span\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-editable__preview', previewClassName, className)}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        onClick?.(e)\n        if (activationMode === 'click') activate()\n      }}\n      onDoubleClick={(e) => {\n        onDoubleClick?.(e)\n        if (activationMode === 'dblclick') activate()\n      }}\n      onFocus={(e) => {\n        onFocus?.(e)\n        if (activationMode === 'focus') activate()\n      }}\n      onKeyDown={handleKeyDown}\n      data-slot=\"editable-preview\"\n    >\n      {value || <span className=\"dsx-editable__placeholder\">{placeholder}</span>}\n    </span>\n  )\n})\nEditablePreview.displayName = 'EditablePreview'\n\ninterface EditableInputProps extends React.ComponentPropsWithoutRef<'input'> {}\n\nconst EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((props, forwardedRef) => {\n  const { className, onBlur, ...restProps } = props\n  const { isEditing, value, setValue, setEditing, submitOnBlur, disabled, invalid, inputClassName, handleCancel, handleSubmit } = useEditableContext()\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus()\n      inputRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e)\n      if (submitOnBlur) {\n        setEditing(false)\n      }\n    },\n    [onBlur, submitOnBlur, setEditing],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        handleSubmit()\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSubmit, handleCancel],\n  )\n\n  if (!isEditing) return null\n\n  return (\n    <input\n      {...restProps}\n      ref={(node) => {\n        inputRef.current = node\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else if (forwardedRef) {\n          forwardedRef.current = node\n        }\n      }}\n      value={value}\n      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n      className={classNames('dsx-editable__input', inputClassName, className)}\n      data-slot=\"editable-input\"\n    />\n  )\n})\nEditableInput.displayName = 'EditableInput'\n\nconst Editable: typeof EditableRoot & {\n  Preview: typeof EditablePreview\n  Input: typeof EditableInput\n} = Object.assign(EditableRoot, {\n  Preview: EditablePreview,\n  Input: EditableInput,\n})\n\nexport { Editable, EditableInput, EditablePreview, EditableRoot }\nexport type { EditableInputProps, EditableOwnProps, EditablePreviewProps, EditableProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/editable/Editable.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.d.cts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AAyBvB,QAAA,MAAM,YAAY,sFAoHhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FAiBnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FAyDjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"Editable.d.cts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AA4BvB,QAAA,MAAM,YAAY,sFAmIhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FA6CnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FA2DjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/editable/Editable.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.d.mts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AAyBvB,QAAA,MAAM,YAAY,sFAoHhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FAiBnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FAyDjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"Editable.d.mts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AA4BvB,QAAA,MAAM,YAAY,sFAmIhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FA6CnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FA2DjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/editable/Editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.d.ts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AAyBvB,QAAA,MAAM,YAAY,sFAoHhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FAiBnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FAyDjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"Editable.d.ts","sourceRoot":"","sources":["../../../src/components/editable/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC,EAC3F,gBAAgB;CAAG;AA4BvB,QAAA,MAAM,YAAY,sFAmIhB,CAAA;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAEhF,QAAA,MAAM,eAAe,8FA6CnB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE/E,QAAA,MAAM,aAAa,6FA2DjB,CAAA;AAGF,QAAA,MAAM,QAAQ,EAAE,OAAO,YAAY,GAAG;IACpC,OAAO,EAAE,OAAO,eAAe,CAAA;IAC/B,KAAK,EAAE,OAAO,aAAa,CAAA;CAI3B,CAAA;AAEF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AACjE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/editable/Editable.js

@@ -26,6 +26,9 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
     defaultValue = "",
     placeholder = "Enter text...",
     submitOnBlur = true,
+    activationMode = "click",
+    disabled = false,
+    invalid = false,
     previewClassName,
     inputClassName,
     onChange,
@@ -63,6 +66,9 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
       isEditing,
       value,
       placeholder,
+      activationMode,
+      disabled,
+      invalid,
       setValue,
       setEditing,
       submitOnBlur,
@@ -71,15 +77,21 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
       handleCancel,
       handleSubmit
     }),
-    [isEditing, value, placeholder, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit]
+    [isEditing, value, placeholder, activationMode, disabled, invalid, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit]
   );
   return /* @__PURE__ */ jsx(EditableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     Comp,
     {
       ...restProps,
       ref: forwardedRef,
-      className: classNames("dsx-editable", className),
+      className: classNames(
+        "dsx-editable",
+        disabled && "dsx-editable--disabled",
+        invalid && "dsx-editable--invalid",
+        className
+      ),
       "data-editing": isEditing ? "true" : void 0,
+      "data-disabled": disabled || void 0,
       "data-radius": radius,
       "data-size": size,
       "data-slot": "editable",
@@ -93,6 +105,7 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
               type: "button",
               className: "dsx-editable__action dsx-editable__action--submit",
               onClick: handleSubmit,
+              disabled,
               "aria-label": "Save changes",
               "data-slot": "editable-submit",
               children: /* @__PURE__ */ jsx(Check, { size: 14 })
@@ -104,6 +117,7 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
               type: "button",
               className: "dsx-editable__action dsx-editable__action--cancel",
               onClick: handleCancel,
+              disabled,
               "aria-label": "Cancel editing",
               "data-slot": "editable-cancel",
               children: /* @__PURE__ */ jsx(X, { size: 14 })
@@ -114,7 +128,8 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
           {
             type: "button",
             className: "dsx-editable__action dsx-editable__action--edit",
-            onClick: () => setIsEditing(true),
+            onClick: () => !disabled && setEditing(true),
+            disabled,
             "aria-label": "Edit text",
             "data-slot": "editable-edit",
             children: /* @__PURE__ */ jsx(Pencil, { size: 14 })
@@ -126,8 +141,19 @@ const EditableRoot = React.forwardRef((props, forwardedRef) => {
 });
 EditableRoot.displayName = "Editable";
 const EditablePreview = React.forwardRef((props, forwardedRef) => {
-  const { className, ...restProps } = props;
-  const { isEditing, value, placeholder, setEditing, previewClassName } = useEditableContext();
+  const { className, onClick, onDoubleClick, onFocus, onKeyDown, ...restProps } = props;
+  const { isEditing, value, placeholder, activationMode, disabled, setEditing, previewClassName } = useEditableContext();
+  const activate = React.useCallback(() => {
+    if (!disabled) setEditing(true);
+  }, [disabled, setEditing]);
+  const handleKeyDown = React.useCallback((e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      activate();
+    }
+  }, [activate, onKeyDown]);
   if (isEditing) return null;
   return /* @__PURE__ */ jsx(
     "span",
@@ -135,7 +161,22 @@ const EditablePreview = React.forwardRef((props, forwardedRef) => {
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-editable__preview", previewClassName, className),
-      onClick: () => setEditing(true),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (activationMode === "click") activate();
+      },
+      onDoubleClick: (e) => {
+        onDoubleClick?.(e);
+        if (activationMode === "dblclick") activate();
+      },
+      onFocus: (e) => {
+        onFocus?.(e);
+        if (activationMode === "focus") activate();
+      },
+      onKeyDown: handleKeyDown,
       "data-slot": "editable-preview",
       children: value || /* @__PURE__ */ jsx("span", { className: "dsx-editable__placeholder", children: placeholder })
     }
@@ -144,7 +185,7 @@ const EditablePreview = React.forwardRef((props, forwardedRef) => {
 EditablePreview.displayName = "EditablePreview";
 const EditableInput = React.forwardRef((props, forwardedRef) => {
   const { className, onBlur, ...restProps } = props;
-  const { isEditing, value, setValue, setEditing, submitOnBlur, inputClassName, handleCancel, handleSubmit } = useEditableContext();
+  const { isEditing, value, setValue, setEditing, submitOnBlur, disabled, invalid, inputClassName, handleCancel, handleSubmit } = useEditableContext();
   const inputRef = React.useRef(null);
   React.useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -191,6 +232,8 @@ const EditableInput = React.forwardRef((props, forwardedRef) => {
       onChange: (e) => setValue(e.target.value),
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
+      disabled,
+      "aria-invalid": invalid || void 0,
       className: classNames("dsx-editable__input", inputClassName, className),
       "data-slot": "editable-input"
     }

package/dist/components/editable/Editable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editable/Editable.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Pencil, Check, X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { editablePropDefs } from './editable.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype EditableOwnProps = GetPropDefTypes<typeof editablePropDefs> & {\n  value?: string\n  onChange?: (value: string) => void\n  onSubmit?: (value: string) => void\n  onCancel?: () => void\n}\n\ninterface EditableProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'onSubmit'>,\n    EditableOwnProps {}\n\ntype EditableContextValue = {\n  isEditing: boolean\n  value: string\n  placeholder: string\n  setValue: (value: string) => void\n  setEditing: (editing: boolean) => void\n  submitOnBlur: boolean\n  previewClassName?: string\n  inputClassName?: string\n  handleCancel: () => void\n  handleSubmit: () => void\n}\n\nconst EditableContext = React.createContext<EditableContextValue | null>(null)\n\nfunction useEditableContext() {\n  const context = React.useContext(EditableContext)\n  if (!context) {\n    throw new Error('Editable compound components must be used within Editable')\n  }\n  return context\n}\n\nconst EditableRoot = React.forwardRef<HTMLDivElement, EditableProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    radius,\n    size = 'md',\n    variant = 'default',\n    value: controlledValue,\n    defaultValue = '',\n    placeholder = 'Enter text...',\n    submitOnBlur = true,\n    previewClassName,\n    inputClassName,\n    onChange,\n    onSubmit,\n    onCancel,\n    ...restProps\n  } = extractProps(props, editablePropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const setEditing = React.useCallback((editing: boolean) => {\n    setIsEditing(editing)\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    setIsEditing(false)\n    onSubmit?.(value)\n  }, [value, onSubmit])\n\n  const handleCancel = React.useCallback(() => {\n    if (!isControlled) {\n      setUncontrolledValue(defaultValue)\n    }\n    setIsEditing(false)\n    onCancel?.()\n  }, [isControlled, defaultValue, onCancel])\n\n  const contextValue = React.useMemo<EditableContextValue>(\n    () => ({\n      isEditing,\n      value,\n      placeholder,\n      setValue,\n      setEditing,\n      submitOnBlur,\n      previewClassName,\n      inputClassName,\n      handleCancel,\n      handleSubmit,\n    }),\n    [isEditing, value, placeholder, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit],\n  )\n\n  return (\n    <EditableContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-editable', className)}\n        data-editing={isEditing ? 'true' : undefined}\n        data-radius={radius}\n        data-size={size}\n        data-slot=\"editable\"\n        data-variant={variant}\n      >\n        {children}\n        <div className=\"dsx-editable__actions\" data-slot=\"editable-actions\">\n          {isEditing ? (\n            <>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--submit\"\n                onClick={handleSubmit}\n                aria-label=\"Save changes\"\n                data-slot=\"editable-submit\"\n              >\n                <Check size={14} />\n              </button>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--cancel\"\n                onClick={handleCancel}\n                aria-label=\"Cancel editing\"\n                data-slot=\"editable-cancel\"\n              >\n                <X size={14} />\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"dsx-editable__action dsx-editable__action--edit\"\n              onClick={() => setIsEditing(true)}\n              aria-label=\"Edit text\"\n              data-slot=\"editable-edit\"\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n        </div>\n      </Comp>\n    </EditableContext.Provider>\n  )\n})\nEditableRoot.displayName = 'Editable'\n\ninterface EditablePreviewProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst EditablePreview = React.forwardRef<HTMLSpanElement, EditablePreviewProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { isEditing, value, placeholder, setEditing, previewClassName } = useEditableContext()\n\n  if (isEditing) return null\n\n  return (\n    <span\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-editable__preview', previewClassName, className)}\n      onClick={() => setEditing(true)}\n      data-slot=\"editable-preview\"\n    >\n      {value || <span className=\"dsx-editable__placeholder\">{placeholder}</span>}\n    </span>\n  )\n})\nEditablePreview.displayName = 'EditablePreview'\n\ninterface EditableInputProps extends React.ComponentPropsWithoutRef<'input'> {}\n\nconst EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((props, forwardedRef) => {\n  const { className, onBlur, ...restProps } = props\n  const { isEditing, value, setValue, setEditing, submitOnBlur, inputClassName, handleCancel, handleSubmit } = useEditableContext()\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus()\n      inputRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e)\n      if (submitOnBlur) {\n        setEditing(false)\n      }\n    },\n    [onBlur, submitOnBlur, setEditing],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        handleSubmit()\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSubmit, handleCancel],\n  )\n\n  if (!isEditing) return null\n\n  return (\n    <input\n      {...restProps}\n      ref={(node) => {\n        inputRef.current = node\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else if (forwardedRef) {\n          forwardedRef.current = node\n        }\n      }}\n      value={value}\n      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      className={classNames('dsx-editable__input', inputClassName, className)}\n      data-slot=\"editable-input\"\n    />\n  )\n})\nEditableInput.displayName = 'EditableInput'\n\nconst Editable: typeof EditableRoot & {\n  Preview: typeof EditablePreview\n  Input: typeof EditableInput\n} = Object.assign(EditableRoot, {\n  Preview: EditablePreview,\n  Input: EditableInput,\n})\n\nexport { Editable, EditableInput, EditablePreview, EditableRoot }\nexport type { EditableInputProps, EditableOwnProps, EditablePreviewProps, EditableProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Pencil, Check, X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { editablePropDefs } from './editable.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype EditableOwnProps = GetPropDefTypes<typeof editablePropDefs> & {\n  value?: string\n  onChange?: (value: string) => void\n  onSubmit?: (value: string) => void\n  onCancel?: () => void\n}\n\ninterface EditableProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'onSubmit'>,\n    EditableOwnProps {}\n\ntype EditableContextValue = {\n  isEditing: boolean\n  value: string\n  placeholder: string\n  activationMode: 'click' | 'dblclick' | 'focus'\n  disabled: boolean\n  invalid: boolean\n  setValue: (value: string) => void\n  setEditing: (editing: boolean) => void\n  submitOnBlur: boolean\n  previewClassName?: string\n  inputClassName?: string\n  handleCancel: () => void\n  handleSubmit: () => void\n}\n\nconst EditableContext = React.createContext<EditableContextValue | null>(null)\n\nfunction useEditableContext() {\n  const context = React.useContext(EditableContext)\n  if (!context) {\n    throw new Error('Editable compound components must be used within Editable')\n  }\n  return context\n}\n\nconst EditableRoot = React.forwardRef<HTMLDivElement, EditableProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    radius,\n    size = 'md',\n    variant = 'default',\n    value: controlledValue,\n    defaultValue = '',\n    placeholder = 'Enter text...',\n    submitOnBlur = true,\n    activationMode = 'click',\n    disabled = false,\n    invalid = false,\n    previewClassName,\n    inputClassName,\n    onChange,\n    onSubmit,\n    onCancel,\n    ...restProps\n  } = extractProps(props, editablePropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const setValue = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    onChange?.(nextValue)\n  }, [isControlled, onChange])\n\n  const setEditing = React.useCallback((editing: boolean) => {\n    setIsEditing(editing)\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    setIsEditing(false)\n    onSubmit?.(value)\n  }, [value, onSubmit])\n\n  const handleCancel = React.useCallback(() => {\n    if (!isControlled) {\n      setUncontrolledValue(defaultValue)\n    }\n    setIsEditing(false)\n    onCancel?.()\n  }, [isControlled, defaultValue, onCancel])\n\n  const contextValue = React.useMemo<EditableContextValue>(\n    () => ({\n      isEditing,\n      value,\n      placeholder,\n      activationMode,\n      disabled,\n      invalid,\n      setValue,\n      setEditing,\n      submitOnBlur,\n      previewClassName,\n      inputClassName,\n      handleCancel,\n      handleSubmit,\n    }),\n    [isEditing, value, placeholder, activationMode, disabled, invalid, setValue, setEditing, submitOnBlur, previewClassName, inputClassName, handleCancel, handleSubmit],\n  )\n\n  return (\n    <EditableContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-editable',\n          disabled && 'dsx-editable--disabled',\n          invalid && 'dsx-editable--invalid',\n          className,\n        )}\n        data-editing={isEditing ? 'true' : undefined}\n        data-disabled={disabled || undefined}\n        data-radius={radius}\n        data-size={size}\n        data-slot=\"editable\"\n        data-variant={variant}\n      >\n        {children}\n        <div className=\"dsx-editable__actions\" data-slot=\"editable-actions\">\n          {isEditing ? (\n            <>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--submit\"\n                onClick={handleSubmit}\n                disabled={disabled}\n                aria-label=\"Save changes\"\n                data-slot=\"editable-submit\"\n              >\n                <Check size={14} />\n              </button>\n              <button\n                type=\"button\"\n                className=\"dsx-editable__action dsx-editable__action--cancel\"\n                onClick={handleCancel}\n                disabled={disabled}\n                aria-label=\"Cancel editing\"\n                data-slot=\"editable-cancel\"\n              >\n                <X size={14} />\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"dsx-editable__action dsx-editable__action--edit\"\n              onClick={() => !disabled && setEditing(true)}\n              disabled={disabled}\n              aria-label=\"Edit text\"\n              data-slot=\"editable-edit\"\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n        </div>\n      </Comp>\n    </EditableContext.Provider>\n  )\n})\nEditableRoot.displayName = 'Editable'\n\ninterface EditablePreviewProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst EditablePreview = React.forwardRef<HTMLSpanElement, EditablePreviewProps>((props, forwardedRef) => {\n  const { className, onClick, onDoubleClick, onFocus, onKeyDown, ...restProps } = props\n  const { isEditing, value, placeholder, activationMode, disabled, setEditing, previewClassName } = useEditableContext()\n\n  const activate = React.useCallback(() => {\n    if (!disabled) setEditing(true)\n  }, [disabled, setEditing])\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(e)\n    if (e.defaultPrevented) return\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      activate()\n    }\n  }, [activate, onKeyDown])\n\n  if (isEditing) return null\n\n  return (\n    <span\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-editable__preview', previewClassName, className)}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        onClick?.(e)\n        if (activationMode === 'click') activate()\n      }}\n      onDoubleClick={(e) => {\n        onDoubleClick?.(e)\n        if (activationMode === 'dblclick') activate()\n      }}\n      onFocus={(e) => {\n        onFocus?.(e)\n        if (activationMode === 'focus') activate()\n      }}\n      onKeyDown={handleKeyDown}\n      data-slot=\"editable-preview\"\n    >\n      {value || <span className=\"dsx-editable__placeholder\">{placeholder}</span>}\n    </span>\n  )\n})\nEditablePreview.displayName = 'EditablePreview'\n\ninterface EditableInputProps extends React.ComponentPropsWithoutRef<'input'> {}\n\nconst EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((props, forwardedRef) => {\n  const { className, onBlur, ...restProps } = props\n  const { isEditing, value, setValue, setEditing, submitOnBlur, disabled, invalid, inputClassName, handleCancel, handleSubmit } = useEditableContext()\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus()\n      inputRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e)\n      if (submitOnBlur) {\n        setEditing(false)\n      }\n    },\n    [onBlur, submitOnBlur, setEditing],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        handleSubmit()\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSubmit, handleCancel],\n  )\n\n  if (!isEditing) return null\n\n  return (\n    <input\n      {...restProps}\n      ref={(node) => {\n        inputRef.current = node\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else if (forwardedRef) {\n          forwardedRef.current = node\n        }\n      }}\n      value={value}\n      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n      className={classNames('dsx-editable__input', inputClassName, className)}\n      data-slot=\"editable-input\"\n    />\n  )\n})\nEditableInput.displayName = 'EditableInput'\n\nconst Editable: typeof EditableRoot & {\n  Preview: typeof EditablePreview\n  Input: typeof EditableInput\n} = Object.assign(EditableRoot, {\n  Preview: EditablePreview,\n  Input: EditableInput,\n})\n\nexport { Editable, EditableInput, EditablePreview, EditableRoot }\nexport type { EditableInputProps, EditableOwnProps, EditablePreviewProps, EditableProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/editable/editable.props.cjs

@@ -25,6 +25,7 @@ var import_asChild = require("../../_internal/props/asChild.prop");
 const editableVariants = ["default", "ghost"];
 const editableSizes = ["sm", "md", "lg"];
 const editableRadiusValues = ["none", "sm", "md", "lg", "full"];
+const editableActivationModes = ["click", "dblclick", "focus"];
 const editablePropDefs = {
   ...import_asChild.asChildPropDef,
   variant: {
@@ -54,6 +55,19 @@ const editablePropDefs = {
     type: "boolean",
     default: true
   },
+  activationMode: {
+    type: "enum",
+    values: editableActivationModes,
+    default: "click"
+  },
+  disabled: {
+    type: "boolean",
+    default: false
+  },
+  invalid: {
+    type: "boolean",
+    default: false
+  },
   previewClassName: {
     type: "string"
   },

package/dist/components/editable/editable.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editable/editable.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst editableVariants = ['default', 'ghost'] as const\nconst editableSizes = ['sm', 'md', 'lg'] as const\nconst editableRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst editablePropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: editableVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: editableSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: editableRadiusValues,\n    default: undefined,\n  },\n  defaultValue: {\n    type: 'string',\n    default: '',\n  },\n  placeholder: {\n    type: 'string',\n    default: 'Enter text...',\n  },\n  submitOnBlur: {\n    type: 'boolean',\n    default: true,\n  },\n  previewClassName: {\n    type: 'string',\n  },\n  inputClassName: {\n    type: 'string',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof editableVariants)[number]>\n  size: PropDef<(typeof editableSizes)[number]>\n  radius: PropDef<(typeof editableRadiusValues)[number]>\n  defaultValue: PropDef\n  placeholder: PropDef\n  submitOnBlur: PropDef\n  previewClassName: PropDef\n  inputClassName: PropDef\n}\n\nexport { editablePropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,mBAAmB,CAAC,WAAW,OAAO;AAC5C,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE9D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst editableVariants = ['default', 'ghost'] as const\nconst editableSizes = ['sm', 'md', 'lg'] as const\nconst editableRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\nconst editableActivationModes = ['click', 'dblclick', 'focus'] as const\n\nconst editablePropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: editableVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: editableSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: editableRadiusValues,\n    default: undefined,\n  },\n  defaultValue: {\n    type: 'string',\n    default: '',\n  },\n  placeholder: {\n    type: 'string',\n    default: 'Enter text...',\n  },\n  submitOnBlur: {\n    type: 'boolean',\n    default: true,\n  },\n  activationMode: {\n    type: 'enum',\n    values: editableActivationModes,\n    default: 'click',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  previewClassName: {\n    type: 'string',\n  },\n  inputClassName: {\n    type: 'string',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof editableVariants)[number]>\n  size: PropDef<(typeof editableSizes)[number]>\n  radius: PropDef<(typeof editableRadiusValues)[number]>\n  activationMode: PropDef<(typeof editableActivationModes)[number]>\n  disabled: PropDef\n  invalid: PropDef\n  defaultValue: PropDef\n  placeholder: PropDef\n  submitOnBlur: PropDef\n  previewClassName: PropDef\n  inputClassName: PropDef\n}\n\nexport { editablePropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,mBAAmB,CAAC,WAAW,OAAO;AAC5C,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAC9D,MAAM,0BAA0B,CAAC,SAAS,YAAY,OAAO;AAE7D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/dist/components/editable/editable.props.d.cts

@@ -26,6 +26,19 @@ declare const editablePropDefs: {
         type: "boolean";
         default: true;
     };
+    activationMode: {
+        type: "enum";
+        values: readonly ["click", "dblclick", "focus"];
+        default: "click";
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     previewClassName: {
         type: "string";
     };

package/dist/components/editable/editable.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.props.d.cts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"editable.props.d.cts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/editable/editable.props.d.mts

@@ -26,6 +26,19 @@ declare const editablePropDefs: {
         type: "boolean";
         default: true;
     };
+    activationMode: {
+        type: "enum";
+        values: readonly ["click", "dblclick", "focus"];
+        default: "click";
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     previewClassName: {
         type: "string";
     };

package/dist/components/editable/editable.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.props.d.mts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"editable.props.d.mts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/editable/editable.props.d.ts

@@ -26,6 +26,19 @@ declare const editablePropDefs: {
         type: "boolean";
         default: true;
     };
+    activationMode: {
+        type: "enum";
+        values: readonly ["click", "dblclick", "focus"];
+        default: "click";
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     previewClassName: {
         type: "string";
     };

package/dist/components/editable/editable.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.props.d.ts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"editable.props.d.ts","sourceRoot":"","sources":["../../../src/components/editable/editable.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DrB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/editable/editable.props.js

@@ -2,6 +2,7 @@ import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const editableVariants = ["default", "ghost"];
 const editableSizes = ["sm", "md", "lg"];
 const editableRadiusValues = ["none", "sm", "md", "lg", "full"];
+const editableActivationModes = ["click", "dblclick", "focus"];
 const editablePropDefs = {
   ...asChildPropDef,
   variant: {
@@ -31,6 +32,19 @@ const editablePropDefs = {
     type: "boolean",
     default: true
   },
+  activationMode: {
+    type: "enum",
+    values: editableActivationModes,
+    default: "click"
+  },
+  disabled: {
+    type: "boolean",
+    default: false
+  },
+  invalid: {
+    type: "boolean",
+    default: false
+  },
   previewClassName: {
     type: "string"
   },

package/dist/components/editable/editable.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editable/editable.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst editableVariants = ['default', 'ghost'] as const\nconst editableSizes = ['sm', 'md', 'lg'] as const\nconst editableRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst editablePropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: editableVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: editableSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: editableRadiusValues,\n    default: undefined,\n  },\n  defaultValue: {\n    type: 'string',\n    default: '',\n  },\n  placeholder: {\n    type: 'string',\n    default: 'Enter text...',\n  },\n  submitOnBlur: {\n    type: 'boolean',\n    default: true,\n  },\n  previewClassName: {\n    type: 'string',\n  },\n  inputClassName: {\n    type: 'string',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof editableVariants)[number]>\n  size: PropDef<(typeof editableSizes)[number]>\n  radius: PropDef<(typeof editableRadiusValues)[number]>\n  defaultValue: PropDef\n  placeholder: PropDef\n  submitOnBlur: PropDef\n  previewClassName: PropDef\n  inputClassName: PropDef\n}\n\nexport { editablePropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,mBAAmB,CAAC,WAAW,OAAO;AAC5C,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE9D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst editableVariants = ['default', 'ghost'] as const\nconst editableSizes = ['sm', 'md', 'lg'] as const\nconst editableRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\nconst editableActivationModes = ['click', 'dblclick', 'focus'] as const\n\nconst editablePropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: editableVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: editableSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: editableRadiusValues,\n    default: undefined,\n  },\n  defaultValue: {\n    type: 'string',\n    default: '',\n  },\n  placeholder: {\n    type: 'string',\n    default: 'Enter text...',\n  },\n  submitOnBlur: {\n    type: 'boolean',\n    default: true,\n  },\n  activationMode: {\n    type: 'enum',\n    values: editableActivationModes,\n    default: 'click',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  previewClassName: {\n    type: 'string',\n  },\n  inputClassName: {\n    type: 'string',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof editableVariants)[number]>\n  size: PropDef<(typeof editableSizes)[number]>\n  radius: PropDef<(typeof editableRadiusValues)[number]>\n  activationMode: PropDef<(typeof editableActivationModes)[number]>\n  disabled: PropDef\n  invalid: PropDef\n  defaultValue: PropDef\n  placeholder: PropDef\n  submitOnBlur: PropDef\n  previewClassName: PropDef\n  inputClassName: PropDef\n}\n\nexport { editablePropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,mBAAmB,CAAC,WAAW,OAAO;AAC5C,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAC9D,MAAM,0BAA0B,CAAC,SAAS,YAAY,OAAO;AAE7D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AACF;",
   "names": []
 }