@forgedevstack/bear 1.0.1 → 1.0.2

package/dist/components/DatePicker/DatePicker.js

@@ -1,111 +1,103 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as M, useRef as B, useEffect as E, useCallback as I } from "react";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useState as f, useRef as q, useEffect as A, useCallback as c } from "react";
+import { Calendar as F } from "../Calendar/Calendar.js";
 import { cn as p } from "../../utils/cn.js";
-const J = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], H = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], P = (e, r = "MM/DD/YYYY") => {
-  if (!e) return "";
-  const c = e.getDate().toString().padStart(2, "0"), i = (e.getMonth() + 1).toString().padStart(2, "0"), b = e.getFullYear().toString();
-  return r.replace("DD", c).replace("MM", i).replace("YYYY", b);
-}, R = (e, r) => !e || !r ? !1 : e.getDate() === r.getDate() && e.getMonth() === r.getMonth() && e.getFullYear() === r.getFullYear(), T = (e, r) => new Date(e, r + 1, 0).getDate(), $ = (e, r) => new Date(e, r, 1).getDay(), Q = ({
-  value: e,
-  onChange: r,
-  minDate: c,
-  maxDate: i,
+import { useBearStyles as G } from "../../hooks/useBearStyles.js";
+import { formatDate as J } from "./DatePicker.utils.js";
+const $ = ({
+  value: a,
+  onChange: e,
+  minDate: x,
+  maxDate: w,
   disabled: b = !1,
   placeholder: k = "Select date",
-  label: f,
-  error: d,
-  helperText: g,
-  format: z = "MM/DD/YYYY",
-  clearable: v = !0,
-  className: N,
-  size: Y = "md",
-  variant: y = "default"
+  label: o,
+  error: l,
+  helperText: i,
+  format: y = "MM/DD/YYYY",
+  clearable: z = !0,
+  className: v,
+  style: D,
+  bis: N,
+  showWeekNumbers: S = !1,
+  disabledDates: V = [],
+  highlightedDates: h = [],
+  slots: j,
+  weekdayLabels: L,
+  firstDayOfWeek: M = 0,
+  size: O = "md",
+  variant: Y = "default"
 }) => {
-  const [x, u] = M(!1), [n, w] = M(e || /* @__PURE__ */ new Date()), m = B(null);
-  E(() => {
-    const s = (o) => {
-      m.current && !m.current.contains(o.target) && u(!1);
+  const [d, s] = f(!1), [B, E] = f(a ?? /* @__PURE__ */ new Date()), n = q(null), m = G(N, D);
+  A(() => {
+    const r = (W) => {
+      n.current && !n.current.contains(W.target) && s(!1);
     };
-    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
   }, []);
-  const S = I((s) => {
-    const o = new Date(n.getFullYear(), n.getMonth(), s);
-    r == null || r(o), u(!1);
-  }, [n, r]), F = () => w(new Date(n.getFullYear(), n.getMonth() - 1, 1)), L = () => w(new Date(n.getFullYear(), n.getMonth() + 1, 1)), D = (s) => {
-    const o = new Date(n.getFullYear(), n.getMonth(), s);
-    return !!(c && o < c || i && o > i);
-  }, j = () => {
-    const s = n.getFullYear(), o = n.getMonth(), V = T(s, o), W = $(s, o), h = [];
-    for (let a = 0; a < W; a++) h.push(null);
-    for (let a = 1; a <= V; a++) h.push(a);
-    return /* @__PURE__ */ l("div", { className: "bear-absolute bear-z-50 bear-mt-1 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-72", children: [
-      /* @__PURE__ */ l("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-3", children: [
-        /* @__PURE__ */ t("button", { onClick: F, className: "bear-p-1 bear-rounded hover:bear-bg-zinc-700 bear-text-zinc-400", children: /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-        /* @__PURE__ */ l("span", { className: "bear-font-medium bear-text-white", children: [
-          H[o],
-          " ",
-          s
-        ] }),
-        /* @__PURE__ */ t("button", { onClick: L, className: "bear-p-1 bear-rounded hover:bear-bg-zinc-700 bear-text-zinc-400", children: /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2", children: J.map((a) => /* @__PURE__ */ t("div", { className: "bear-text-center bear-text-xs bear-text-zinc-500 bear-font-medium", children: a }, a)) }),
-      /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-1", children: h.map((a, A) => a === null ? /* @__PURE__ */ t("div", {}, `empty-${A}`) : /* @__PURE__ */ t(
-        "button",
-        {
-          onClick: () => S(a),
-          disabled: D(a),
-          className: p(
-            "bear-w-8 bear-h-8 bear-rounded bear-text-sm bear-transition-colors",
-            R(e ?? null, new Date(s, o, a)) ? "bear-bg-pink-500 bear-text-white" : "bear-text-zinc-300 hover:bear-bg-zinc-700",
-            D(a) && "bear-opacity-30 bear-cursor-not-allowed"
-          ),
-          children: a
-        },
-        a
-      )) }),
-      v && e && /* @__PURE__ */ t(
-        "button",
-        {
-          onClick: () => {
-            r == null || r(null), u(!1);
-          },
-          className: "bear-w-full bear-mt-3 bear-py-1.5 bear-text-sm bear-text-zinc-400 hover:bear-text-white bear-border-t bear-border-zinc-700",
-          children: "Clear"
-        }
-      )
-    ] });
-  }, O = { 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" }, C = {
+  const R = c(
+    (r) => {
+      e == null || e(r), s(!1);
+    },
+    [e]
+  ), H = c(() => {
+    e == null || e(null), s(!1);
+  }, [e]), I = c((r) => {
+    E(r);
+  }, []), P = { 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" }, T = {
     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"
   };
-  return /* @__PURE__ */ l("div", { ref: m, className: p("bear-relative", N), children: [
-    f && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: f }),
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ u("div", { ref: n, className: p("bear-relative", v), style: Object.keys(m).length ? m : void 0, children: [
+    o && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: o }),
+    /* @__PURE__ */ u(
       "button",
       {
         type: "button",
-        onClick: () => !b && u(!x),
+        onClick: () => !b && s(!d),
         disabled: b,
         className: p(
           "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
-          O[Y],
-          C[y],
-          d ? "bear-border-red-500" : "focus:bear-border-pink-500",
+          P[O],
+          T[Y],
+          l ? "bear-border-red-500" : "focus:bear-border-pink-500",
           b && "bear-opacity-50 bear-cursor-not-allowed",
-          e ? "bear-text-white" : "bear-text-zinc-500"
+          a ? "bear-text-white" : "bear-text-zinc-500"
         ),
         children: [
-          /* @__PURE__ */ t("span", { children: e ? P(e, z) : k }),
-          /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("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" }) })
+          /* @__PURE__ */ t("span", { children: a ? J(a, y) : k }),
+          /* @__PURE__ */ t("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: /* @__PURE__ */ t("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" }) })
         ]
       }
     ),
-    d && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: d }),
-    g && !d && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: g }),
-    x && j()
+    l && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: l }),
+    i && !l && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: i }),
+    d && /* @__PURE__ */ t(
+      F,
+      {
+        viewDate: B,
+        onViewChange: I,
+        value: a ?? null,
+        onSelect: R,
+        minDate: x,
+        maxDate: w,
+        disabledDates: V,
+        highlightedDates: h,
+        slots: j,
+        weekdayLabels: L,
+        firstDayOfWeek: M,
+        showWeekNumbers: S,
+        clearable: z,
+        onClear: H,
+        showTodayButton: !0,
+        onToday: () => {
+          e == null || e(/* @__PURE__ */ new Date()), s(!1);
+        }
+      }
+    )
   ] });
 };
 export {
-  Q as DatePicker
+  $ as DatePicker
 };

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { CalendarSlots } from '../Calendar/Calendar.types';
+import { BisProp } from '../../types/bis.types';
 export interface DatePickerProps {
     value?: Date | null;
     onChange?: (date: Date | null) => void;
@@ -16,9 +18,16 @@ export interface DatePickerProps {
     rangeValue?: [Date | null, Date | null];
     clearable?: boolean;
     className?: string;
+    style?: React.CSSProperties;
+    /** Bear Inner Style - sx-like overrides */
+    bis?: BisProp;
     showWeekNumbers?: boolean;
     disabledDates?: Date[];
     highlightedDates?: Date[];
+    /** Customize calendar via slots (header, day, nav, etc.) */
+    slots?: CalendarSlots;
+    weekdayLabels?: string[];
+    firstDayOfWeek?: number;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'filled' | 'outline';
     leftIcon?: ReactNode;

package/dist/components/DatePicker/DatePicker.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a="MM/DD/YYYY";function c(t,e=a){if(!t)return"";const r=t.getDate().toString().padStart(2,"0"),o=(t.getMonth()+1).toString().padStart(2,"0"),n=t.getFullYear().toString();return e.replace("DD",r).replace("MM",o).replace("YYYY",n)}exports.formatDate=c;

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

@@ -0,0 +1 @@
+export declare function formatDate(date: Date | null, format?: string): string;

package/dist/components/DatePicker/DatePicker.utils.js

@@ -0,0 +1,9 @@
+const Y = "MM/DD/YYYY";
+function a(t, r = Y) {
+  if (!t) return "";
+  const e = t.getDate().toString().padStart(2, "0"), n = (t.getMonth() + 1).toString().padStart(2, "0"), o = t.getFullYear().toString();
+  return r.replace("DD", e).replace("MM", n).replace("YYYY", o);
+}
+export {
+  a as formatDate
+};

package/dist/components/DateTimePicker/DateTimePicker.cjs

@@ -0,0 +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;

package/dist/components/DateTimePicker/DateTimePicker.d.ts

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

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,178 @@
+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 { cn as u } from "../../utils/cn.js";
+import { useBearStyles as be } from "../../hooks/useBearStyles.js";
+import { formatDate as se, formatTime as oe } from "./DateTimePicker.utils.js";
+const xe = ({
+  value: n,
+  onChange: s,
+  minDate: C,
+  maxDate: P,
+  disabled: f = !1,
+  placeholder: j = "Select date and time",
+  label: g,
+  error: m,
+  helperText: v,
+  dateFormat: A = "MM/DD/YYYY",
+  timeFormat: i = "12h",
+  minuteStep: z = 5,
+  clearable: V = !0,
+  className: L,
+  style: O,
+  bis: T,
+  slots: Y,
+  weekdayLabels: B,
+  firstDayOfWeek: E = 0,
+  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);
+  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]);
+  const I = d((e) => {
+    o((t) => {
+      const a = new Date(e);
+      return a.setHours(t.getHours(), t.getMinutes(), 0, 0), a;
+    });
+  }, []), W = d(() => {
+    s == null || s(l), x(!1);
+  }, [l, s]), q = d(() => {
+    s == null || s(null), x(!1);
+  }, [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) => {
+    const t = i === "12h" ? H === "PM" ? e === 12 ? 12 : e + 12 : e === 12 ? 0 : e : e;
+    o((a) => {
+      const c = new Date(a);
+      return c.setHours(t, a.getMinutes(), 0, 0), c;
+    });
+  }, Z = (e) => {
+    o((t) => {
+      const a = new Date(t);
+      return a.setMinutes(e, 0, 0), a;
+    });
+  }, F = (e) => {
+    o((t) => {
+      const a = new Date(t), c = a.getHours();
+      return e === "PM" && c < 12 ? a.setHours(c + 12) : e === "AM" && c >= 12 && a.setHours(c - 12), a;
+    });
+  }, ee = { 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" }, re = {
+    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(
+      "button",
+      {
+        type: "button",
+        onClick: () => !f && x(!h),
+        disabled: f,
+        className: u(
+          "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
+          ee[_],
+          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"
+        ),
+        children: [
+          /* @__PURE__ */ r("span", { children: te || j }),
+          /* @__PURE__ */ r("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: /* @__PURE__ */ r("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" }) })
+        ]
+      }
+    ),
+    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: [
+      /* @__PURE__ */ r(
+        ne,
+        {
+          inline: !0,
+          viewDate: $,
+          onViewChange: J,
+          value: l,
+          onSelect: I,
+          minDate: C,
+          maxDate: P,
+          slots: Y,
+          weekdayLabels: B,
+          firstDayOfWeek: E,
+          clearable: !1,
+          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__ */ 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",
+              {
+                type: "button",
+                onClick: () => X(e),
+                className: u(
+                  "bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",
+                  Q === e ? "bear-bg-bear-500 bear-text-white" : "bear-text-zinc-700 hover:bear-bg-zinc-100"
+                ),
+                children: e.toString().padStart(2, "0")
+              },
+              e
+            )) })
+          ] }),
+          /* @__PURE__ */ b("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",
+              {
+                type: "button",
+                onClick: () => Z(e),
+                className: u(
+                  "bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",
+                  U === e ? "bear-bg-bear-500 bear-text-white" : "bear-text-zinc-700 hover:bear-bg-zinc-100"
+                ),
+                children: e.toString().padStart(2, "0")
+              },
+              e
+            )) })
+          ] }),
+          i === "12h" && /* @__PURE__ */ b("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",
+              {
+                type: "button",
+                onClick: () => F(e),
+                className: u(
+                  "bear-w-full bear-py-2 bear-rounded bear-text-sm bear-transition-colors",
+                  H === e ? "bear-bg-bear-500 bear-text-white" : "bear-text-zinc-700 hover:bear-bg-zinc-100"
+                ),
+                children: e
+              },
+              e
+            )) })
+          ] })
+        ] }),
+        /* @__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__ */ 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" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  xe as DateTimePicker
+};

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

@@ -0,0 +1,26 @@
+import { CalendarSlots } from '../Calendar/Calendar.types';
+import { BisProp } from '../../types/bis.types';
+export interface DateTimePickerProps {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    dateFormat?: string;
+    timeFormat?: '12h' | '24h';
+    minuteStep?: number;
+    clearable?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    bis?: BisProp;
+    /** Calendar slot overrides */
+    slots?: CalendarSlots;
+    weekdayLabels?: string[];
+    firstDayOfWeek?: number;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'filled' | 'outline';
+}

package/dist/components/DateTimePicker/DateTimePicker.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a="MM/DD/YYYY";function i(t,n=a){if(!t)return"";const r=t.getDate().toString().padStart(2,"0"),e=(t.getMonth()+1).toString().padStart(2,"0"),o=t.getFullYear().toString();return n.replace("DD",r).replace("MM",e).replace("YYYY",o)}function c(t,n){const r=t.getHours(),e=t.getMinutes();if(n==="24h")return`${r.toString().padStart(2,"0")}:${e.toString().padStart(2,"0")}`;const o=r>=12?"PM":"AM";return`${(r%12||12).toString().padStart(2,"0")}:${e.toString().padStart(2,"0")} ${o}`}exports.formatDate=i;exports.formatTime=c;

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

@@ -0,0 +1,2 @@
+export declare function formatDate(d: Date | null, format?: string): string;
+export declare function formatTime(d: Date, fmt: '12h' | '24h'): string;

package/dist/components/DateTimePicker/DateTimePicker.utils.js

@@ -0,0 +1,16 @@
+const e = "MM/DD/YYYY";
+function i(t, o = e) {
+  if (!t) return "";
+  const r = t.getDate().toString().padStart(2, "0"), n = (t.getMonth() + 1).toString().padStart(2, "0"), a = t.getFullYear().toString();
+  return o.replace("DD", r).replace("MM", n).replace("YYYY", a);
+}
+function S(t, o) {
+  const r = t.getHours(), n = t.getMinutes();
+  if (o === "24h") return `${r.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
+  const a = r >= 12 ? "PM" : "AM";
+  return `${(r % 12 || 12).toString().padStart(2, "0")}:${n.toString().padStart(2, "0")} ${a}`;
+}
+export {
+  i as formatDate,
+  S as formatTime
+};

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

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

package/dist/components/Divider/Divider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("../../utils/cn.cjs"),l={solid:"ember-border-solid",dashed:"ember-border-dashed",dotted:"ember-border-dotted"},u={left:"before:ember-w-4 after:ember-flex-1",center:"before:ember-flex-1 after:ember-flex-1",right:"before:ember-flex-1 after:ember-w-4"},c=({children:a,orientation:n="horizontal",variant:b="solid",color:d,textAlign:x="center",thickness:r=1,spacing:o=4,className:i,testId:s,style:f,...h})=>{const e=n==="horizontal";return a?t.jsxs("div",{className:m.cn("ember-flex ember-items-center ember-gap-4",e?"ember-w-full":"ember-flex-col ember-h-full",u[x],i),role:"separator",style:{marginTop:e?`${o*.25}rem`:0,marginBottom:e?`${o*.25}rem`:0,...f},"data-testid":s,children:[t.jsx("span",{className:m.cn("ember-flex-shrink-0",l[b]),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb"}}),t.jsx("span",{className:"ember-text-sm ember-text-gray-500 ember-whitespace-nowrap ember-px-2",children:a}),t.jsx("span",{className:m.cn("ember-flex-shrink-0",l[b]),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb"}})]}):t.jsx("hr",{className:m.cn("ember-border-0",e?"ember-w-full":"ember-h-full ember-w-px",l[b],i),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb",marginTop:e?`${o*.25}rem`:0,marginBottom:e?`${o*.25}rem`:0,marginLeft:e?0:`${o*.25}rem`,marginRight:e?0:`${o*.25}rem`,...f},"data-testid":s,...h})};exports.Divider=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),l={solid:"bear-border-solid",dashed:"bear-border-dashed",dotted:"bear-border-dotted"},u={left:"before:bear-w-4 after:bear-flex-1",center:"before:bear-flex-1 after:bear-flex-1",right:"before:bear-flex-1 after:bear-w-4"},c=({children:i,orientation:n="horizontal",variant:b="solid",color:d,textAlign:x="center",thickness:r=1,spacing:a=4,className:s,testId:f,style:m,...h})=>{const e=n==="horizontal";return i?o.jsxs("div",{className:t.cn("bear-flex bear-items-center bear-gap-4",e?"bear-w-full":"bear-flex-col bear-h-full",u[x],s),role:"separator",style:{marginTop:e?`${a*.25}rem`:0,marginBottom:e?`${a*.25}rem`:0,...m},"data-testid":f,children:[o.jsx("span",{className:t.cn("bear-flex-shrink-0",l[b]),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb"}}),o.jsx("span",{className:"bear-text-sm bear-text-gray-500 bear-whitespace-nowrap bear-px-2",children:i}),o.jsx("span",{className:t.cn("bear-flex-shrink-0",l[b]),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb"}})]}):o.jsx("hr",{className:t.cn("bear-border-0",e?"bear-w-full":"bear-h-full bear-w-px",l[b],s),style:{borderTopWidth:e?r:0,borderLeftWidth:e?0:r,borderColor:d||"#e5e7eb",marginTop:e?`${a*.25}rem`:0,marginBottom:e?`${a*.25}rem`:0,marginLeft:e?0:`${a*.25}rem`,marginRight:e?0:`${a*.25}rem`,...m},"data-testid":f,...h})};exports.Divider=c;

package/dist/components/Divider/Divider.js

@@ -1,49 +1,49 @@
-import { jsx as m, jsxs as p } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import { cn as t } from "../../utils/cn.js";
 const l = {
-  solid: "ember-border-solid",
-  dashed: "ember-border-dashed",
-  dotted: "ember-border-dotted"
+  solid: "bear-border-solid",
+  dashed: "bear-border-dashed",
+  dotted: "bear-border-dotted"
 }, T = {
-  left: "before:ember-w-4 after:ember-flex-1",
-  center: "before:ember-flex-1 after:ember-flex-1",
-  right: "before:ember-flex-1 after:ember-w-4"
+  left: "before:bear-w-4 after:bear-flex-1",
+  center: "before:bear-flex-1 after:bear-flex-1",
+  right: "before:bear-flex-1 after:bear-w-4"
 }, u = ({
-  children: a,
+  children: f,
   orientation: x = "horizontal",
   variant: b = "solid",
   color: d,
   textAlign: h = "center",
   thickness: r = 1,
-  spacing: o = 4,
-  className: f,
+  spacing: a = 4,
+  className: m,
   testId: i,
   style: s,
   ...n
 }) => {
   const e = x === "horizontal";
-  return a ? /* @__PURE__ */ p(
+  return f ? /* @__PURE__ */ p(
     "div",
     {
       className: t(
-        "ember-flex ember-items-center ember-gap-4",
-        e ? "ember-w-full" : "ember-flex-col ember-h-full",
+        "bear-flex bear-items-center bear-gap-4",
+        e ? "bear-w-full" : "bear-flex-col bear-h-full",
         T[h],
-        f
+        m
       ),
       role: "separator",
       style: {
-        marginTop: e ? `${o * 0.25}rem` : 0,
-        marginBottom: e ? `${o * 0.25}rem` : 0,
+        marginTop: e ? `${a * 0.25}rem` : 0,
+        marginBottom: e ? `${a * 0.25}rem` : 0,
         ...s
       },
       "data-testid": i,
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ o(
           "span",
           {
             className: t(
-              "ember-flex-shrink-0",
+              "bear-flex-shrink-0",
               l[b]
             ),
             style: {
@@ -53,12 +53,12 @@ const l = {
             }
           }
         ),
-        /* @__PURE__ */ m("span", { className: "ember-text-sm ember-text-gray-500 ember-whitespace-nowrap ember-px-2", children: a }),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ o("span", { className: "bear-text-sm bear-text-gray-500 bear-whitespace-nowrap bear-px-2", children: f }),
+        /* @__PURE__ */ o(
           "span",
           {
             className: t(
-              "ember-flex-shrink-0",
+              "bear-flex-shrink-0",
               l[b]
             ),
             style: {
@@ -70,23 +70,23 @@ const l = {
         )
       ]
     }
-  ) : /* @__PURE__ */ m(
+  ) : /* @__PURE__ */ o(
     "hr",
     {
       className: t(
-        "ember-border-0",
-        e ? "ember-w-full" : "ember-h-full ember-w-px",
+        "bear-border-0",
+        e ? "bear-w-full" : "bear-h-full bear-w-px",
         l[b],
-        f
+        m
       ),
       style: {
         borderTopWidth: e ? r : 0,
         borderLeftWidth: e ? 0 : r,
         borderColor: d || "#e5e7eb",
-        marginTop: e ? `${o * 0.25}rem` : 0,
-        marginBottom: e ? `${o * 0.25}rem` : 0,
-        marginLeft: e ? 0 : `${o * 0.25}rem`,
-        marginRight: e ? 0 : `${o * 0.25}rem`,
+        marginTop: e ? `${a * 0.25}rem` : 0,
+        marginBottom: e ? `${a * 0.25}rem` : 0,
+        marginLeft: e ? 0 : `${a * 0.25}rem`,
+        marginRight: e ? 0 : `${a * 0.25}rem`,
         ...s
       },
       "data-testid": i,