@forgedevstack/bear 1.1.3 → 1.1.8

package/dist/components/Popconfirm/Popconfirm.js

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as y, useCallback as F, useEffect as C } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { Typography as S } from "../Typography/Typography.js";
+import { DEFAULT_CONFIRM_TEXT as P, DEFAULT_CANCEL_TEXT as x, ICON_AREA_CLASSES as I, ICON_WRAPPER_CLASSES as g, CONTENT_CLASSES as w, BUTTONS_WRAPPER_CLASSES as B, CANCEL_BTN_CLASSES as U, CONFIRM_BTN_DANGER_CLASSES as D, CONFIRM_BTN_DEFAULT_CLASSES as M, PLACEMENT_OFFSETS as j, POPUP_CLASSES as W, ROOT_CLASS as z } from "./Popconfirm.const.js";
+const X = /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), Q = (N) => {
+  const {
+    title: u,
+    description: d,
+    onConfirm: o,
+    onCancel: s,
+    confirmText: h = P,
+    cancelText: L = x,
+    icon: f = X,
+    placement: p = "bottom",
+    disabled: m = !1,
+    children: _,
+    variant: T = "default",
+    testId: v
+  } = N, [n, E] = R(!1), c = y(null), t = F(() => E(!1), []);
+  C(() => {
+    const r = (i) => {
+      c.current && !c.current.contains(i.target) && t();
+    };
+    return n && document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [n, t]), C(() => {
+    const r = (i) => {
+      i.key === "Escape" && t();
+    };
+    return n && document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [n, t]);
+  const A = () => {
+    m || E(!n);
+  }, b = () => {
+    o == null || o(), t();
+  }, k = () => {
+    s == null || s(), t();
+  }, O = T === "danger" ? D : M;
+  return /* @__PURE__ */ a("div", { ref: c, className: l(z, "bear-relative bear-inline-block"), "data-testid": v, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        onClick: A,
+        className: l("bear-cursor-pointer", m && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),
+        children: _
+      }
+    ),
+    n && /* @__PURE__ */ a("div", { className: l(W, j[p]), children: [
+      /* @__PURE__ */ a("div", { className: I, children: [
+        /* @__PURE__ */ e("div", { className: g, children: f }),
+        /* @__PURE__ */ a("div", { className: w, children: [
+          /* @__PURE__ */ e(S, { variant: "body2", className: "bear-text-gray-900 dark:bear-text-zinc-100", children: u }),
+          d && /* @__PURE__ */ e(S, { variant: "caption", color: "secondary", className: "bear-mt-0.5", children: d })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: B, children: [
+        /* @__PURE__ */ e("button", { type: "button", className: U, onClick: k, children: L }),
+        /* @__PURE__ */ e("button", { type: "button", className: O, onClick: b, children: h })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as Popconfirm
+};

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export type PopconfirmPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface PopconfirmProps {
+    title: string;
+    description?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    icon?: ReactNode;
+    placement?: PopconfirmPlacement;
+    disabled?: boolean;
+    children: ReactNode;
+    variant?: 'default' | 'danger';
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Popconfirm, default } from './Popconfirm';
+export type { PopconfirmProps, PopconfirmPlacement } from './Popconfirm.types';

package/dist/components/Progress/Progress.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-pink-500",success:"bear-bg-green-500",warning:"bear-bg-yellow-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:n,max:b=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,n/b*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:n,"aria-valuemin":0,"aria-valuemax":b,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-bear-500",success:"bear-bg-green-500",warning:"bear-bg-amber-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:b,max:n=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,b/n*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:b,"aria-valuemin":0,"aria-valuemax":n,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;

package/dist/components/Progress/Progress.js

@@ -6,20 +6,20 @@ const f = {
   md: "bear-h-2.5",
   lg: "bear-h-4"
 }, h = {
-  default: "bear-bg-pink-500",
+  default: "bear-bg-bear-500",
   success: "bear-bg-green-500",
-  warning: "bear-bg-yellow-500",
+  warning: "bear-bg-amber-500",
   danger: "bear-bg-red-500",
   info: "bear-bg-blue-500"
 }, y = ({
   value: n,
   max: l = 100,
   size: d = "md",
-  color: g = "default",
+  color: m = "default",
   showLabel: i = !1,
   labelPosition: o = "outside",
   striped: r = !1,
-  animated: m = !1,
+  animated: g = !1,
   indeterminate: e = !1,
   className: c,
   testId: u
@@ -46,9 +46,9 @@ const f = {
             className: b(
               "bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out",
               "bear-flex bear-items-center bear-justify-center",
-              h[g],
+              h[m],
               r && "bear-bg-stripes",
-              m && "bear-animate-stripes",
+              g && "bear-animate-stripes",
               e && "bear-animate-indeterminate"
             ),
             style: {

package/dist/components/PropsPlayground/PropsPlayground.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),n=require("../../utils/cn.cjs"),j=require("../Icon/Icon.cjs"),l=require("./PropsPlayground.const.cjs"),_=require("./PropsPlayground.utils.cjs"),$=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})}),q=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"9 18 15 12 9 6"})}),I=({size:b})=>e.jsxs(j.Icon,{size:b,children:[e.jsx("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),e.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),e.jsx("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),e.jsx("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),e.jsx("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),e.jsx("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),e.jsx("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),e.jsx("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]}),O=({config:b,render:z,title:y="Props",size:S="md",defaultCollapsed:C=!1,showReset:w=!0,columns:P=3,className:L,testId:k})=>{const u=c.useMemo(()=>_.getDefaults(b),[b]),[g,f]=c.useState(u),[p,E]=c.useState(C),o=c.useCallback((r,s)=>{f(i=>({...i,[r]:s}))},[]),A=c.useCallback(()=>{f(u)},[u]),t=l.SIZE_CLASSES[S],N=Object.keys(b).length,m=n.cn("bear-w-full bear-rounded-md bear-border bear-border-zinc-700","bear-bg-zinc-800 bear-text-zinc-100","placeholder:bear-text-zinc-500","focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/30 focus:bear-border-pink-500","bear-transition-colors",t.input);return e.jsxs("div",{"data-testid":k,className:n.cn(l.ROOT_CLASS,"bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",L),children:[e.jsxs("button",{type:"button",onClick:()=>E(r=>!r),className:n.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors","bear-bg-zinc-800/60 hover:bear-bg-zinc-800","bear-text-zinc-200 bear-border-b bear-border-zinc-700","bear-px-4 bear-py-3",t.text),children:[e.jsx("span",{className:"bear-text-pink-500",children:p?e.jsx(q,{size:12}):e.jsx($,{size:12})}),e.jsx("span",{className:"bear-text-pink-500",children:e.jsx(I,{size:14})}),e.jsx("span",{className:"bear-font-semibold",children:y}),e.jsxs("span",{className:"bear-ml-auto bear-flex bear-items-center bear-gap-2",children:[e.jsxs("span",{className:"bear-text-[10px] bear-font-medium bear-text-zinc-500",children:[N," ",N===1?"control":"controls"]}),w&&!p&&e.jsx("button",{type:"button",onClick:r=>{r.stopPropagation(),A()},className:"bear-text-[10px] bear-font-semibold bear-text-pink-500 hover:bear-text-pink-400 hover:bear-underline",children:"Reset"})]})]}),!p&&e.jsx("div",{className:n.cn("bear-bg-zinc-900/50",t.padding),children:e.jsx("div",{className:n.cn("bear-grid",t.gap,l.COLUMN_CLASSES[P]),children:Object.entries(b).map(([r,s])=>{const i=g[r],d=r.replace(/([A-Z])/g," $1").replace(/^./,a=>a.toUpperCase()).trim();if(s.type==="boolean"){const a=i===!0;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsx("span",{className:n.cn("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500 bear-mb-2",t.label),children:l.TYPE_LABELS.boolean}),e.jsxs("label",{className:"bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":a,onClick:()=>o(r,!a),className:n.cn("bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",a?"bear-bg-pink-500":"bear-bg-zinc-600"),children:e.jsx("span",{className:n.cn("bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",a?"bear-translate-x-4":"bear-translate-x-0")})}),e.jsx("span",{className:n.cn("bear-font-medium bear-text-zinc-200 bear-truncate",t.text),children:d})]})]},r)}if(s.type==="select"&&s.options)return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.select})]}),e.jsx("select",{id:`pp-${r}`,value:String(i),onChange:a=>{const x=s.options.find(h=>String(h.value)===a.target.value);o(r,x?x.value:a.target.value)},className:n.cn(m,"bear-cursor-pointer bear-appearance-none"),children:s.options.map(a=>e.jsx("option",{value:String(a.value),children:a.label},String(a.value)))})]},r);if(s.type==="number"){const a=Number(i),x=Number.isNaN(a)?s.default:a;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.number})]}),e.jsx("input",{id:`pp-${r}`,type:"number",value:x,min:s.min,max:s.max,step:s.step,onChange:h=>{const v=h.target.valueAsNumber;o(r,Number.isNaN(v)?s.default:v)},className:m})]},r)}return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.string})]}),e.jsx("input",{id:`pp-${r}`,type:"text",value:String(i??""),onChange:a=>o(r,a.target.value),placeholder:s.placeholder,className:m})]},r)})})}),e.jsx("div",{className:"bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]",children:e.jsx("div",{className:"bear-w-full",children:z(g)})})]})};exports.PropsPlayground=O;

package/dist/components/PropsPlayground/PropsPlayground.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-PropsPlayground",a={xs:{padding:"bear-p-2",text:"bear-text-[10px]",gap:"bear-gap-2",label:"bear-text-[9px]",input:"bear-px-1.5 bear-py-0.5 bear-text-[10px]"},sm:{padding:"bear-p-3",text:"bear-text-xs",gap:"bear-gap-2",label:"bear-text-[10px]",input:"bear-px-2 bear-py-1 bear-text-xs"},md:{padding:"bear-p-4",text:"bear-text-sm",gap:"bear-gap-3",label:"bear-text-[11px]",input:"bear-px-2.5 bear-py-1.5 bear-text-xs"},lg:{padding:"bear-p-5",text:"bear-text-sm",gap:"bear-gap-3",label:"bear-text-xs",input:"bear-px-3 bear-py-2 bear-text-sm"},xl:{padding:"bear-p-6",text:"bear-text-base",gap:"bear-gap-4",label:"bear-text-sm",input:"bear-px-3.5 bear-py-2.5 bear-text-base"}},t={1:"bear-grid-cols-1",2:"bear-grid-cols-2",3:"bear-grid-cols-3",4:"bear-grid-cols-4"},r={boolean:"bool",select:"select",number:"num",string:"str"};exports.COLUMN_CLASSES=t;exports.ROOT_CLASS=e;exports.SIZE_CLASSES=a;exports.TYPE_LABELS=r;

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

@@ -0,0 +1,11 @@
+import { BearSize } from '../../types';
+export declare const ROOT_CLASS = "Bear-PropsPlayground";
+export declare const SIZE_CLASSES: Record<BearSize, {
+    padding: string;
+    text: string;
+    gap: string;
+    label: string;
+    input: string;
+}>;
+export declare const COLUMN_CLASSES: Record<number, string>;
+export declare const TYPE_LABELS: Record<string, string>;

package/dist/components/PropsPlayground/PropsPlayground.const.js

@@ -0,0 +1,23 @@
+const e = "Bear-PropsPlayground", a = {
+  xs: { padding: "bear-p-2", text: "bear-text-[10px]", gap: "bear-gap-2", label: "bear-text-[9px]", input: "bear-px-1.5 bear-py-0.5 bear-text-[10px]" },
+  sm: { padding: "bear-p-3", text: "bear-text-xs", gap: "bear-gap-2", label: "bear-text-[10px]", input: "bear-px-2 bear-py-1 bear-text-xs" },
+  md: { padding: "bear-p-4", text: "bear-text-sm", gap: "bear-gap-3", label: "bear-text-[11px]", input: "bear-px-2.5 bear-py-1.5 bear-text-xs" },
+  lg: { padding: "bear-p-5", text: "bear-text-sm", gap: "bear-gap-3", label: "bear-text-xs", input: "bear-px-3 bear-py-2 bear-text-sm" },
+  xl: { padding: "bear-p-6", text: "bear-text-base", gap: "bear-gap-4", label: "bear-text-sm", input: "bear-px-3.5 bear-py-2.5 bear-text-base" }
+}, t = {
+  1: "bear-grid-cols-1",
+  2: "bear-grid-cols-2",
+  3: "bear-grid-cols-3",
+  4: "bear-grid-cols-4"
+}, r = {
+  boolean: "bool",
+  select: "select",
+  number: "num",
+  string: "str"
+};
+export {
+  t as COLUMN_CLASSES,
+  e as ROOT_CLASS,
+  a as SIZE_CLASSES,
+  r as TYPE_LABELS
+};

package/dist/components/PropsPlayground/PropsPlayground.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PropsPlaygroundProps } from './PropsPlayground.types';
+export declare const PropsPlayground: FC<PropsPlaygroundProps>;

package/dist/components/PropsPlayground/PropsPlayground.js

@@ -0,0 +1,221 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useMemo as R, useState as y, useCallback as C } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { SIZE_CLASSES as _, TYPE_LABELS as m, COLUMN_CLASSES as F, ROOT_CLASS as I } from "./PropsPlayground.const.js";
+import { getDefaults as V } from "./PropsPlayground.utils.js";
+const D = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) }), M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" }) }), T = ({ size: i }) => /* @__PURE__ */ b(f, { size: i, children: [
+  /* @__PURE__ */ e("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+  /* @__PURE__ */ e("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+  /* @__PURE__ */ e("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+  /* @__PURE__ */ e("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+  /* @__PURE__ */ e("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+  /* @__PURE__ */ e("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+] }), H = ({
+  config: i,
+  render: w,
+  title: S = "Props",
+  size: k = "md",
+  defaultCollapsed: j = !1,
+  showReset: $ = !0,
+  columns: A = 3,
+  className: L,
+  testId: E
+}) => {
+  const p = R(() => V(i), [i]), [g, N] = y(p), [u, O] = y(j), o = C(
+    (r, t) => {
+      N((s) => ({ ...s, [r]: t }));
+    },
+    []
+  ), P = C(() => {
+    N(p);
+  }, [p]), l = _[k], v = Object.keys(i).length, h = n(
+    "bear-w-full bear-rounded-md bear-border bear-border-zinc-700",
+    "bear-bg-zinc-800 bear-text-zinc-100",
+    "placeholder:bear-text-zinc-500",
+    "focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/30 focus:bear-border-pink-500",
+    "bear-transition-colors",
+    l.input
+  );
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      "data-testid": E,
+      className: n(
+        I,
+        "bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",
+        L
+      ),
+      children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            onClick: () => O((r) => !r),
+            className: n(
+              "bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors",
+              "bear-bg-zinc-800/60 hover:bear-bg-zinc-800",
+              "bear-text-zinc-200 bear-border-b bear-border-zinc-700",
+              "bear-px-4 bear-py-3",
+              l.text
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { className: "bear-text-pink-500", children: u ? /* @__PURE__ */ e(M, { size: 12 }) : /* @__PURE__ */ e(D, { size: 12 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-text-pink-500", children: /* @__PURE__ */ e(T, { size: 14 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-font-semibold", children: S }),
+              /* @__PURE__ */ b("span", { className: "bear-ml-auto bear-flex bear-items-center bear-gap-2", children: [
+                /* @__PURE__ */ b("span", { className: "bear-text-[10px] bear-font-medium bear-text-zinc-500", children: [
+                  v,
+                  " ",
+                  v === 1 ? "control" : "controls"
+                ] }),
+                $ && !u && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (r) => {
+                      r.stopPropagation(), P();
+                    },
+                    className: "bear-text-[10px] bear-font-semibold bear-text-pink-500 hover:bear-text-pink-400 hover:bear-underline",
+                    children: "Reset"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !u && /* @__PURE__ */ e("div", { className: n("bear-bg-zinc-900/50", l.padding), children: /* @__PURE__ */ e("div", { className: n("bear-grid", l.gap, F[A]), children: Object.entries(i).map(([r, t]) => {
+          const s = g[r], c = r.replace(/([A-Z])/g, " $1").replace(/^./, (a) => a.toUpperCase()).trim();
+          if (t.type === "boolean") {
+            const a = s === !0;
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ e("span", { className: n("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500 bear-mb-2", l.label), children: m.boolean }),
+                  /* @__PURE__ */ b("label", { className: "bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer", children: [
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        role: "switch",
+                        "aria-checked": a,
+                        onClick: () => o(r, !a),
+                        className: n(
+                          "bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",
+                          a ? "bear-bg-pink-500" : "bear-bg-zinc-600"
+                        ),
+                        children: /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: n(
+                              "bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",
+                              a ? "bear-translate-x-4" : "bear-translate-x-0"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-medium bear-text-zinc-200 bear-truncate", l.text), children: c })
+                  ] })
+                ]
+              },
+              r
+            );
+          }
+          if (t.type === "select" && t.options)
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                    /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.select })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "select",
+                    {
+                      id: `pp-${r}`,
+                      value: String(s),
+                      onChange: (a) => {
+                        const d = t.options.find((x) => String(x.value) === a.target.value);
+                        o(r, d ? d.value : a.target.value);
+                      },
+                      className: n(h, "bear-cursor-pointer bear-appearance-none"),
+                      children: t.options.map((a) => /* @__PURE__ */ e("option", { value: String(a.value), children: a.label }, String(a.value)))
+                    }
+                  )
+                ]
+              },
+              r
+            );
+          if (t.type === "number") {
+            const a = Number(s), d = Number.isNaN(a) ? t.default : a;
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                    /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.number })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      id: `pp-${r}`,
+                      type: "number",
+                      value: d,
+                      min: t.min,
+                      max: t.max,
+                      step: t.step,
+                      onChange: (x) => {
+                        const z = x.target.valueAsNumber;
+                        o(r, Number.isNaN(z) ? t.default : z);
+                      },
+                      className: h
+                    }
+                  )
+                ]
+              },
+              r
+            );
+          }
+          return /* @__PURE__ */ b(
+            "div",
+            {
+              className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+              children: [
+                /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                  /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                  /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.string })
+                ] }),
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    id: `pp-${r}`,
+                    type: "text",
+                    value: String(s ?? ""),
+                    onChange: (a) => o(r, a.target.value),
+                    placeholder: t.placeholder,
+                    className: h
+                  }
+                )
+              ]
+            },
+            r
+          );
+        }) }) }),
+        /* @__PURE__ */ e("div", { className: "bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]", children: /* @__PURE__ */ e("div", { className: "bear-w-full", children: w(g) }) })
+      ]
+    }
+  );
+};
+export {
+  H as PropsPlayground
+};

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { BearSize } from '../../types';
+export type PropControlType = 'boolean' | 'string' | 'number' | 'select';
+export interface PropControlOption {
+    label: string;
+    value: string | number | boolean;
+}
+export interface PropControlConfig {
+    type: PropControlType;
+    default: string | number | boolean;
+    options?: PropControlOption[];
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+}
+export type PropsConfig = Record<string, PropControlConfig>;
+export type PropValues = Record<string, string | number | boolean>;
+export interface PropsPlaygroundProps {
+    config: PropsConfig;
+    render: (values: PropValues) => ReactNode;
+    title?: string;
+    size?: BearSize;
+    defaultCollapsed?: boolean;
+    showReset?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+    testId?: string;
+}

package/dist/components/PropsPlayground/PropsPlayground.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(t){const e={};for(const[o,u]of Object.entries(t))e[o]=u.default;return e}exports.getDefaults=n;

package/dist/components/PropsPlayground/PropsPlayground.utils.d.ts

@@ -0,0 +1,2 @@
+import { PropsConfig, PropValues } from './PropsPlayground.types';
+export declare function getDefaults(config: PropsConfig): PropValues;

package/dist/components/PropsPlayground/PropsPlayground.utils.js

@@ -0,0 +1,9 @@
+function c(e) {
+  const t = {};
+  for (const [o, n] of Object.entries(e))
+    t[o] = n.default;
+  return t;
+}
+export {
+  c as getDefaults
+};

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

@@ -0,0 +1,2 @@
+export { PropsPlayground } from './PropsPlayground';
+export type { PropsPlaygroundProps, PropsConfig, PropValues, PropControlConfig, PropControlOption, PropControlType } from './PropsPlayground.types';

package/dist/components/RadioCard/RadioCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react"),A=require("../../utils/cn.cjs"),j=require("../Typography/Typography.cjs"),s=require("./RadioCard.const.cjs"),x=c.createContext(null),h=({value:d,checked:t,onChange:i,label:f,description:n,icon:u,disabled:l=!1,variant:v="default",size:y="md",testId:R,className:k,onClick:r,...S})=>{const e=c.useContext(x),o=!!e,m=o?(e==null?void 0:e.value)===d:!!t,N=c.useCallback(b=>{l||((e==null?void 0:e.disabled)??!1)||(r==null||r(b),o&&e?e.onChange(d):i==null||i(d))},[l,e,o,d,i,r]),p=l||((e==null?void 0:e.disabled)??!1);return a.jsxs("div",{role:"radio","aria-checked":m,"aria-disabled":p,tabIndex:p?void 0:0,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),N(b))},className:A.cn(s.ROOT_CLASS,s.SIZE_PADDING_MAP[y],s.VARIANT_CLASSES[v],m&&s.CHECKED_CLASSES,p&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",!p&&"hover:bear-border-gray-300 dark:hover:bear-border-gray-600",k),onClick:N,"data-testid":R,...S,children:[a.jsx("div",{className:A.cn("bear-absolute bear-top-3 bear-right-3 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-2",m?"bear-border-pink-500 dark:bear-border-pink-400":"bear-border-gray-300 dark:bear-border-gray-600",s.RADIO_INDICATOR_SIZE_MAP[y]),children:m&&a.jsx("div",{className:"bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 dark:bear-bg-pink-400"})}),u&&a.jsx("div",{className:"bear-mb-3 bear-flex bear-items-center bear-justify-center bear-text-gray-500 dark:bear-text-gray-400",children:u}),a.jsx(j.Typography,{variant:"body2",weight:"medium",className:"bear-block",children:f}),n&&a.jsx(j.Typography,{variant:"caption",color:"secondary",className:"bear-mt-1 bear-block",children:n})]})};h.displayName="RadioCard";const _=({value:d,onChange:t,children:i,columns:f=s.DEFAULT_COLUMNS,gap:n=s.DEFAULT_GAP,name:u,testId:l,className:v,...y})=>{const[R,k]=c.useState(""),r=d!==void 0,S=r?d:R,e=c.useCallback(o=>{r||k(o),t==null||t(o)},[r,t]);return a.jsx(x.Provider,{value:{value:S,onChange:e,name:u},children:a.jsx("div",{role:"radiogroup",className:A.cn("Bear-RadioCardGroup bear-grid",v),style:{gridTemplateColumns:`repeat(${f}, minmax(0, 1fr))`,gap:`${n*.25}rem`},"data-testid":l,...y,children:i})})};_.displayName="RadioCardGroup";exports.RadioCard=h;exports.RadioCardGroup=_;

package/dist/components/RadioCard/RadioCard.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-RadioCard 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,A=4;exports.CHECKED_CLASSES=a;exports.DEFAULT_COLUMNS=o;exports.DEFAULT_GAP=A;exports.RADIO_INDICATOR_SIZE_MAP=d;exports.ROOT_CLASS=b;exports.SIZE_PADDING_MAP=r;exports.VARIANT_CLASSES=e;

package/dist/components/RadioCard/RadioCard.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-RadioCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left";
+export declare const RADIO_INDICATOR_SIZE_MAP: Record<'sm' | 'md' | 'lg', string>;
+export declare const DEFAULT_COLUMNS = 1;
+export declare const DEFAULT_GAP = 4;

package/dist/components/RadioCard/RadioCard.const.js

@@ -0,0 +1,22 @@
+const r = {
+  sm: "bear-p-3",
+  md: "bear-p-4",
+  lg: "bear-p-5"
+}, a = {
+  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"
+}, e = "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-RadioCard 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 {
+  e as CHECKED_CLASSES,
+  o as DEFAULT_COLUMNS,
+  n as DEFAULT_GAP,
+  d as RADIO_INDICATOR_SIZE_MAP,
+  b as ROOT_CLASS,
+  r as SIZE_PADDING_MAP,
+  a as VARIANT_CLASSES
+};

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RadioCardProps, RadioCardGroupProps } from './RadioCard.types';
+export declare const RadioCard: FC<RadioCardProps>;
+export declare const RadioCardGroup: FC<RadioCardGroupProps>;
+export default RadioCard;

package/dist/components/RadioCard/RadioCard.js

@@ -0,0 +1,111 @@
+import { jsxs as R, jsx as d } from "react/jsx-runtime";
+import { createContext as _, useContext as h, useCallback as D, useState as E } from "react";
+import { cn as A } from "../../utils/cn.js";
+import { Typography as S } from "../Typography/Typography.js";
+import { RADIO_INDICATOR_SIZE_MAP as G, CHECKED_CLASSES as T, VARIANT_CLASSES as x, SIZE_PADDING_MAP as L, ROOT_CLASS as C, DEFAULT_COLUMNS as O, DEFAULT_GAP as P } from "./RadioCard.const.js";
+const I = _(null), j = ({
+  value: a,
+  checked: t,
+  onChange: i,
+  label: p,
+  description: l,
+  icon: c,
+  disabled: b = !1,
+  variant: u = "default",
+  size: n = "md",
+  testId: y,
+  className: v,
+  onClick: e,
+  ...k
+}) => {
+  const r = h(I), s = !!r, m = s ? (r == null ? void 0 : r.value) === a : !!t, N = D(
+    (o) => {
+      b || ((r == null ? void 0 : r.disabled) ?? !1) || (e == null || e(o), s && r ? r.onChange(a) : i == null || i(a));
+    },
+    [b, r, s, a, i, e]
+  ), f = b || ((r == null ? void 0 : r.disabled) ?? !1);
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      role: "radio",
+      "aria-checked": m,
+      "aria-disabled": f,
+      tabIndex: f ? void 0 : 0,
+      onKeyDown: (o) => {
+        (o.key === "Enter" || o.key === " ") && (o.preventDefault(), N(o));
+      },
+      className: A(
+        C,
+        L[n],
+        x[u],
+        m && T,
+        f && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",
+        !f && "hover:bear-border-gray-300 dark:hover:bear-border-gray-600",
+        v
+      ),
+      onClick: N,
+      "data-testid": y,
+      ...k,
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: A(
+              "bear-absolute bear-top-3 bear-right-3 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-2",
+              m ? "bear-border-pink-500 dark:bear-border-pink-400" : "bear-border-gray-300 dark:bear-border-gray-600",
+              G[n]
+            ),
+            children: m && /* @__PURE__ */ d("div", { className: "bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 dark:bear-bg-pink-400" })
+          }
+        ),
+        c && /* @__PURE__ */ d("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__ */ d(S, { variant: "body2", weight: "medium", className: "bear-block", children: p }),
+        l && /* @__PURE__ */ d(S, { variant: "caption", color: "secondary", className: "bear-mt-1 bear-block", children: l })
+      ]
+    }
+  );
+};
+j.displayName = "RadioCard";
+const w = ({
+  value: a,
+  onChange: t,
+  children: i,
+  columns: p = O,
+  gap: l = P,
+  name: c,
+  testId: b,
+  className: u,
+  ...n
+}) => {
+  const [y, v] = E(""), e = a !== void 0, k = e ? a : y, r = D(
+    (s) => {
+      e || v(s), t == null || t(s);
+    },
+    [e, t]
+  );
+  return /* @__PURE__ */ d(
+    I.Provider,
+    {
+      value: { value: k, onChange: r, name: c },
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          role: "radiogroup",
+          className: A("Bear-RadioCardGroup bear-grid", u),
+          style: {
+            gridTemplateColumns: `repeat(${p}, minmax(0, 1fr))`,
+            gap: `${l * 0.25}rem`
+          },
+          "data-testid": b,
+          ...n,
+          children: i
+        }
+      )
+    }
+  );
+};
+w.displayName = "RadioCardGroup";
+export {
+  j as RadioCard,
+  w as RadioCardGroup
+};