liquidify-react
Version:
🚀 Production-ready React component library inspired by Apple's new design language post-WWDC 2025. Built with Panda CSS and React, using Bun as runtime (npm compatible). Helps developers maintain design consistency for Apple platform apps. 47+ components
61 lines (60 loc) • 1.79 kB
JavaScript
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { ColorPicker as r } from "@ark-ui/react";
import { forwardRef as _ } from "react";
import { m as C, a as k, s as u, b as g } from "./create-recipe-PrEeV78t.mjs";
const n = /* @__PURE__ */ k(
"color-picker",
{
size: "md"
},
[]
), s = {
size: ["sm", "md", "lg"]
}, a = Object.keys(s), t = /* @__PURE__ */ Object.assign(
C(n.recipeFn),
{
__recipe__: !0,
__name__: "colorPicker",
__getCompoundVariantCss__: n.__getCompoundVariantCss__,
raw: (o) => o,
variantKeys: a,
variantMap: s,
merge(o) {
return g(this, o);
},
splitVariantProps(o) {
return u(o, a);
},
getVariantProps: n.getVariantProps
}
), V = _(
({ label: o, size: c, children: l, className: p, ...m }, h) => {
const [P, d] = t.splitVariantProps({ size: c });
return /* @__PURE__ */ i(
r.Root,
{
ref: h,
className: [t(P), p].filter(Boolean).join(" "),
...d,
...m,
children: [
o && /* @__PURE__ */ e(r.Label, { children: o }),
/* @__PURE__ */ i(r.Control, { children: [
/* @__PURE__ */ e(r.ChannelInput, { channel: "hex" }),
/* @__PURE__ */ e(r.Trigger, { children: /* @__PURE__ */ e(r.ValueSwatch, {}) })
] }),
/* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ i(r.Content, { children: [
/* @__PURE__ */ e(r.Area, { children: /* @__PURE__ */ e(r.AreaThumb, {}) }),
/* @__PURE__ */ e(r.ChannelSlider, { channel: "hue", children: /* @__PURE__ */ e(r.ChannelSliderThumb, {}) })
] }) }),
l
]
}
);
}
);
V.displayName = "ColorPicker";
export {
V as C
};
//# sourceMappingURL=colorPicker-2Ty2gmXf.mjs.map