@frontify/fondue
Version:
Design system of Frontify
80 lines (79 loc) • 2.59 kB
JavaScript
import { jsx as r, jsxs as k } from "react/jsx-runtime";
import { useFocusRing as y } from "@react-aria/focus";
import { useRef as v } from "react";
import { TextInputType as I } from "../TextInput/TextInput.es.js";
import { useMemoizedId as R } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as T } from "../../utilities/focusStyle.es.js";
import { merge as i } from "../../utilities/merge.es.js";
var C = /* @__PURE__ */ ((e) => (e.Left = "Left", e.Right = "Right", e))(C || {});
const N = ({
min: e,
max: a,
decorator: n,
onChange: o,
onEnterPressed: w,
size: u,
onBlur: c,
value: p = "",
decoratorPosition: s = "Left",
type: m = I.Text,
"aria-label": f = "Color Input"
}) => {
const { isFocusVisible: d, focusProps: h } = y({ within: !0, isTextInput: !0 }), l = v(null), x = (t) => {
const { key: b, shiftKey: g } = t;
b === "Enter" && !g && w && w(t);
};
return /* @__PURE__ */ r(
"div",
{
...h,
className: i([
"tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20",
d && T
]),
"data-test-id": "color-input",
children: /* @__PURE__ */ k(
"div",
{
className: i([
"tw-flex tw-gap-1",
s === "Right" && "tw-flex-row-reverse"
]),
children: [
n && /* @__PURE__ */ r("div", { className: "tw-flex tw-items-center tw-justify-center tw-text-black-80", children: n }),
/* @__PURE__ */ r(
"input",
{
id: R(),
ref: l,
className: i([
"tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white",
s === "Right" && "tw-text-right"
]),
onClick: () => {
var t;
return (t = l.current) == null ? void 0 : t.focus();
},
onKeyDown: x,
onChange: (t) => o && o(t.currentTarget.value),
onBlur: c,
value: p,
type: m,
min: e,
max: a,
size: u,
"aria-label": f
}
)
]
}
)
}
);
};
N.displayName = "FondueColorInput";
export {
N as ColorInput,
C as DecoratorPosition
};
//# sourceMappingURL=ColorInput.es.js.map