@forgedevstack/bear 1.0.2 → 1.0.4-alpha

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,68 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f, useState as A } from "react";
+import { cn as t } from "../../utils/cn.js";
+import { Typography as K } from "../Typography/Typography.js";
+const N = "Bear-CodeBlock bear-rounded-lg bear-overflow-hidden", S = "bear-bg-white bear-text-gray-900 bear-border bear-border-gray-200", v = "bear-bg-zinc-900 bear-text-gray-100", m = "bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-gray-100 bear-border bear-border-gray-200 dark:bear-border-zinc-700", R = "Bear-CodeBlock__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-2", z = "bear-bg-gray-50 bear-border-b bear-border-gray-200", T = "bear-bg-zinc-800 bear-border-b bear-border-zinc-700", w = "bear-bg-gray-50 dark:bear-bg-zinc-800 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", G = "Bear-CodeBlock__language bear-text-xs bear-px-2 bear-py-0.5 bear-rounded", U = "bear-bg-gray-200 bear-text-gray-600", I = "bear-bg-zinc-700 bear-text-zinc-400", H = "bear-bg-gray-200 dark:bear-bg-zinc-700 bear-text-gray-600 dark:bear-text-zinc-400", M = "Bear-CodeBlock__copy bear-p-1.5 bear-rounded bear-transition-colors", P = "hover:bear-bg-gray-200 bear-text-gray-500 hover:bear-text-gray-700", Y = "hover:bear-bg-zinc-700 bear-text-zinc-400 hover:bear-text-zinc-200", j = "hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-200", W = "Bear-CodeBlock__pre bear-overflow-x-auto bear-p-4 bear-m-0", V = "Bear-CodeBlock__code bear-text-sm bear-font-mono", $ = "Bear-CodeBlock__line bear-flex", q = "Bear-CodeBlock__line-number bear-select-none bear-w-8 bear-flex-shrink-0 bear-text-right bear-pr-4", F = "bear-text-gray-400", J = "bear-text-zinc-600", Q = "bear-text-gray-400 dark:bear-text-zinc-600", X = f(({
+  code: c,
+  language: i = "typescript",
+  showLineNumbers: l = !0,
+  title: n,
+  copyable: s = !0,
+  maxHeight: o,
+  theme: r = "auto",
+  className: _ = "",
+  testId: O,
+  id: g,
+  ...E
+}, B) => {
+  const [b, d] = A(!1), L = async () => {
+    await navigator.clipboard.writeText(c), d(!0), setTimeout(() => d(!1), 2e3);
+  }, p = c.split(`
+`), x = () => r === "light" ? S : r === "dark" ? v : m, y = () => r === "light" ? z : r === "dark" ? T : w, h = () => r === "light" ? U : r === "dark" ? I : H, u = () => r === "light" ? P : r === "dark" ? Y : j, k = () => r === "light" ? F : r === "dark" ? J : Q;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: g,
+      "data-testid": O,
+      className: t(N, x(), _),
+      children: [
+        (n || s) && /* @__PURE__ */ a("div", { className: t(R, y()), children: [
+          /* @__PURE__ */ a("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
+            n && /* @__PURE__ */ e(K, { variant: "caption", className: "Bear-CodeBlock__title bear-font-medium", children: n }),
+            i && /* @__PURE__ */ e("span", { className: t(G, h()), children: i })
+          ] }),
+          s && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: L,
+              className: t(M, u()),
+              title: b ? "Copied!" : "Copy code",
+              "aria-label": b ? "Copied!" : "Copy code",
+              children: b ? /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+                /* @__PURE__ */ e("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ e("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "pre",
+          {
+            ref: B,
+            className: W,
+            style: { maxHeight: o ? typeof o == "number" ? `${o}px` : o : void 0 },
+            ...E,
+            children: /* @__PURE__ */ e("code", { className: V, children: p.map((D, C) => /* @__PURE__ */ a("div", { className: $, children: [
+              l && /* @__PURE__ */ e("span", { className: t(q, k()), children: C + 1 }),
+              /* @__PURE__ */ e("span", { className: "Bear-CodeBlock__line-content bear-flex-1", children: D || " " })
+            ] }, C)) })
+          }
+        )
+      ]
+    }
+  );
+});
+X.displayName = "CodeBlock";
+export {
+  X as CodeBlock
+};

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+export interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
+    /** Code content to display */
+    code: string;
+    /** Programming language for display label */
+    language?: string;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Title displayed in header */
+    title?: string;
+    /** Show copy button */
+    copyable?: boolean;
+    /** Maximum height with scroll */
+    maxHeight?: number | string;
+    /** Theme: 'auto' follows system, 'light' or 'dark' forces theme */
+    theme?: 'auto' | 'dark' | 'light';
+    /** Test ID for testing */
+    testId?: string;
+    /** Element ID */
+    id?: string;
+}

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

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock.types';

package/dist/components/Columns/Columns.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("../../utils/cn.cjs"),c={none:"0",xs:"0.5rem",sm:"1rem",md:"1.5rem",lg:"2rem",xl:"3rem"},b=({children:l,count:e="auto",gap:n="md",fill:r=!1,minWidth:o,className:s,style:m})=>{const t={columnCount:e==="auto"?"auto":e,columnGap:c[n],columnFill:r?"balance":"auto",...o&&{columnWidth:typeof o=="number"?`${o}px`:o},...m};return u.jsx("div",{className:a.cn("bear-w-full",s),style:t,children:l})},i=({children:l,span:e="avoid",className:n,style:r})=>u.jsx("div",{className:a.cn("bear-inline-block bear-w-full bear-mb-4",e==="avoid"&&"bear-break-inside-avoid",n),style:r,children:l});exports.Column=i;exports.Columns=b;

package/dist/components/Columns/Columns.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ColumnsProps, ColumnProps } from './Columns.types';
+export declare const Columns: FC<ColumnsProps>;
+export declare const Column: FC<ColumnProps>;
+export default Columns;

package/dist/components/Columns/Columns.js

@@ -0,0 +1,54 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const c = {
+  none: "0",
+  xs: "0.5rem",
+  sm: "1rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "3rem"
+}, d = ({
+  children: l,
+  count: o = "auto",
+  gap: a = "md",
+  fill: r = !1,
+  minWidth: e,
+  className: u,
+  style: s
+}) => {
+  const t = {
+    columnCount: o === "auto" ? "auto" : o,
+    columnGap: c[a],
+    columnFill: r ? "balance" : "auto",
+    ...e && { columnWidth: typeof e == "number" ? `${e}px` : e },
+    ...s
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: n("bear-w-full", u),
+      style: t,
+      children: l
+    }
+  );
+}, f = ({
+  children: l,
+  span: o = "avoid",
+  className: a,
+  style: r
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    className: n(
+      "bear-inline-block bear-w-full bear-mb-4",
+      o === "avoid" && "bear-break-inside-avoid",
+      a
+    ),
+    style: r,
+    children: l
+  }
+);
+export {
+  f as Column,
+  d as Columns
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface ColumnsProps {
+    children: ReactNode;
+    count?: 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    fill?: boolean;
+    minWidth?: string | number;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ColumnProps {
+    children: ReactNode;
+    span?: 'avoid' | 'auto';
+    className?: string;
+    style?: CSSProperties;
+}
+export type ColumnsCountType = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';

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

@@ -0,0 +1,2 @@
+export { Columns, Column } from './Columns';
+export type { ColumnsProps, ColumnProps, ColumnsCountType } from './Columns.types';

package/dist/components/DateTimePicker/DateTimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),re=require("../Calendar/Calendar.cjs"),d=require("../../utils/cn.cjs"),te=require("../../hooks/useBearStyles.cjs"),D=require("./DateTimePicker.utils.cjs"),ae=({value:n,onChange:b,minDate:M,maxDate:S,disabled:m=!1,placeholder:C="Select date and time",label:j,error:u,helperText:y,dateFormat:H="MM/DD/YYYY",timeFormat:l="12h",minuteStep:g=5,clearable:P=!0,className:T,style:q,bis:A,slots:V,weekdayLabels:O,firstDayOfWeek:B=0,size:E="md",variant:L="default"})=>{const[f,x]=s.useState(!1),[R,N]=s.useState(n??new Date),[o,c]=s.useState(()=>n??new Date),h=s.useRef(null),v=te.useBearStyles(A,q);s.useEffect(()=>{const e=t=>{h.current&&!h.current.contains(t.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),s.useEffect(()=>{c(n?new Date(n):new Date)},[n,f]);const Y=s.useCallback(e=>{c(t=>{const a=new Date(e);return a.setHours(t.getHours(),t.getMinutes(),0,0),a})},[]),_=s.useCallback(()=>{b==null||b(o),x(!1)},[o,b]),$=s.useCallback(()=>{b==null||b(null),x(!1)},[b]),I=s.useCallback(()=>{const e=new Date;c(e),N(e)},[]),W=s.useCallback(e=>N(e),[]),G=l==="12h"?Array.from({length:12},(e,t)=>t+1):Array.from({length:24},(e,t)=>t),p=Array.from({length:60/g},(e,t)=>t*g),w=o.getHours(),k=o.getMinutes(),J=l==="12h"?w%12||12:w,K=p.includes(k)?k:p[0]??0,z=w>=12?"PM":"AM",Q=e=>{const t=l==="12h"?z==="PM"?e===12?12:e+12:e===12?0:e:e;c(a=>{const i=new Date(a);return i.setHours(t,a.getMinutes(),0,0),i})},U=e=>{c(t=>{const a=new Date(t);return a.setMinutes(e,0,0),a})},X=e=>{c(t=>{const a=new Date(t),i=a.getHours();return e==="PM"&&i<12?a.setHours(i+12):e==="AM"&&i>=12&&a.setHours(i-12),a})},Z={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-zinc-800 bear-border-zinc-600",filled:"bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-500"},ee=n?`${D.formatDate(n,H)} ${D.formatTime(n,l)}`:"";return r.jsxs("div",{ref:h,className:d.cn("bear-relative",T),style:Object.keys(v).length?v:void 0,children:[j&&r.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:j}),r.jsxs("button",{type:"button",onClick:()=>!m&&x(!f),disabled:m,className:d.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",Z[E],F[L],u?"bear-border-red-500":"focus:bear-border-pink-500",m&&"bear-opacity-50 bear-cursor-not-allowed",n?"bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{children:ee||C}),r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),u&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-red-400",children:u}),y&&!u&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-zinc-500",children:y}),f&&r.jsxs("div",{className:"bear-absolute bear-z-50 bear-mt-2 bear-left-0 bear-right-0 bear-bg-white bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 bear-overflow-hidden bear-w-full bear-max-w-sm",children:[r.jsx(re.Calendar,{inline:!0,viewDate:R,onViewChange:W,value:o,onSelect:Y,minDate:M,maxDate:S,slots:V,weekdayLabels:O,firstDayOfWeek:B,clearable:!1,showTodayButton:!1}),r.jsxs("div",{className:"bear-px-4 bear-pb-3 bear-pt-2 bear-border-t bear-border-zinc-200",children:[r.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Hour"}),r.jsx("div",{className:"bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin",children:G.map(e=>r.jsx("button",{type:"button",onClick:()=>Q(e),className:d.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",J===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e.toString().padStart(2,"0")},e))})]}),r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Minute"}),r.jsx("div",{className:"bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin",children:p.map(e=>r.jsx("button",{type:"button",onClick:()=>U(e),className:d.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",K===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e.toString().padStart(2,"0")},e))})]}),l==="12h"&&r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Period"}),r.jsx("div",{className:"bear-space-y-0.5",children:["AM","PM"].map(e=>r.jsx("button",{type:"button",onClick:()=>X(e),className:d.cn("bear-w-full bear-py-2 bear-rounded bear-text-sm bear-transition-colors",z===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e},e))})]})]}),r.jsxs("div",{className:"bear-flex bear-gap-2 bear-justify-between",children:[P&&n?r.jsx("button",{type:"button",onClick:$,className:"bear-text-sm bear-text-zinc-500 hover:bear-text-zinc-700",children:"Clear"}):r.jsx("span",{}),r.jsxs("div",{className:"bear-flex bear-gap-2",children:[r.jsx("button",{type:"button",onClick:I,className:"bear-text-sm bear-text-bear-600 hover:bear-text-bear-700 bear-font-medium",children:"Today"}),r.jsx("button",{type:"button",onClick:_,className:"bear-text-sm bear-bg-bear-500 bear-text-white bear-px-3 bear-py-1 bear-rounded bear-font-medium hover:bear-bg-bear-600",children:"Confirm"})]})]})]})]})]})};exports.DateTimePicker=ae;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),re=require("../Calendar/Calendar.cjs"),d=require("../../utils/cn.cjs"),te=require("../../hooks/useBearStyles.cjs"),D=require("./DateTimePicker.utils.cjs"),ae=({value:n,onChange:b,minDate:M,maxDate:S,disabled:m=!1,placeholder:C="Select date and time",label:y,error:u,helperText:j,dateFormat:H="MM/DD/YYYY",timeFormat:l="12h",minuteStep:g=5,clearable:P=!0,className:T,style:q,bis:A,slots:V,weekdayLabels:O,firstDayOfWeek:B=0,size:E="md",variant:L="default"})=>{const[f,x]=s.useState(!1),[R,k]=s.useState(n??new Date),[o,c]=s.useState(()=>n??new Date),h=s.useRef(null),N=te.useBearStyles(A,q);s.useEffect(()=>{const e=t=>{h.current&&!h.current.contains(t.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),s.useEffect(()=>{c(n?new Date(n):new Date)},[n,f]);const Y=s.useCallback(e=>{c(t=>{const a=new Date(e);return a.setHours(t.getHours(),t.getMinutes(),0,0),a})},[]),_=s.useCallback(()=>{b==null||b(o),x(!1)},[o,b]),$=s.useCallback(()=>{b==null||b(null),x(!1)},[b]),I=s.useCallback(()=>{const e=new Date;c(e),k(e)},[]),W=s.useCallback(e=>k(e),[]),G=l==="12h"?Array.from({length:12},(e,t)=>t+1):Array.from({length:24},(e,t)=>t),p=Array.from({length:60/g},(e,t)=>t*g),w=o.getHours(),v=o.getMinutes(),J=l==="12h"?w%12||12:w,K=p.includes(v)?v:p[0]??0,z=w>=12?"PM":"AM",Q=e=>{const t=l==="12h"?z==="PM"?e===12?12:e+12:e===12?0:e:e;c(a=>{const i=new Date(a);return i.setHours(t,a.getMinutes(),0,0),i})},U=e=>{c(t=>{const a=new Date(t);return a.setMinutes(e,0,0),a})},X=e=>{c(t=>{const a=new Date(t),i=a.getHours();return e==="PM"&&i<12?a.setHours(i+12):e==="AM"&&i>=12&&a.setHours(i-12),a})},Z={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-zinc-800 bear-border-zinc-600",filled:"bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-500"},ee=n?`${D.formatDate(n,H)} ${D.formatTime(n,l)}`:"";return r.jsxs("div",{ref:h,className:d.cn("bear-relative",T),style:Object.keys(N).length?N:void 0,children:[y&&r.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:y}),r.jsxs("button",{type:"button",onClick:()=>!m&&x(!f),disabled:m,className:d.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",Z[E],F[L],u?"bear-border-red-500":"focus:bear-border-pink-500",m&&"bear-opacity-50 bear-cursor-not-allowed",n?"bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{children:ee||C}),r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),u&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-red-400",children:u}),j&&!u&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-zinc-500",children:j}),f&&r.jsxs("div",{className:"bear-absolute bear-z-50 bear-mt-2 bear-left-0 bear-right-0 bear-bg-white dark:bear-bg-gray-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-overflow-hidden bear-w-full bear-max-w-sm",children:[r.jsx(re.Calendar,{inline:!0,viewDate:R,onViewChange:W,value:o,onSelect:Y,minDate:M,maxDate:S,slots:V,weekdayLabels:O,firstDayOfWeek:B,clearable:!1,showTodayButton:!1}),r.jsxs("div",{className:"bear-px-4 bear-pb-3 bear-pt-2 bear-border-t bear-border-zinc-200",children:[r.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Hour"}),r.jsx("div",{className:"bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin",children:G.map(e=>r.jsx("button",{type:"button",onClick:()=>Q(e),className:d.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",J===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e.toString().padStart(2,"0")},e))})]}),r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Minute"}),r.jsx("div",{className:"bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin",children:p.map(e=>r.jsx("button",{type:"button",onClick:()=>U(e),className:d.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",K===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e.toString().padStart(2,"0")},e))})]}),l==="12h"&&r.jsxs("div",{className:"bear-flex-1",children:[r.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Period"}),r.jsx("div",{className:"bear-space-y-0.5",children:["AM","PM"].map(e=>r.jsx("button",{type:"button",onClick:()=>X(e),className:d.cn("bear-w-full bear-py-2 bear-rounded bear-text-sm bear-transition-colors",z===e?"bear-bg-bear-500 bear-text-white":"bear-text-zinc-700 hover:bear-bg-zinc-100"),children:e},e))})]})]}),r.jsxs("div",{className:"bear-flex bear-gap-2 bear-justify-between",children:[P&&n?r.jsx("button",{type:"button",onClick:$,className:"bear-text-sm bear-text-zinc-500 hover:bear-text-zinc-700",children:"Clear"}):r.jsx("span",{}),r.jsxs("div",{className:"bear-flex bear-gap-2",children:[r.jsx("button",{type:"button",onClick:I,className:"bear-text-sm bear-text-bear-600 hover:bear-text-bear-700 bear-font-medium",children:"Today"}),r.jsx("button",{type:"button",onClick:_,className:"bear-text-sm bear-bg-bear-500 bear-text-white bear-px-3 bear-py-1 bear-rounded bear-font-medium hover:bear-bg-bear-600",children:"Confirm"})]})]})]})]})]})};exports.DateTimePicker=ae;

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -1,22 +1,22 @@
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { useState as N, useRef as ae, useEffect as S, useCallback as d } from "react";
-import { Calendar as ne } from "../Calendar/Calendar.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as g, useRef as ae, useEffect as S, useCallback as d } from "react";
+import { Calendar as be } from "../Calendar/Calendar.js";
 import { cn as u } from "../../utils/cn.js";
-import { useBearStyles as be } from "../../hooks/useBearStyles.js";
+import { useBearStyles as ne } from "../../hooks/useBearStyles.js";
 import { formatDate as se, formatTime as oe } from "./DateTimePicker.utils.js";
 const xe = ({
-  value: n,
+  value: b,
   onChange: s,
   minDate: C,
   maxDate: P,
   disabled: f = !1,
   placeholder: j = "Select date and time",
-  label: g,
+  label: N,
   error: m,
-  helperText: v,
+  helperText: z,
   dateFormat: A = "MM/DD/YYYY",
   timeFormat: i = "12h",
-  minuteStep: z = 5,
+  minuteStep: v = 5,
   clearable: V = !0,
   className: L,
   style: O,
@@ -27,15 +27,15 @@ const xe = ({
   size: _ = "md",
   variant: R = "default"
 }) => {
-  const [h, x] = N(!1), [$, k] = N(n ?? /* @__PURE__ */ new Date()), [l, o] = N(() => n ?? /* @__PURE__ */ new Date()), p = ae(null), M = be(T, O);
+  const [h, x] = g(!1), [$, k] = g(b ?? /* @__PURE__ */ new Date()), [l, o] = g(() => b ?? /* @__PURE__ */ new Date()), p = ae(null), M = ne(T, O);
   S(() => {
     const e = (t) => {
       p.current && !p.current.contains(t.target) && x(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []), S(() => {
-    o(n ? new Date(n) : /* @__PURE__ */ new Date());
-  }, [n, h]);
+    o(b ? new Date(b) : /* @__PURE__ */ new Date());
+  }, [b, h]);
   const I = d((e) => {
     o((t) => {
       const a = new Date(e);
@@ -48,7 +48,7 @@ const xe = ({
   }, [s]), G = d(() => {
     const e = /* @__PURE__ */ new Date();
     o(e), k(e);
-  }, []), J = d((e) => k(e), []), K = i === "12h" ? Array.from({ length: 12 }, (e, t) => t + 1) : Array.from({ length: 24 }, (e, t) => t), w = Array.from({ length: 60 / z }, (e, t) => t * z), y = l.getHours(), D = l.getMinutes(), Q = i === "12h" ? y % 12 || 12 : y, U = w.includes(D) ? D : w[0] ?? 0, H = y >= 12 ? "PM" : "AM", X = (e) => {
+  }, []), J = d((e) => k(e), []), K = i === "12h" ? Array.from({ length: 12 }, (e, t) => t + 1) : Array.from({ length: 24 }, (e, t) => t), w = Array.from({ length: 60 / v }, (e, t) => t * v), y = l.getHours(), D = l.getMinutes(), Q = i === "12h" ? y % 12 || 12 : y, U = w.includes(D) ? D : w[0] ?? 0, H = y >= 12 ? "PM" : "AM", X = (e) => {
     const t = i === "12h" ? H === "PM" ? e === 12 ? 12 : e + 12 : e === 12 ? 0 : e : e;
     o((a) => {
       const c = new Date(a);
@@ -68,10 +68,10 @@ const xe = ({
     default: "bear-bg-zinc-800 bear-border-zinc-600",
     filled: "bear-bg-zinc-700 bear-border-transparent",
     outline: "bear-bg-transparent bear-border-zinc-500"
-  }, te = n ? `${se(n, A)} ${oe(n, i)}` : "";
-  return /* @__PURE__ */ b("div", { ref: p, className: u("bear-relative", L), style: Object.keys(M).length ? M : void 0, children: [
-    g && /* @__PURE__ */ r("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: g }),
-    /* @__PURE__ */ b(
+  }, te = b ? `${se(b, A)} ${oe(b, i)}` : "";
+  return /* @__PURE__ */ n("div", { ref: p, className: u("bear-relative", L), style: Object.keys(M).length ? M : void 0, children: [
+    N && /* @__PURE__ */ r("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: N }),
+    /* @__PURE__ */ n(
       "button",
       {
         type: "button",
@@ -83,7 +83,7 @@ const xe = ({
           re[R],
           m ? "bear-border-red-500" : "focus:bear-border-pink-500",
           f && "bear-opacity-50 bear-cursor-not-allowed",
-          n ? "bear-text-white" : "bear-text-zinc-500"
+          b ? "bear-text-white" : "bear-text-zinc-500"
         ),
         children: [
           /* @__PURE__ */ r("span", { children: te || j }),
@@ -92,10 +92,10 @@ const xe = ({
       }
     ),
     m && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: m }),
-    v && !m && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: v }),
-    h && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-mt-2 bear-left-0 bear-right-0 bear-bg-white bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 bear-overflow-hidden bear-w-full bear-max-w-sm", children: [
+    z && !m && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: z }),
+    h && /* @__PURE__ */ n("div", { className: "bear-absolute bear-z-50 bear-mt-2 bear-left-0 bear-right-0 bear-bg-white dark:bear-bg-gray-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-overflow-hidden bear-w-full bear-max-w-sm", children: [
       /* @__PURE__ */ r(
-        ne,
+        be,
         {
           inline: !0,
           viewDate: $,
@@ -111,9 +111,9 @@ const xe = ({
           showTodayButton: !1
         }
       ),
-      /* @__PURE__ */ b("div", { className: "bear-px-4 bear-pb-3 bear-pt-2 bear-border-t bear-border-zinc-200", children: [
-        /* @__PURE__ */ b("div", { className: "bear-flex bear-gap-2 bear-mb-3", children: [
-          /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
+      /* @__PURE__ */ n("div", { className: "bear-px-4 bear-pb-3 bear-pt-2 bear-border-t bear-border-zinc-200", children: [
+        /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-2 bear-mb-3", children: [
+          /* @__PURE__ */ n("div", { className: "bear-flex-1", children: [
             /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Hour" }),
             /* @__PURE__ */ r("div", { className: "bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin", children: K.map((e) => /* @__PURE__ */ r(
               "button",
@@ -129,7 +129,7 @@ const xe = ({
               e
             )) })
           ] }),
-          /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
+          /* @__PURE__ */ n("div", { className: "bear-flex-1", children: [
             /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Minute" }),
             /* @__PURE__ */ r("div", { className: "bear-h-24 bear-overflow-y-auto bear-space-y-0.5 bear-scrollbar-thin", children: w.map((e) => /* @__PURE__ */ r(
               "button",
@@ -145,7 +145,7 @@ const xe = ({
               e
             )) })
           ] }),
-          i === "12h" && /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
+          i === "12h" && /* @__PURE__ */ n("div", { className: "bear-flex-1", children: [
             /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Period" }),
             /* @__PURE__ */ r("div", { className: "bear-space-y-0.5", children: ["AM", "PM"].map((e) => /* @__PURE__ */ r(
               "button",
@@ -162,9 +162,9 @@ const xe = ({
             )) })
           ] })
         ] }),
-        /* @__PURE__ */ b("div", { className: "bear-flex bear-gap-2 bear-justify-between", children: [
-          V && n ? /* @__PURE__ */ r("button", { type: "button", onClick: q, className: "bear-text-sm bear-text-zinc-500 hover:bear-text-zinc-700", children: "Clear" }) : /* @__PURE__ */ r("span", {}),
-          /* @__PURE__ */ b("div", { className: "bear-flex bear-gap-2", children: [
+        /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-2 bear-justify-between", children: [
+          V && b ? /* @__PURE__ */ r("button", { type: "button", onClick: q, className: "bear-text-sm bear-text-zinc-500 hover:bear-text-zinc-700", children: "Clear" }) : /* @__PURE__ */ r("span", {}),
+          /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-2", children: [
             /* @__PURE__ */ r("button", { type: "button", onClick: G, className: "bear-text-sm bear-text-bear-600 hover:bear-text-bear-700 bear-font-medium", children: "Today" }),
             /* @__PURE__ */ r("button", { type: "button", onClick: W, className: "bear-text-sm bear-bg-bear-500 bear-text-white bear-px-3 bear-py-1 bear-rounded bear-font-medium hover:bear-bg-bear-600", children: "Confirm" })
           ] })

package/dist/components/Editable/Editable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),y=require("../Button/Button.cjs"),k=require("../Icon/index.cjs"),w=e.createContext(null),d=()=>{const t=e.useContext(w);if(!t)throw new Error("Editable components must be used within Editable.Root");return t},j=e.forwardRef(({children:t,defaultValue:s="",value:a,onChange:i,onEditSubmit:r,onCancel:b,placeholder:u="Click to edit...",isDisabled:l=!1,startWithEditView:p=!1,className:c="",...f},m)=>{const[o,x]=e.useState(p),[I,T]=e.useState(s),[E,_]=e.useState(s),g=a!==void 0?a:I,v=e.useCallback(h=>{a===void 0&&T(h),i==null||i(h)},[a,i]),P=e.useCallback(()=>{l||(_(g),x(!0))},[l,g]),q=e.useCallback(()=>{x(!1)},[]),D=e.useCallback(()=>{r==null||r(g),x(!1)},[g,r]),K=e.useCallback(()=>{v(E),b==null||b(),x(!1)},[E,v,b]);return n.jsx(w.Provider,{value:{isEditing:o,value:g,startEditing:P,stopEditing:q,setValue:v,submit:D,cancel:K},children:n.jsx("div",{ref:m,className:`Bear-Editable bear-inline-block ${c}`.trim(),...f,children:t})})});j.displayName="Editable.Root";const N=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r,value:b,startEditing:u}=d();return r?null:n.jsx("span",{ref:i,className:`Bear-Editable__preview bear-cursor-pointer bear-px-2 bear-py-1 bear-rounded bear-transition-all bear-border bear-border-transparent hover:bear-border-gray-300 dark:hover:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white ${s}`.trim(),onClick:u,...a,children:t||b||n.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500 bear-italic",children:"Click to edit..."})})});N.displayName="Editable.Preview";const C=e.forwardRef(({asTextarea:t=!1,className:s="",...a},i)=>{const{isEditing:r,value:b,setValue:u,submit:l,cancel:p}=d(),c=e.useRef(null);e.useEffect(()=>{r&&c.current&&(c.current.focus(),c.current.select())},[r]);const f=o=>{o.key==="Enter"&&!t&&(o.preventDefault(),l()),o.key==="Escape"&&p()};if(!r)return null;const m="Bear-Editable__input bear-w-full bear-px-2 bear-py-1 bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-rounded bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500";return t?n.jsx("textarea",{ref:i,value:b,onChange:o=>u(o.target.value),onKeyDown:f,onBlur:l,className:`${m} bear-min-h-[80px] bear-resize-y ${s}`.trim(),...a}):n.jsx("input",{ref:c,type:"text",value:b,onChange:o=>u(o.target.value),onKeyDown:f,onBlur:l,className:`${m} ${s}`.trim(),...a})});C.displayName="Editable.Input";const R=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r}=d();return r?n.jsx("div",{ref:i,className:`Bear-Editable__control bear-flex bear-items-center bear-gap-1 bear-mt-1 ${s}`.trim(),...a,children:t}):null});R.displayName="Editable.Control";const z=e.forwardRef(({children:t,className:s="",...a},i)=>{const{submit:r}=d();return n.jsx(y.Button,{ref:i,type:"button",onClick:r,variant:"ghost",size:"sm",className:`bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.CheckIcon,{size:16})})});z.displayName="Editable.SubmitTrigger";const B=e.forwardRef(({children:t,className:s="",...a},i)=>{const{cancel:r}=d();return n.jsx(y.Button,{ref:i,type:"button",onClick:r,variant:"ghost",size:"sm",className:`bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.CloseIcon,{size:16})})});B.displayName="Editable.CancelTrigger";const $=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r,startEditing:b}=d();return r?null:n.jsx(y.Button,{ref:i,type:"button",onClick:b,variant:"ghost",size:"sm",className:`bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.EditIcon,{size:16})})});$.displayName="Editable.EditTrigger";const S={Root:j,Preview:N,Input:C,Control:R,SubmitTrigger:z,CancelTrigger:B,EditTrigger:$};exports.Editable=S;

package/dist/components/Editable/Editable.d.ts

@@ -0,0 +1,10 @@
+import { EditableRootProps, EditablePreviewProps, EditableInputProps, EditableControlProps, EditableSubmitTriggerProps, EditableCancelTriggerProps, EditableEditTriggerProps } from './Editable.types';
+export declare const Editable: {
+    Root: import('react').ForwardRefExoticComponent<EditableRootProps & import('react').RefAttributes<HTMLDivElement>>;
+    Preview: import('react').ForwardRefExoticComponent<EditablePreviewProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Input: import('react').ForwardRefExoticComponent<EditableInputProps & import('react').RefAttributes<HTMLInputElement>>;
+    Control: import('react').ForwardRefExoticComponent<EditableControlProps & import('react').RefAttributes<HTMLDivElement>>;
+    SubmitTrigger: import('react').ForwardRefExoticComponent<EditableSubmitTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+    CancelTrigger: import('react').ForwardRefExoticComponent<EditableCancelTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+    EditTrigger: import('react').ForwardRefExoticComponent<EditableEditTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/Editable/Editable.js

@@ -0,0 +1,194 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as A, forwardRef as o, useState as h, useCallback as m, useRef as F, useEffect as G, useContext as H } from "react";
+import { Button as k } from "../Button/Button.js";
+import { CheckIcon as J, CloseIcon as L, EditIcon as M } from "../Icon/index.js";
+const N = A(null), d = () => {
+  const r = H(N);
+  if (!r)
+    throw new Error("Editable components must be used within Editable.Root");
+  return r;
+}, z = o(({
+  children: r,
+  defaultValue: i = "",
+  value: t,
+  onChange: a,
+  onEditSubmit: e,
+  onCancel: s,
+  placeholder: u = "Click to edit...",
+  isDisabled: l = !1,
+  startWithEditView: y = !1,
+  className: c = "",
+  ...p
+}, f) => {
+  const [b, v] = h(y), [T, P] = h(i), [x, D] = h(i), g = t !== void 0 ? t : T, E = m((w) => {
+    t === void 0 && P(w), a == null || a(w);
+  }, [t, a]), K = m(() => {
+    l || (D(g), v(!0));
+  }, [l, g]), j = m(() => {
+    v(!1);
+  }, []), V = m(() => {
+    e == null || e(g), v(!1);
+  }, [g, e]), q = m(() => {
+    E(x), s == null || s(), v(!1);
+  }, [x, E, s]);
+  return /* @__PURE__ */ n(N.Provider, { value: { isEditing: b, value: g, startEditing: K, stopEditing: j, setValue: E, submit: V, cancel: q }, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: f,
+      className: `Bear-Editable bear-inline-block ${c}`.trim(),
+      ...p,
+      children: r
+    }
+  ) });
+});
+z.displayName = "Editable.Root";
+const C = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, value: s, startEditing: u } = d();
+  return e ? null : /* @__PURE__ */ n(
+    "span",
+    {
+      ref: a,
+      className: `Bear-Editable__preview bear-cursor-pointer bear-px-2 bear-py-1 bear-rounded bear-transition-all bear-border bear-border-transparent hover:bear-border-gray-300 dark:hover:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white ${i}`.trim(),
+      onClick: u,
+      ...t,
+      children: r || s || /* @__PURE__ */ n("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500 bear-italic", children: "Click to edit..." })
+    }
+  );
+});
+C.displayName = "Editable.Preview";
+const $ = o(({
+  asTextarea: r = !1,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, value: s, setValue: u, submit: l, cancel: y } = d(), c = F(null);
+  G(() => {
+    e && c.current && (c.current.focus(), c.current.select());
+  }, [e]);
+  const p = (b) => {
+    b.key === "Enter" && !r && (b.preventDefault(), l()), b.key === "Escape" && y();
+  };
+  if (!e) return null;
+  const f = "Bear-Editable__input bear-w-full bear-px-2 bear-py-1 bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-rounded bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500";
+  return r ? /* @__PURE__ */ n(
+    "textarea",
+    {
+      ref: a,
+      value: s,
+      onChange: (b) => u(b.target.value),
+      onKeyDown: p,
+      onBlur: l,
+      className: `${f} bear-min-h-[80px] bear-resize-y ${i}`.trim(),
+      ...t
+    }
+  ) : /* @__PURE__ */ n(
+    "input",
+    {
+      ref: c,
+      type: "text",
+      value: s,
+      onChange: (b) => u(b.target.value),
+      onKeyDown: p,
+      onBlur: l,
+      className: `${f} ${i}`.trim(),
+      ...t
+    }
+  );
+});
+$.displayName = "Editable.Input";
+const B = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e } = d();
+  return e ? /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      className: `Bear-Editable__control bear-flex bear-items-center bear-gap-1 bear-mt-1 ${i}`.trim(),
+      ...t,
+      children: r
+    }
+  ) : null;
+});
+B.displayName = "Editable.Control";
+const I = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { submit: e } = d();
+  return /* @__PURE__ */ n(
+    k,
+    {
+      ref: a,
+      type: "button",
+      onClick: e,
+      variant: "ghost",
+      size: "sm",
+      className: `bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(J, { size: 16 })
+    }
+  );
+});
+I.displayName = "Editable.SubmitTrigger";
+const R = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { cancel: e } = d();
+  return /* @__PURE__ */ n(
+    k,
+    {
+      ref: a,
+      type: "button",
+      onClick: e,
+      variant: "ghost",
+      size: "sm",
+      className: `bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(L, { size: 16 })
+    }
+  );
+});
+R.displayName = "Editable.CancelTrigger";
+const _ = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, startEditing: s } = d();
+  return e ? null : /* @__PURE__ */ n(
+    k,
+    {
+      ref: a,
+      type: "button",
+      onClick: s,
+      variant: "ghost",
+      size: "sm",
+      className: `bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(M, { size: 16 })
+    }
+  );
+});
+_.displayName = "Editable.EditTrigger";
+const X = {
+  Root: z,
+  Preview: C,
+  Input: $,
+  Control: B,
+  SubmitTrigger: I,
+  CancelTrigger: R,
+  EditTrigger: _
+};
+export {
+  X as Editable
+};

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
+export interface EditableContextValue {
+    isEditing: boolean;
+    value: string;
+    startEditing: () => void;
+    stopEditing: () => void;
+    setValue: (value: string) => void;
+    submit: () => void;
+    cancel: () => void;
+}
+export interface EditableRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit'> {
+    children?: ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onEditSubmit?: (value: string) => void;
+    onCancel?: () => void;
+    placeholder?: string;
+    isDisabled?: boolean;
+    startWithEditView?: boolean;
+}
+export interface EditablePreviewProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+export interface EditableInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    asTextarea?: boolean;
+}
+export interface EditableControlProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface EditableSubmitTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+export interface EditableCancelTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+export interface EditableEditTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Editable } from './Editable';
+export type { EditableRootProps, EditablePreviewProps, EditableInputProps, EditableControlProps, EditableSubmitTriggerProps, EditableCancelTriggerProps, EditableEditTriggerProps, } from './Editable.types';

package/dist/components/Em/Em.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),o={default:"italic text-inherit",strong:"italic font-semibold text-gray-900 dark:text-white",subtle:"italic text-gray-500 dark:text-gray-400"},t=n.forwardRef(({children:e,variant:a="default",className:r="",...i},s)=>l.jsx("em",{ref:s,className:`bear-em ${o[a]} ${r}`.trim(),...i,children:e}));t.displayName="Em";exports.Em=t;

package/dist/components/Em/Em.d.ts

@@ -0,0 +1,2 @@
+import { EmProps } from './Em.types';
+export declare const Em: import('react').ForwardRefExoticComponent<EmProps & import('react').RefAttributes<HTMLElement>>;