@kobalte/core/dist/color-field/index.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  parseColor
} from "../chunk/KNLKPWUU.jsx";
import {
  TextFieldInput,
  TextFieldRoot
} from "../chunk/MKJEDDFV.jsx";
import "../chunk/LR7LBJN3.jsx";
import "../chunk/NGHEENNE.jsx";
import {
  FormControlLabel
} from "../chunk/FOXVCQFV.jsx";
import "../chunk/QJIB6BDF.jsx";
import {
  FormControlErrorMessage
} from "../chunk/ZZYKR3VO.jsx";
import {
  FormControlDescription
} from "../chunk/XUUROM4M.jsx";
import "../chunk/JNCCF6MP.jsx";
import {
  createControllableSignal
} from "../chunk/FN6EICGO.jsx";
import "../chunk/OYES4GOP.jsx";
import "../chunk/FLVHQV4A.jsx";
import "../chunk/5WXHJDCZ.jsx";

// src/color-field/color-field-input.tsx
import { composeEventHandlers } from "@kobalte/utils";
import {
  splitProps
} from "solid-js";

// src/color-field/color-field-context.tsx
import { createContext, useContext } from "solid-js";
var ColorFieldContext = createContext();
function useColorFieldContext() {
  const context = useContext(ColorFieldContext);
  if (context === void 0) {
    throw new Error(
      "[kobalte]: `useColorFieldContext` must be used within a `ColorField` component"
    );
  }
  return context;
}

// src/color-field/color-field-input.tsx
function ColorFieldInput(props) {
  const context = useColorFieldContext();
  const [local, others] = splitProps(props, ["onBlur"]);
  return <TextFieldInput
    autoComplete="off"
    autoCorrect="off"
    spellCheck="false"
    onBlur={composeEventHandlers([local.onBlur, context.onBlur])}
    {...others}
  />;
}

// src/color-field/color-field-root.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import {
  batch,
  createMemo,
  createSignal,
  createUniqueId,
  splitProps as splitProps2
} from "solid-js";
function ColorFieldRoot(props) {
  const defaultId = `colorfield-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps(
    { id: defaultId },
    props
  );
  const [local, others] = splitProps2(mergedProps, [
    "value",
    "defaultValue",
    "onChange"
  ]);
  const defaultValue = createMemo(() => {
    let defaultValue2 = local.defaultValue;
    try {
      defaultValue2 = parseColor(
        defaultValue2?.startsWith("#") ? defaultValue2 : `#${defaultValue2}`
      ).toString("hex");
    } catch {
      defaultValue2 = "";
    }
    return defaultValue2;
  });
  const [value, setValue] = createControllableSignal({
    value: () => local.value,
    defaultValue,
    onChange: (value2) => local.onChange?.(value2)
  });
  const [prevValue, setPrevValue] = createSignal(value());
  const onChange = (value2) => {
    if (isAllowedInput(value2)) {
      setValue(value2);
    }
  };
  const onBlur = (e) => {
    if (!value().length) {
      setPrevValue("");
      return;
    }
    let newValue;
    try {
      newValue = parseColor(
        value().startsWith("#") ? value() : `#${value()}`
      ).toString("hex");
    } catch {
      if (prevValue()) {
        setValue(prevValue());
      } else {
        setValue("");
      }
      return;
    }
    batch(() => {
      setValue(newValue);
      setPrevValue(newValue);
    });
  };
  const context = {
    onBlur
  };
  return <ColorFieldContext.Provider value={context}><TextFieldRoot
    value={value()}
    defaultValue={defaultValue()}
    onChange={onChange}
    {...others}
  /></ColorFieldContext.Provider>;
}
function isAllowedInput(value) {
  return value === "" || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
}

// src/color-field/index.tsx
var ColorField = Object.assign(ColorFieldRoot, {
  Description: FormControlDescription,
  ErrorMessage: FormControlErrorMessage,
  Input: ColorFieldInput,
  Label: FormControlLabel
});
export {
  ColorField,
  FormControlDescription as Description,
  FormControlErrorMessage as ErrorMessage,
  ColorFieldInput as Input,
  FormControlLabel as Label,
  ColorFieldRoot as Root,
  useColorFieldContext
};