@forgedevstack/bear 1.1.3 → 1.1.8

package/dist/components/CheckboxCard/CheckboxCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),S=require("../../utils/cn.cjs"),A=require("../Typography/Typography.cjs"),c=require("./CheckboxCard.const.cjs"),I=i.createContext(null),G=({className:s})=>r.jsx("svg",{className:s,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("polyline",{points:"20 6 9 17 4 12"})}),_=({checked:s,onChange:a,value:t,label:y,description:u,icon:k,disabled:l=!1,variant:m="default",size:x="md",testId:f,className:b,onClick:n,...p})=>{const e=i.useContext(I),v=!!e,[E,T]=i.useState(!1),j=s!==void 0,o=v&&t?e.value.includes(t):j?!!s:E,N=i.useCallback(d=>{if(!(l||((e==null?void 0:e.disabled)??!1)))if(n==null||n(d),v&&t&&e){const h=o?e.value.filter(D=>D!==t):[...e.value,t];e.onChange(h)}else{const h=!o;j||T(h),a==null||a(h)}},[l,e,v,o,j,t,a,n]),C=l||((e==null?void 0:e.disabled)??!1);return r.jsxs("div",{role:"checkbox","aria-checked":o,"aria-disabled":C,tabIndex:C?void 0:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),N(d))},className:S.cn(c.ROOT_CLASS,c.SIZE_PADDING_MAP[x],c.VARIANT_CLASSES[m],o&&c.CHECKED_CLASSES,C&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",!C&&"hover:bear-border-gray-300 dark:hover:bear-border-gray-600",b),onClick:N,"data-testid":f,...p,children:[r.jsx("div",{className:S.cn("bear-absolute bear-top-3 bear-right-3 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-2",o?"bear-border-pink-500 dark:bear-border-pink-400 bear-bg-pink-500 dark:bear-bg-pink-400 bear-text-white":"bear-border-gray-300 dark:bear-border-gray-600",c.CHECKBOX_INDICATOR_SIZE_MAP[x]),children:o&&r.jsx(G,{className:"bear-w-2.5 bear-h-2.5"})}),k&&r.jsx("div",{className:"bear-mb-3 bear-flex bear-items-center bear-justify-center bear-text-gray-500 dark:bear-text-gray-400",children:k}),r.jsx(A.Typography,{variant:"body2",weight:"medium",className:"bear-block",children:y}),u&&r.jsx(A.Typography,{variant:"caption",color:"secondary",className:"bear-mt-1 bear-block",children:u})]})};_.displayName="CheckboxCard";const g=({value:s,onChange:a,children:t,columns:y=c.DEFAULT_COLUMNS,gap:u=c.DEFAULT_GAP,testId:k,className:l,...m})=>{const[x,f]=i.useState([]),b=s!==void 0,n=b?s:x,p=i.useCallback(e=>{b||f(e),a==null||a(e)},[b,a]);return r.jsx(I.Provider,{value:{value:n,onChange:p},children:r.jsx("div",{role:"group",className:S.cn("Bear-CheckboxCardGroup bear-grid",l),style:{gridTemplateColumns:`repeat(${y}, minmax(0, 1fr))`,gap:`${u*.25}rem`},"data-testid":k,...m,children:t})})};g.displayName="CheckboxCardGroup";exports.CheckboxCard=_;exports.CheckboxCardGroup=g;

package/dist/components/CheckboxCard/CheckboxCard.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-p-3",md:"bear-p-4",lg:"bear-p-5"},e={default:"bear-border bear-border-gray-200 dark:bear-border-gray-700",outline:"bear-border bear-border-dashed bear-border-gray-300 dark:bear-border-gray-600",filled:"bear-bg-gray-50 dark:bear-bg-gray-800/50"},a="bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30",b="Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left",d={sm:"bear-w-4 bear-h-4",md:"bear-w-5 bear-h-5",lg:"bear-w-6 bear-h-6"},o=1,n=4;exports.CHECKBOX_INDICATOR_SIZE_MAP=d;exports.CHECKED_CLASSES=a;exports.DEFAULT_COLUMNS=o;exports.DEFAULT_GAP=n;exports.ROOT_CLASS=b;exports.SIZE_PADDING_MAP=r;exports.VARIANT_CLASSES=e;

package/dist/components/CheckboxCard/CheckboxCard.const.d.ts

@@ -0,0 +1,7 @@
+export declare const SIZE_PADDING_MAP: Record<'sm' | 'md' | 'lg', string>;
+export declare const VARIANT_CLASSES: Record<'default' | 'outline' | 'filled', string>;
+export declare const CHECKED_CLASSES = "bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30";
+export declare const ROOT_CLASS = "Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left";
+export declare const CHECKBOX_INDICATOR_SIZE_MAP: Record<'sm' | 'md' | 'lg', string>;
+export declare const DEFAULT_COLUMNS = 1;
+export declare const DEFAULT_GAP = 4;

package/dist/components/CheckboxCard/CheckboxCard.const.js

@@ -0,0 +1,22 @@
+const r = {
+  sm: "bear-p-3",
+  md: "bear-p-4",
+  lg: "bear-p-5"
+}, e = {
+  default: "bear-border bear-border-gray-200 dark:bear-border-gray-700",
+  outline: "bear-border bear-border-dashed bear-border-gray-300 dark:bear-border-gray-600",
+  filled: "bear-bg-gray-50 dark:bear-bg-gray-800/50"
+}, a = "bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30", b = "Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left", d = {
+  sm: "bear-w-4 bear-h-4",
+  md: "bear-w-5 bear-h-5",
+  lg: "bear-w-6 bear-h-6"
+}, o = 1, n = 4;
+export {
+  d as CHECKBOX_INDICATOR_SIZE_MAP,
+  a as CHECKED_CLASSES,
+  o as DEFAULT_COLUMNS,
+  n as DEFAULT_GAP,
+  b as ROOT_CLASS,
+  r as SIZE_PADDING_MAP,
+  e as VARIANT_CLASSES
+};

package/dist/components/CheckboxCard/CheckboxCard.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CheckboxCardProps, CheckboxCardGroupProps } from './CheckboxCard.types';
+export declare const CheckboxCard: FC<CheckboxCardProps>;
+export declare const CheckboxCardGroup: FC<CheckboxCardGroupProps>;
+export default CheckboxCard;

package/dist/components/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,132 @@
+import { jsxs as G, jsx as a } from "react/jsx-runtime";
+import { createContext as T, useContext as g, useState as S, useCallback as I } from "react";
+import { cn as x } from "../../utils/cn.js";
+import { Typography as A } from "../Typography/Typography.js";
+import { CHECKBOX_INDICATOR_SIZE_MAP as w, CHECKED_CLASSES as j, VARIANT_CLASSES as O, SIZE_PADDING_MAP as B, ROOT_CLASS as K, DEFAULT_COLUMNS as M, DEFAULT_GAP as R } from "./CheckboxCard.const.js";
+const E = T(null), U = ({ className: o }) => /* @__PURE__ */ a(
+  "svg",
+  {
+    className: o,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ a("polyline", { points: "20 6 9 17 4 12" })
+  }
+), F = ({
+  checked: o,
+  onChange: r,
+  value: t,
+  label: k,
+  description: b,
+  icon: c,
+  disabled: l = !1,
+  variant: p = "default",
+  size: m = "md",
+  testId: h,
+  className: n,
+  onClick: i,
+  ...y
+}) => {
+  const e = g(E), C = !!e, [_, D] = S(!1), v = o !== void 0, s = C && t ? e.value.includes(t) : v ? !!o : _, N = I(
+    (d) => {
+      if (!(l || ((e == null ? void 0 : e.disabled) ?? !1)))
+        if (i == null || i(d), C && t && e) {
+          const f = s ? e.value.filter((L) => L !== t) : [...e.value, t];
+          e.onChange(f);
+        } else {
+          const f = !s;
+          v || D(f), r == null || r(f);
+        }
+    },
+    [l, e, C, s, v, t, r, i]
+  ), u = l || ((e == null ? void 0 : e.disabled) ?? !1);
+  return /* @__PURE__ */ G(
+    "div",
+    {
+      role: "checkbox",
+      "aria-checked": s,
+      "aria-disabled": u,
+      tabIndex: u ? void 0 : 0,
+      onKeyDown: (d) => {
+        (d.key === "Enter" || d.key === " ") && (d.preventDefault(), N(d));
+      },
+      className: x(
+        K,
+        B[m],
+        O[p],
+        s && j,
+        u && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",
+        !u && "hover:bear-border-gray-300 dark:hover:bear-border-gray-600",
+        n
+      ),
+      onClick: N,
+      "data-testid": h,
+      ...y,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: x(
+              "bear-absolute bear-top-3 bear-right-3 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-2",
+              s ? "bear-border-pink-500 dark:bear-border-pink-400 bear-bg-pink-500 dark:bear-bg-pink-400 bear-text-white" : "bear-border-gray-300 dark:bear-border-gray-600",
+              w[m]
+            ),
+            children: s && /* @__PURE__ */ a(U, { className: "bear-w-2.5 bear-h-2.5" })
+          }
+        ),
+        c && /* @__PURE__ */ a("div", { className: "bear-mb-3 bear-flex bear-items-center bear-justify-center bear-text-gray-500 dark:bear-text-gray-400", children: c }),
+        /* @__PURE__ */ a(A, { variant: "body2", weight: "medium", className: "bear-block", children: k }),
+        b && /* @__PURE__ */ a(A, { variant: "caption", color: "secondary", className: "bear-mt-1 bear-block", children: b })
+      ]
+    }
+  );
+};
+F.displayName = "CheckboxCard";
+const H = ({
+  value: o,
+  onChange: r,
+  children: t,
+  columns: k = M,
+  gap: b = R,
+  testId: c,
+  className: l,
+  ...p
+}) => {
+  const [m, h] = S([]), n = o !== void 0, i = n ? o : m, y = I(
+    (e) => {
+      n || h(e), r == null || r(e);
+    },
+    [n, r]
+  );
+  return /* @__PURE__ */ a(
+    E.Provider,
+    {
+      value: { value: i, onChange: y },
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          role: "group",
+          className: x(
+            "Bear-CheckboxCardGroup bear-grid",
+            l
+          ),
+          style: {
+            gridTemplateColumns: `repeat(${k}, minmax(0, 1fr))`,
+            gap: `${b * 0.25}rem`
+          },
+          "data-testid": c,
+          ...p,
+          children: t
+        }
+      )
+    }
+  );
+};
+H.displayName = "CheckboxCardGroup";
+export {
+  F as CheckboxCard,
+  H as CheckboxCardGroup
+};

package/dist/components/CheckboxCard/CheckboxCard.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface CheckboxCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    variant?: 'default' | 'outline' | 'filled';
+    size?: 'sm' | 'md' | 'lg';
+    testId?: string;
+}
+export interface CheckboxCardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    children: ReactNode;
+    columns?: number;
+    gap?: number;
+    testId?: string;
+}

package/dist/components/CheckboxCard/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxCard, CheckboxCardGroup, default } from './CheckboxCard';
+export type { CheckboxCardProps, CheckboxCardGroupProps } from './CheckboxCard.types';

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react"),o=require("../../utils/cn.cjs"),S=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#a855f7","#d946ef","#ec4899","#f43f5e","#64748b","#1e293b","#000000","#ffffff"],g=({value:t="#ec4899",onChange:r,presets:p=S,showInput:w=!0,showPresets:h=!0,disabled:b=!1,label:l,size:u="md",className:x})=>{const[d,f]=c.useState(!1),[j,n]=c.useState(t),i=c.useRef(null);c.useEffect(()=>{n(t)},[t]),c.useEffect(()=>{const e=s=>{i.current&&!i.current.contains(s.target)&&f(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const k=e=>{const s=e.target.value;n(s),/^#[0-9A-Fa-f]{6}$/.test(s)&&(r==null||r(s))},v=e=>{n(e),r==null||r(e)},m={sm:{swatch:"bear-w-6 bear-h-6",presetSwatch:"bear-w-5 bear-h-5"},md:{swatch:"bear-w-8 bear-h-8",presetSwatch:"bear-w-6 bear-h-6"},lg:{swatch:"bear-w-10 bear-h-10",presetSwatch:"bear-w-7 bear-h-7"}};return a.jsxs("div",{ref:i,className:o.cn("bear-relative",x),children:[l&&a.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:l}),a.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2",children:[a.jsx("button",{onClick:()=>!b&&f(!d),disabled:b,className:o.cn("bear-rounded-lg bear-border bear-border-zinc-600 bear-transition-all hover:bear-scale-105",m[u].swatch,b&&"bear-opacity-50 bear-cursor-not-allowed"),style:{backgroundColor:t}}),w&&a.jsx("input",{type:"text",value:j,onChange:k,disabled:b,placeholder:"#000000",className:o.cn("bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-border-zinc-600 bear-bg-zinc-800 bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed")})]}),d&&a.jsxs("div",{className:"bear-absolute bear-z-50 bear-mt-2 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",children:[a.jsx("input",{type:"color",value:t,onChange:e=>{r==null||r(e.target.value),n(e.target.value)},className:"bear-w-full bear-h-32 bear-rounded bear-cursor-pointer bear-mb-3"}),h&&a.jsx("div",{className:"bear-grid bear-grid-cols-6 bear-gap-1.5",children:p.map(e=>a.jsx("button",{onClick:()=>v(e),className:o.cn("bear-rounded bear-border bear-transition-transform hover:bear-scale-110",m[u].presetSwatch,t===e?"bear-border-white bear-ring-2 bear-ring-pink-500":"bear-border-zinc-600"),style:{backgroundColor:e}},e))})]})]})};exports.ColorPicker=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),E=require("react"),_=require("../../utils/cn.cjs"),t=require("./ColorPicker.const.cjs"),p=({value:c=t.COLOR_PICKER_DEFAULT_VALUE,onChange:s,presets:R=t.COLOR_PICKER_DEFAULT_PRESETS,showInput:O=!0,showPresets:L=!0,disabled:a=!1,label:S,size:P="md",className:I})=>{const[o,u]=E.useState(!1),[d,n]=E.useState(c),i=E.useRef(null);E.useEffect(()=>{n(c)},[c]),E.useEffect(()=>{const e=l=>{i.current&&!i.current.contains(l.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const m=e=>{const l=e.target.value;n(l),t.COLOR_PICKER_HEX_PATTERN.test(l)&&(s==null||s(l))},A=e=>{n(e),s==null||s(e)},C=t.COLOR_PICKER_SWATCH_SIZE[P];return r.jsxs("div",{ref:i,className:_.cn("bear-relative bear-inline-block",I),children:[S&&r.jsx("label",{className:t.COLOR_PICKER_LABEL_CLASSES,children:S}),r.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2",children:[r.jsx("button",{type:"button",onClick:()=>!a&&u(!o),disabled:a,className:_.cn(t.COLOR_PICKER_SWATCH_CLASSES,C.swatch,a&&"bear-opacity-50 bear-cursor-not-allowed"),style:{backgroundColor:c},"aria-label":"Pick color"}),O&&r.jsx("input",{type:"text",value:d,onChange:m,disabled:a,placeholder:"#000000",className:_.cn(t.COLOR_PICKER_INPUT_CLASSES,a&&"bear-opacity-50 bear-cursor-not-allowed")})]}),o&&r.jsxs("div",{className:t.COLOR_PICKER_POPUP_CLASSES,children:[r.jsx("input",{type:"color",value:c,onChange:e=>{s==null||s(e.target.value),n(e.target.value)},className:t.COLOR_PICKER_NATIVE_INPUT_CLASSES}),L&&r.jsx("div",{className:t.COLOR_PICKER_GRID_CLASSES,children:R.map(e=>r.jsx("button",{type:"button",onClick:()=>A(e),className:_.cn(t.COLOR_PICKER_PRESET_ITEM_CLASSES,C.presetSwatch,c===e?t.COLOR_PICKER_PRESET_ACTIVE_CLASSES:t.COLOR_PICKER_PRESET_INACTIVE_CLASSES),style:{backgroundColor:e},"aria-label":`Color ${e}`},e))})]})]})};exports.ColorPicker=p;

package/dist/components/ColorPicker/ColorPicker.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="#ec4899",e=/^#[0-9A-Fa-f]{6}$/,a=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#a855f7","#d946ef","#ec4899","#f43f5e","#64748b","#1e293b","#000000","#ffffff"],b={sm:{swatch:"bear-w-6 bear-h-6",presetSwatch:"bear-w-5 bear-h-5"},md:{swatch:"bear-w-8 bear-h-8",presetSwatch:"bear-w-6 bear-h-6"},lg:{swatch:"bear-w-10 bear-h-10",presetSwatch:"bear-w-7 bear-h-7"}},_="bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",E="bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500",C="bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm",S="bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150",R="bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600",o="bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500",t="bear-border-gray-300 dark:bear-border-zinc-600",O="bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm",L="bear-grid bear-grid-cols-6 bear-gap-1.5";exports.COLOR_PICKER_DEFAULT_PRESETS=a;exports.COLOR_PICKER_DEFAULT_VALUE=r;exports.COLOR_PICKER_GRID_CLASSES=L;exports.COLOR_PICKER_HEX_PATTERN=e;exports.COLOR_PICKER_INPUT_CLASSES=E;exports.COLOR_PICKER_LABEL_CLASSES=_;exports.COLOR_PICKER_NATIVE_INPUT_CLASSES=R;exports.COLOR_PICKER_POPUP_CLASSES=S;exports.COLOR_PICKER_PRESET_ACTIVE_CLASSES=o;exports.COLOR_PICKER_PRESET_INACTIVE_CLASSES=t;exports.COLOR_PICKER_PRESET_ITEM_CLASSES=O;exports.COLOR_PICKER_SWATCH_CLASSES=C;exports.COLOR_PICKER_SWATCH_SIZE=b;

package/dist/components/ColorPicker/ColorPicker.const.d.ts

@@ -0,0 +1,26 @@
+export declare const COLOR_PICKER_DEFAULT_VALUE = "#ec4899";
+export declare const COLOR_PICKER_HEX_PATTERN: RegExp;
+export declare const COLOR_PICKER_DEFAULT_PRESETS: string[];
+export declare const COLOR_PICKER_SWATCH_SIZE: {
+    readonly sm: {
+        readonly swatch: "bear-w-6 bear-h-6";
+        readonly presetSwatch: "bear-w-5 bear-h-5";
+    };
+    readonly md: {
+        readonly swatch: "bear-w-8 bear-h-8";
+        readonly presetSwatch: "bear-w-6 bear-h-6";
+    };
+    readonly lg: {
+        readonly swatch: "bear-w-10 bear-h-10";
+        readonly presetSwatch: "bear-w-7 bear-h-7";
+    };
+};
+export declare const COLOR_PICKER_LABEL_CLASSES = "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
+export declare const COLOR_PICKER_INPUT_CLASSES = "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500";
+export declare const COLOR_PICKER_SWATCH_CLASSES = "bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm";
+export declare const COLOR_PICKER_POPUP_CLASSES = "bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150";
+export declare const COLOR_PICKER_NATIVE_INPUT_CLASSES = "bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600";
+export declare const COLOR_PICKER_PRESET_ACTIVE_CLASSES = "bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500";
+export declare const COLOR_PICKER_PRESET_INACTIVE_CLASSES = "bear-border-gray-300 dark:bear-border-zinc-600";
+export declare const COLOR_PICKER_PRESET_ITEM_CLASSES = "bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm";
+export declare const COLOR_PICKER_GRID_CLASSES = "bear-grid bear-grid-cols-6 bear-gap-1.5";

package/dist/components/ColorPicker/ColorPicker.const.js

@@ -0,0 +1,38 @@
+const r = "#ec4899", e = /^#[0-9A-Fa-f]{6}$/, a = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#14b8a6",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#a855f7",
+  "#d946ef",
+  "#ec4899",
+  "#f43f5e",
+  "#64748b",
+  "#1e293b",
+  "#000000",
+  "#ffffff"
+], b = {
+  sm: { swatch: "bear-w-6 bear-h-6", presetSwatch: "bear-w-5 bear-h-5" },
+  md: { swatch: "bear-w-8 bear-h-8", presetSwatch: "bear-w-6 bear-h-6" },
+  lg: { swatch: "bear-w-10 bear-h-10", presetSwatch: "bear-w-7 bear-h-7" }
+}, o = "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", t = "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500", d = "bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm", n = "bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150", _ = "bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600", E = "bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500", C = "bear-border-gray-300 dark:bear-border-zinc-600", S = "bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm", c = "bear-grid bear-grid-cols-6 bear-gap-1.5";
+export {
+  a as COLOR_PICKER_DEFAULT_PRESETS,
+  r as COLOR_PICKER_DEFAULT_VALUE,
+  c as COLOR_PICKER_GRID_CLASSES,
+  e as COLOR_PICKER_HEX_PATTERN,
+  t as COLOR_PICKER_INPUT_CLASSES,
+  o as COLOR_PICKER_LABEL_CLASSES,
+  _ as COLOR_PICKER_NATIVE_INPUT_CLASSES,
+  n as COLOR_PICKER_POPUP_CLASSES,
+  E as COLOR_PICKER_PRESET_ACTIVE_CLASSES,
+  C as COLOR_PICKER_PRESET_INACTIVE_CLASSES,
+  S as COLOR_PICKER_PRESET_ITEM_CLASSES,
+  d as COLOR_PICKER_SWATCH_CLASSES,
+  b as COLOR_PICKER_SWATCH_SIZE
+};

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,107 +1,90 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as p, useRef as y, useEffect as w } from "react";
-import { cn as o } from "../../utils/cn.js";
-const S = [
-  "#ef4444",
-  "#f97316",
-  "#eab308",
-  "#22c55e",
-  "#14b8a6",
-  "#06b6d4",
-  "#3b82f6",
-  "#6366f1",
-  "#8b5cf6",
-  "#a855f7",
-  "#d946ef",
-  "#ec4899",
-  "#f43f5e",
-  "#64748b",
-  "#1e293b",
-  "#000000",
-  "#ffffff"
-], O = ({
-  value: a = "#ec4899",
-  onChange: r,
-  presets: h = S,
-  showInput: x = !0,
-  showPresets: k = !0,
-  disabled: b = !1,
-  label: l,
-  size: d = "md",
-  className: v
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import { useState as n, useRef as T, useEffect as O } from "react";
+import { cn as _ } from "../../utils/cn.js";
+import { COLOR_PICKER_DEFAULT_VALUE as f, COLOR_PICKER_LABEL_CLASSES as b, COLOR_PICKER_SWATCH_SIZE as N, COLOR_PICKER_SWATCH_CLASSES as K, COLOR_PICKER_INPUT_CLASSES as k, COLOR_PICKER_POPUP_CLASSES as v, COLOR_PICKER_NATIVE_INPUT_CLASSES as y, COLOR_PICKER_GRID_CLASSES as w, COLOR_PICKER_DEFAULT_PRESETS as U, COLOR_PICKER_PRESET_ACTIVE_CLASSES as V, COLOR_PICKER_PRESET_INACTIVE_CLASSES as x, COLOR_PICKER_PRESET_ITEM_CLASSES as D, COLOR_PICKER_HEX_PATTERN as H } from "./ColorPicker.const.js";
+const B = ({
+  value: r = f,
+  onChange: t,
+  presets: u = U,
+  showInput: L = !0,
+  showPresets: P = !0,
+  disabled: a = !1,
+  label: C,
+  size: m = "md",
+  className: I
 }) => {
-  const [u, f] = p(!1), [N, c] = p(a), n = y(null);
-  w(() => {
-    c(a);
-  }, [a]), w(() => {
-    const e = (s) => {
-      n.current && !n.current.contains(s.target) && f(!1);
+  const [i, o] = n(!1), [p, E] = n(r), l = T(null);
+  O(() => {
+    E(r);
+  }, [r]), O(() => {
+    const e = (c) => {
+      l.current && !l.current.contains(c.target) && o(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const z = (e) => {
-    const s = e.target.value;
-    c(s), /^#[0-9A-Fa-f]{6}$/.test(s) && (r == null || r(s));
-  }, g = (e) => {
-    c(e), r == null || r(e);
-  }, m = {
-    sm: { swatch: "bear-w-6 bear-h-6", presetSwatch: "bear-w-5 bear-h-5" },
-    md: { swatch: "bear-w-8 bear-h-8", presetSwatch: "bear-w-6 bear-h-6" },
-    lg: { swatch: "bear-w-10 bear-h-10", presetSwatch: "bear-w-7 bear-h-7" }
-  };
-  return /* @__PURE__ */ i("div", { ref: n, className: o("bear-relative", v), children: [
-    l && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: l }),
-    /* @__PURE__ */ i("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
-      /* @__PURE__ */ t(
+  const A = (e) => {
+    const c = e.target.value;
+    E(c), H.test(c) && (t == null || t(c));
+  }, d = (e) => {
+    E(e), t == null || t(e);
+  }, R = N[m];
+  return /* @__PURE__ */ S("div", { ref: l, className: _("bear-relative bear-inline-block", I), children: [
+    C && /* @__PURE__ */ s("label", { className: b, children: C }),
+    /* @__PURE__ */ S("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
+      /* @__PURE__ */ s(
         "button",
         {
-          onClick: () => !b && f(!u),
-          disabled: b,
-          className: o(
-            "bear-rounded-lg bear-border bear-border-zinc-600 bear-transition-all hover:bear-scale-105",
-            m[d].swatch,
-            b && "bear-opacity-50 bear-cursor-not-allowed"
+          type: "button",
+          onClick: () => !a && o(!i),
+          disabled: a,
+          className: _(
+            K,
+            R.swatch,
+            a && "bear-opacity-50 bear-cursor-not-allowed"
           ),
-          style: { backgroundColor: a }
+          style: { backgroundColor: r },
+          "aria-label": "Pick color"
         }
       ),
-      x && /* @__PURE__ */ t(
+      L && /* @__PURE__ */ s(
         "input",
         {
           type: "text",
-          value: N,
-          onChange: z,
-          disabled: b,
+          value: p,
+          onChange: A,
+          disabled: a,
           placeholder: "#000000",
-          className: o(
-            "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-border-zinc-600 bear-bg-zinc-800 bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none focus:bear-border-pink-500",
-            b && "bear-opacity-50 bear-cursor-not-allowed"
+          className: _(
+            k,
+            a && "bear-opacity-50 bear-cursor-not-allowed"
           )
         }
       )
     ] }),
-    u && /* @__PURE__ */ i("div", { className: "bear-absolute bear-z-50 bear-mt-2 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3", children: [
-      /* @__PURE__ */ t(
+    i && /* @__PURE__ */ S("div", { className: v, children: [
+      /* @__PURE__ */ s(
         "input",
         {
           type: "color",
-          value: a,
+          value: r,
           onChange: (e) => {
-            r == null || r(e.target.value), c(e.target.value);
+            t == null || t(e.target.value), E(e.target.value);
           },
-          className: "bear-w-full bear-h-32 bear-rounded bear-cursor-pointer bear-mb-3"
+          className: y
         }
       ),
-      k && /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-6 bear-gap-1.5", children: h.map((e) => /* @__PURE__ */ t(
+      P && /* @__PURE__ */ s("div", { className: w, children: u.map((e) => /* @__PURE__ */ s(
         "button",
         {
-          onClick: () => g(e),
-          className: o(
-            "bear-rounded bear-border bear-transition-transform hover:bear-scale-110",
-            m[d].presetSwatch,
-            a === e ? "bear-border-white bear-ring-2 bear-ring-pink-500" : "bear-border-zinc-600"
+          type: "button",
+          onClick: () => d(e),
+          className: _(
+            D,
+            R.presetSwatch,
+            r === e ? V : x
           ),
-          style: { backgroundColor: e }
+          style: { backgroundColor: e },
+          "aria-label": `Color ${e}`
         },
         e
       )) })
@@ -109,5 +92,5 @@ const S = [
   ] });
 };
 export {
-  O as ColorPicker
+  B as ColorPicker
 };

package/dist/components/ColorSwatch/ColorSwatch.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),L=require("react"),h=require("../../utils/cn.cjs"),t=require("./ColorSwatch.const.cjs"),f=require("./ColorSwatch.utils.cjs"),_=({color:c,selected:r=!1,size:s="md",rounded:l=!0,label:d,onClick:A,className:C,testId:S,...m})=>{const a=t.SIZE_MAP[s],n=f.isLightColor(c),o=Math.max(12,a*.4);return i.jsxs("div",{className:"bear-inline-flex bear-flex-col bear-items-center",children:[i.jsx("div",{className:h.cn(t.SWATCH_CLASSES,r&&t.SWATCH_SELECTED_CLASSES,n?t.SWATCH_LIGHT_BORDER:t.SWATCH_DEFAULT_BORDER,l?"bear-rounded-full":"bear-rounded-md",C),style:{width:a,height:a,backgroundColor:c},onClick:A,role:"option","aria-selected":r,"aria-label":d??c,"data-testid":S,...m,children:r&&i.jsx("svg",{className:h.cn(n?t.LIGHT_CHECK_CLASSES:t.CHECK_CLASSES),width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("polyline",{points:"20 6 9 17 4 12"})})}),d&&i.jsx("span",{className:t.LABEL_CLASSES,style:{maxWidth:a+8},children:d})]})},w=({colors:c,value:r,onChange:s,multiple:l=!1,size:d="md",rounded:A=!0,gap:C=t.DEFAULT_GAP,columns:S,showLabel:m=!1,className:a,testId:n,...o})=>{const E=L.useMemo(()=>r?new Set(Array.isArray(r)?r:[r]):new Set,[r]),x=L.useCallback(e=>{if(l){const u=new Set(E);u.has(e)?u.delete(e):u.add(e),s==null||s(Array.from(u))}else s==null||s(e)},[l,E,s]);return i.jsx("div",{className:h.cn(t.GROUP_CLASSES,a),style:{gap:C,...S?{display:"grid",gridTemplateColumns:`repeat(${S}, 1fr)`}:{}},role:"listbox","aria-multiselectable":l,"data-testid":n,...o,children:c.map(e=>i.jsx(_,{color:e,selected:E.has(e),size:d,rounded:A,label:m?e:void 0,onClick:()=>x(e)},e))})};exports.ColorSwatch=_;exports.ColorSwatchGroup=w;

package/dist/components/ColorSwatch/ColorSwatch.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:24,md:32,lg:40,xl:56},r="Bear-ColorSwatch bear-inline-flex bear-items-center bear-justify-center bear-cursor-pointer bear-transition-all bear-border-2 hover:bear-scale-110",S="bear-ring-2 bear-ring-offset-2 bear-ring-pink-500 dark:bear-ring-offset-zinc-900",t="bear-border-transparent",a="bear-border-gray-200",E="bear-text-white drop-shadow-sm",o="bear-text-gray-800",C="Bear-ColorSwatchGroup bear-flex bear-flex-wrap",n="bear-block bear-text-[10px] bear-text-center bear-mt-1 bear-text-gray-500 dark:bear-text-zinc-400 bear-truncate",b=200,A=8;exports.CHECK_CLASSES=E;exports.DEFAULT_GAP=A;exports.GROUP_CLASSES=C;exports.LABEL_CLASSES=n;exports.LIGHT_CHECK_CLASSES=o;exports.LIGHT_THRESHOLD=b;exports.SIZE_MAP=e;exports.SWATCH_CLASSES=r;exports.SWATCH_DEFAULT_BORDER=t;exports.SWATCH_LIGHT_BORDER=a;exports.SWATCH_SELECTED_CLASSES=S;

package/dist/components/ColorSwatch/ColorSwatch.const.d.ts

@@ -0,0 +1,16 @@
+export declare const SIZE_MAP: {
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 40;
+    readonly xl: 56;
+};
+export declare const SWATCH_CLASSES = "Bear-ColorSwatch bear-inline-flex bear-items-center bear-justify-center bear-cursor-pointer bear-transition-all bear-border-2 hover:bear-scale-110";
+export declare const SWATCH_SELECTED_CLASSES = "bear-ring-2 bear-ring-offset-2 bear-ring-pink-500 dark:bear-ring-offset-zinc-900";
+export declare const SWATCH_DEFAULT_BORDER = "bear-border-transparent";
+export declare const SWATCH_LIGHT_BORDER = "bear-border-gray-200";
+export declare const CHECK_CLASSES = "bear-text-white drop-shadow-sm";
+export declare const LIGHT_CHECK_CLASSES = "bear-text-gray-800";
+export declare const GROUP_CLASSES = "Bear-ColorSwatchGroup bear-flex bear-flex-wrap";
+export declare const LABEL_CLASSES = "bear-block bear-text-[10px] bear-text-center bear-mt-1 bear-text-gray-500 dark:bear-text-zinc-400 bear-truncate";
+export declare const LIGHT_THRESHOLD = 200;
+export declare const DEFAULT_GAP = 8;

package/dist/components/ColorSwatch/ColorSwatch.const.js

@@ -0,0 +1,19 @@
+const r = {
+  sm: 24,
+  md: 32,
+  lg: 40,
+  xl: 56
+}, e = "Bear-ColorSwatch bear-inline-flex bear-items-center bear-justify-center bear-cursor-pointer bear-transition-all bear-border-2 hover:bear-scale-110", t = "bear-ring-2 bear-ring-offset-2 bear-ring-pink-500 dark:bear-ring-offset-zinc-900", a = "bear-border-transparent", n = "bear-border-gray-200", o = "bear-text-white drop-shadow-sm", b = "bear-text-gray-800", S = "Bear-ColorSwatchGroup bear-flex bear-flex-wrap", c = "bear-block bear-text-[10px] bear-text-center bear-mt-1 bear-text-gray-500 dark:bear-text-zinc-400 bear-truncate", s = 200, E = 8;
+export {
+  o as CHECK_CLASSES,
+  E as DEFAULT_GAP,
+  S as GROUP_CLASSES,
+  c as LABEL_CLASSES,
+  b as LIGHT_CHECK_CLASSES,
+  s as LIGHT_THRESHOLD,
+  r as SIZE_MAP,
+  e as SWATCH_CLASSES,
+  a as SWATCH_DEFAULT_BORDER,
+  n as SWATCH_LIGHT_BORDER,
+  t as SWATCH_SELECTED_CLASSES
+};

package/dist/components/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ColorSwatchProps, ColorSwatchGroupProps } from './ColorSwatch.types';
+export declare const ColorSwatch: FC<ColorSwatchProps>;
+export declare const ColorSwatchGroup: FC<ColorSwatchGroupProps>;
+export default ColorSwatch;

package/dist/components/ColorSwatch/ColorSwatch.js

@@ -0,0 +1,92 @@
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+import { useMemo as _, useCallback as h } from "react";
+import { cn as L } from "../../utils/cn.js";
+import { SIZE_MAP as u, LIGHT_CHECK_CLASSES as x, CHECK_CLASSES as T, SWATCH_LIGHT_BORDER as b, SWATCH_DEFAULT_BORDER as k, SWATCH_SELECTED_CLASSES as w, SWATCH_CLASSES as y, LABEL_CLASSES as H, DEFAULT_GAP as W, GROUP_CLASSES as D } from "./ColorSwatch.const.js";
+import { isLightColor as G } from "./ColorSwatch.utils.js";
+const N = ({
+  color: a,
+  selected: t = !1,
+  size: r = "md",
+  rounded: d = !0,
+  label: l,
+  onClick: n,
+  className: A,
+  testId: S,
+  ...E
+}) => {
+  const i = u[r], o = G(a), m = Math.max(12, i * 0.4);
+  return /* @__PURE__ */ C("div", { className: "bear-inline-flex bear-flex-col bear-items-center", children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: L(
+          y,
+          t && w,
+          o ? b : k,
+          d ? "bear-rounded-full" : "bear-rounded-md",
+          A
+        ),
+        style: { width: i, height: i, backgroundColor: a },
+        onClick: n,
+        role: "option",
+        "aria-selected": t,
+        "aria-label": l ?? a,
+        "data-testid": S,
+        ...E,
+        children: t && /* @__PURE__ */ s("svg", { className: L(o ? x : T), width: m, height: m, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ s("polyline", { points: "20 6 9 17 4 12" }) })
+      }
+    ),
+    l && /* @__PURE__ */ s("span", { className: H, style: { maxWidth: i + 8 }, children: l })
+  ] });
+}, O = ({
+  colors: a,
+  value: t,
+  onChange: r,
+  multiple: d = !1,
+  size: l = "md",
+  rounded: n = !0,
+  gap: A = W,
+  columns: S,
+  showLabel: E = !1,
+  className: i,
+  testId: o,
+  ...m
+}) => {
+  const f = _(() => t ? new Set(Array.isArray(t) ? t : [t]) : /* @__PURE__ */ new Set(), [t]), p = h((e) => {
+    if (d) {
+      const c = new Set(f);
+      c.has(e) ? c.delete(e) : c.add(e), r == null || r(Array.from(c));
+    } else
+      r == null || r(e);
+  }, [d, f, r]);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: L(D, i),
+      style: {
+        gap: A,
+        ...S ? { display: "grid", gridTemplateColumns: `repeat(${S}, 1fr)` } : {}
+      },
+      role: "listbox",
+      "aria-multiselectable": d,
+      "data-testid": o,
+      ...m,
+      children: a.map((e) => /* @__PURE__ */ s(
+        N,
+        {
+          color: e,
+          selected: f.has(e),
+          size: l,
+          rounded: n,
+          label: E ? e : void 0,
+          onClick: () => p(e)
+        },
+        e
+      ))
+    }
+  );
+};
+export {
+  N as ColorSwatch,
+  O as ColorSwatchGroup
+};