@forgedevstack/bear 1.0.5 → 1.0.7

package/dist/components/SliderRange/SliderRange.js

@@ -0,0 +1,142 @@
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useState as z, useRef as A, useCallback as L, useEffect as B } from "react";
+import { cn as i } from "../../utils/cn.js";
+const F = {
+  xs: { track: "bear-h-1", thumb: "bear-w-3 bear-h-3", height: "bear-h-6" },
+  sm: { track: "bear-h-1.5", thumb: "bear-w-4 bear-h-4", height: "bear-h-8" },
+  md: { track: "bear-h-2", thumb: "bear-w-5 bear-h-5", height: "bear-h-10" },
+  lg: { track: "bear-h-2.5", thumb: "bear-w-6 bear-h-6", height: "bear-h-12" },
+  xl: { track: "bear-h-3", thumb: "bear-w-7 bear-h-7", height: "bear-h-14" }
+}, H = {
+  primary: { track: "bear-bg-bear-500", thumb: "bear-bg-bear-500 bear-border-bear-600" },
+  secondary: { track: "bear-bg-gray-500", thumb: "bear-bg-gray-500 bear-border-gray-600" },
+  success: { track: "bear-bg-green-500", thumb: "bear-bg-green-500 bear-border-green-600" },
+  warning: { track: "bear-bg-amber-500", thumb: "bear-bg-amber-500 bear-border-amber-600" },
+  error: { track: "bear-bg-red-500", thumb: "bear-bg-red-500 bear-border-red-600" },
+  danger: { track: "bear-bg-red-500", thumb: "bear-bg-red-500 bear-border-red-600" },
+  info: { track: "bear-bg-blue-500", thumb: "bear-bg-blue-500 bear-border-blue-600" },
+  ghost: { track: "bear-bg-gray-400", thumb: "bear-bg-gray-400 bear-border-gray-500" },
+  outline: { track: "bear-bg-gray-600", thumb: "bear-bg-white dark:bear-bg-gray-200 bear-border-gray-600 dark:bear-border-gray-400" }
+}, U = (s, v, e, r) => {
+  const o = Math.round(s / r) * r;
+  return Math.max(v, Math.min(e, o));
+}, K = ({
+  value: s,
+  defaultValue: v = [20, 80],
+  min: e = 0,
+  max: r = 100,
+  step: o = 1,
+  size: j = "md",
+  color: O = "primary",
+  disabled: b = !1,
+  onChange: u,
+  onChangeCommitted: h,
+  valueFormatter: Z = (f) => String(f),
+  className: P,
+  ...V
+}) => {
+  const [f, E] = z(v), [t, R] = z(null), w = A(null), y = s ?? f, [c, l] = y, k = (c - e) / (r - e) * 100, N = (l - e) / (r - e) * 100, m = F[j], p = H[O], x = L(
+    (a, d) => {
+      if (!w.current || b) return;
+      const I = w.current.getBoundingClientRect(), X = Math.max(0, Math.min(1, (a - I.left) / I.width)), Y = e + X * (r - e), T = U(Y, e, r, o);
+      if (d === "min") {
+        const n = [Math.min(T, l - o), l];
+        s === void 0 && E(n), u == null || u(n);
+      } else {
+        const $ = Math.max(T, c + o), n = [c, $];
+        s === void 0 && E(n), u == null || u(n);
+      }
+    },
+    [e, r, o, c, l, b, s, u]
+  ), D = (a, d) => {
+    b || (a.preventDefault(), R(d), x(a.clientX, d));
+  }, M = L(
+    (a) => {
+      t && x(a.clientX, t);
+    },
+    [t, x]
+  ), S = L(() => {
+    t && (R(null), h == null || h(y));
+  }, [t, y, h]);
+  return B(() => {
+    if (t)
+      return document.addEventListener("mousemove", M), document.addEventListener("mouseup", S), () => {
+        document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", S);
+      };
+  }, [t, M, S]), /* @__PURE__ */ g(
+    "div",
+    {
+      className: i(
+        "bear-relative bear-w-full bear-flex bear-items-center",
+        m.height,
+        b && "bear-opacity-50 bear-cursor-not-allowed",
+        P
+      ),
+      "data-testid": "slider-range",
+      ...V,
+      children: /* @__PURE__ */ _(
+        "div",
+        {
+          ref: w,
+          className: i(
+            "bear-relative bear-w-full bear-rounded-full bear-bg-gray-200 dark:bear-bg-gray-700",
+            m.track,
+            !b && "bear-cursor-pointer"
+          ),
+          children: [
+            /* @__PURE__ */ g(
+              "div",
+              {
+                className: i("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full", p.track),
+                style: { left: `${k}%`, width: `${N - k}%` }
+              }
+            ),
+            /* @__PURE__ */ g(
+              "div",
+              {
+                role: "slider",
+                tabIndex: b ? -1 : 0,
+                "aria-valuemin": e,
+                "aria-valuemax": r,
+                "aria-valuenow": c,
+                "aria-label": "Range minimum",
+                className: i(
+                  "bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",
+                  m.thumb,
+                  p.thumb,
+                  !b && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
+                  t === "min" && "bear-scale-125 bear-z-10"
+                ),
+                style: { left: `${k}%` },
+                onMouseDown: (a) => D(a, "min")
+              }
+            ),
+            /* @__PURE__ */ g(
+              "div",
+              {
+                role: "slider",
+                tabIndex: b ? -1 : 0,
+                "aria-valuemin": e,
+                "aria-valuemax": r,
+                "aria-valuenow": l,
+                "aria-label": "Range maximum",
+                className: i(
+                  "bear-absolute bear-top-1/2 bear--translate-y-1/2 bear--translate-x-1/2 bear-rounded-full bear-border-2 bear-shadow-md",
+                  m.thumb,
+                  p.thumb,
+                  !b && "bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",
+                  t === "max" && "bear-scale-125 bear-z-10"
+                ),
+                style: { left: `${N}%` },
+                onMouseDown: (a) => D(a, "max")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  K as SliderRange
+};

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import { BearSize, BearVariant } from '../../types';
+export type SliderRangeValue = [number, number];
+export interface SliderRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: SliderRangeValue;
+    defaultValue?: SliderRangeValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: BearSize;
+    color?: BearVariant;
+    disabled?: boolean;
+    onChange?: (value: SliderRangeValue) => void;
+    onChangeCommitted?: (value: SliderRangeValue) => void;
+    valueFormatter?: (value: number) => string;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { SliderRange } from './SliderRange';
+export type { SliderRangeProps, SliderRangeValue } from './SliderRange.types';

package/dist/components/TagsInput/TagsInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),b=require("react"),M=require("../../utils/cn.cjs"),$=require("../Chip/Chip.cjs"),O={sm:"bear-h-8 bear-text-sm bear-gap-1.5 bear-px-2",md:"bear-h-10 bear-text-base bear-gap-2 bear-px-3",lg:"bear-h-12 bear-text-lg bear-gap-2.5 bear-px-4"},P={sm:"sm",md:"md",lg:"lg"},_=({value:c,defaultValue:z=[],onChange:a,onAdd:u,onRemove:p,placeholder:I="Add tags...",disabled:o=!1,maxTags:n,minLength:y=1,maxLength:d,separators:k=[",","Enter"],size:m="md",fullWidth:S=!1,className:q})=>{const[B,w]=b.useState(z),[l,f]=b.useState(""),v=b.useRef(null),t=c??B,D=!n||t.length<n,g=b.useCallback(e=>{const r=e.trim().slice(0,d??e.length);if(!r||r.length<y||t.includes(r)||n!=null&&t.length>=n)return;const s=[...t,r];c===void 0&&w(s),a==null||a(s),u==null||u(r)},[t,c,y,d,n,a,u]),j=b.useCallback((e,r)=>{const s=t.filter((h,i)=>i!==r);c===void 0&&w(s),a==null||a(s),p==null||p(e,r)},[t,c,a,p]),T=e=>{k.includes(e.key)?(e.preventDefault(),l.trim()&&(g(l),f(""))):e.key==="Backspace"&&!l&&t.length&&j(t[t.length-1],t.length-1)},N=e=>{var h;const r=e.target.value,s=k.find(i=>r.includes(i));if(s){const i=r.split(s);i.slice(0,-1).forEach(K=>g(K)),f(((h=i[i.length-1])==null?void 0:h.trim())??"")}else f(r)},E=()=>{l.trim()&&(g(l),f(""))};return x.jsxs("div",{className:M.cn("Bear-TagsInput bear-flex bear-flex-wrap bear-items-center bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-transition-colors focus-within:bear-border-bear-500 focus-within:bear-ring-2 focus-within:bear-ring-bear-500/20",o&&"bear-opacity-50 bear-cursor-not-allowed",S&&"bear-w-full",O[m],q),onClick:()=>{var e;return(e=v.current)==null?void 0:e.focus()},children:[t.map((e,r)=>x.jsx($.Chip,{variant:"soft",color:"primary",size:P[m],onDelete:o?void 0:()=>j(e,r),className:"bear-shrink-0",children:e},`${e}-${r}`)),D&&x.jsx("input",{ref:v,type:"text",value:l,onChange:N,onKeyDown:T,onBlur:E,placeholder:t.length?"":I,disabled:o,maxLength:d,className:"bear-min-w-[80px] bear-flex-1 bear-bg-transparent bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500"})]})};exports.TagsInput=_;

package/dist/components/TagsInput/TagsInput.d.ts

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

package/dist/components/TagsInput/TagsInput.js

@@ -0,0 +1,100 @@
+import { jsxs as _, jsx as v } from "react/jsx-runtime";
+import { useState as z, useRef as q, useCallback as B } from "react";
+import { cn as F } from "../../utils/cn.js";
+import { Chip as G } from "../Chip/Chip.js";
+const H = {
+  sm: "bear-h-8 bear-text-sm bear-gap-1.5 bear-px-2",
+  md: "bear-h-10 bear-text-base bear-gap-2 bear-px-3",
+  lg: "bear-h-12 bear-text-lg bear-gap-2.5 bear-px-4"
+}, J = { sm: "sm", md: "md", lg: "lg" }, W = ({
+  value: c,
+  defaultValue: D = [],
+  onChange: a,
+  onAdd: b,
+  onRemove: p,
+  placeholder: I = "Add tags...",
+  disabled: u = !1,
+  maxTags: n,
+  minLength: h = 1,
+  maxLength: o,
+  separators: m = [",", "Enter"],
+  size: x = "md",
+  fullWidth: N = !1,
+  className: j
+}) => {
+  const [E, k] = z(D), [l, f] = z(""), w = q(null), t = c ?? E, K = !n || t.length < n, d = B(
+    (e) => {
+      const r = e.trim().slice(0, o ?? e.length);
+      if (!r || r.length < h || t.includes(r) || n != null && t.length >= n) return;
+      const s = [...t, r];
+      c === void 0 && k(s), a == null || a(s), b == null || b(r);
+    },
+    [t, c, h, o, n, a, b]
+  ), y = B(
+    (e, r) => {
+      const s = t.filter((g, i) => i !== r);
+      c === void 0 && k(s), a == null || a(s), p == null || p(e, r);
+    },
+    [t, c, a, p]
+  ), S = (e) => {
+    m.includes(e.key) ? (e.preventDefault(), l.trim() && (d(l), f(""))) : e.key === "Backspace" && !l && t.length && y(t[t.length - 1], t.length - 1);
+  }, T = (e) => {
+    var g;
+    const r = e.target.value, s = m.find((i) => r.includes(i));
+    if (s) {
+      const i = r.split(s);
+      i.slice(0, -1).forEach((M) => d(M)), f(((g = i[i.length - 1]) == null ? void 0 : g.trim()) ?? "");
+    } else
+      f(r);
+  }, $ = () => {
+    l.trim() && (d(l), f(""));
+  };
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      className: F(
+        "Bear-TagsInput bear-flex bear-flex-wrap bear-items-center bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-transition-colors focus-within:bear-border-bear-500 focus-within:bear-ring-2 focus-within:bear-ring-bear-500/20",
+        u && "bear-opacity-50 bear-cursor-not-allowed",
+        N && "bear-w-full",
+        H[x],
+        j
+      ),
+      onClick: () => {
+        var e;
+        return (e = w.current) == null ? void 0 : e.focus();
+      },
+      children: [
+        t.map((e, r) => /* @__PURE__ */ v(
+          G,
+          {
+            variant: "soft",
+            color: "primary",
+            size: J[x],
+            onDelete: u ? void 0 : () => y(e, r),
+            className: "bear-shrink-0",
+            children: e
+          },
+          `${e}-${r}`
+        )),
+        K && /* @__PURE__ */ v(
+          "input",
+          {
+            ref: w,
+            type: "text",
+            value: l,
+            onChange: T,
+            onKeyDown: S,
+            onBlur: $,
+            placeholder: t.length ? "" : I,
+            disabled: u,
+            maxLength: o,
+            className: "bear-min-w-[80px] bear-flex-1 bear-bg-transparent bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as TagsInput
+};

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

@@ -0,0 +1,16 @@
+export interface TagsInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    onAdd?: (tag: string) => void;
+    onRemove?: (tag: string, index: number) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    maxTags?: number;
+    minLength?: number;
+    maxLength?: number;
+    separators?: string[];
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    className?: string;
+}

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

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

package/dist/components/TimePicker/TimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),E=require("react"),H=require("../DateTimePicker/DateTimePicker.cjs"),n=require("../../utils/cn.cjs"),U=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),D=({mode:b="time",value:_,onChange:c,disabled:S=!1,placeholder:m="Select time",label:d,error:a,helperText:C,format:l="12h",minuteStep:o=5,clearable:u=!0,className:P,size:N="md",variant:R="default",...K})=>{if(b==="datetime")return s.jsx(H.DateTimePicker,{value:_ instanceof Date?_:null,onChange:t=>c==null?void 0:c(t),disabled:S,placeholder:m,label:d,error:a,helperText:C,timeFormat:l,minuteStep:o,clearable:u,className:P,size:N,variant:R,...K});const i=_,[M,I]=E.useState(!1),[O,A]=E.useState(12),[x,L]=E.useState(0),[f,j]=E.useState("AM"),T=E.useRef(null);E.useEffect(()=>{if(i&&typeof i=="string"){const[t,r]=i.split(" "),[p,y]=t.split(":").map(Number);A(p),L(y),r&&j(r)}},[i]),E.useEffect(()=>{const t=r=>{T.current&&!T.current.contains(r.target)&&I(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const k=()=>{c==null||c(U.formatTime(O,x,f,l)),I(!1)},h=l==="12h"?Array.from({length:e.TIMEPICKER_HOURS_12H},(t,r)=>r+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(t,r)=>r),v=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/o},(t,r)=>r*o);return s.jsxs("div",{ref:T,className:n.cn(e.TIMEPICKER_ROOT_CLASSES,P),children:[d&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:d}),s.jsxs("button",{type:"button",onClick:()=>!S&&I(!M),disabled:S,className:n.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[N],e.variantClasses[R],a?"bear-border-red-500":"focus:bear-border-pink-500",S&&"bear-opacity-50 bear-cursor-not-allowed",i?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:i||m}),s.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})})]}),a&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:a}),C&&!a&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:C}),M&&s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Hour"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:h.map(t=>s.jsx("button",{onClick:()=>A(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,O===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Minute"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:v.map(t=>s.jsx("button",{onClick:()=>L(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,x===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),l==="12h"&&s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Period"}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(t=>s.jsx("button",{onClick:()=>j(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",f===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t},t))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[u&&i&&s.jsx("button",{onClick:()=>{c==null||c(""),I(!1)},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:"Clear"}),s.jsx("button",{onClick:k,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:"Confirm"})]})]})]})};exports.TimePicker=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),V=require("../../utils/cn.cjs"),G=require("../../hooks/useMediaQuery.cjs"),J=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),X=require("./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs"),Y=require("./components/TimePickerDialDropdown/TimePickerDialDropdown.cjs"),Z=s.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})}),g=t=>{const j={value:t.value,onChange:t.onChange,disabled:t.disabled??!1,placeholder:t.placeholder??"Select time",label:t.label,error:t.error,helperText:t.helperText,format:t.format??e.TIMEPICKER_FORMAT_12H,minuteStep:t.minuteStep??5,clearable:t.clearable??!0,className:t.className,size:t.size??"md",variant:t.variant??"default",dropdownVariant:t.dropdownVariant??e.TIMEPICKER_VARIANT_COLUMNS,dropdownVariantBreakpoint:t.dropdownVariantBreakpoint??e.TIMEPICKER_DEFAULT_BREAKPOINT,icon:t.icon,translations:t.translations},{value:y,onChange:l,disabled:T,placeholder:D,label:M,error:i,helperText:S,format:c,minuteStep:_,clearable:A,className:H,size:U,variant:q,dropdownVariant:f,dropdownVariantBreakpoint:F,icon:z,translations:b}=j,B=G.useMediaQuery(`(min-width: ${F}px)`),p=f===e.TIMEPICKER_VARIANT_AUTO?B?e.TIMEPICKER_VARIANT_DIAL:e.TIMEPICKER_VARIANT_COLUMNS:f,h=p===e.TIMEPICKER_VARIANT_DIAL&&c===e.TIMEPICKER_FORMAT_24H?e.TIMEPICKER_VARIANT_COLUMNS:p,n=y,[C,d]=r.useState(!1),[u,k]=r.useState(12),[E,N]=r.useState(0),[I,K]=r.useState("AM"),R=r.useRef(null);r.useEffect(()=>{if(n&&typeof n=="string"){const[o,a]=n.split(" "),[W,$]=o.split(":").map(Number);k(W),N($),a&&K(a)}},[n]),r.useEffect(()=>{const o=a=>{R.current&&!R.current.contains(a.target)&&d(!1)};return document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[]);const O=r.useCallback(()=>{l==null||l(J.formatTime(u,E,I,c??e.TIMEPICKER_FORMAT_12H)),d(!1)},[l,u,E,I,c]),x=c===e.TIMEPICKER_FORMAT_12H?Array.from({length:e.TIMEPICKER_HOURS_12H},(o,a)=>a+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(o,a)=>a),L=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/(_??5)},(o,a)=>a*(_??5)),w=r.useCallback(()=>d(!1),[]),v=c??e.TIMEPICKER_FORMAT_12H,P=_??5,m=r.useMemo(()=>({selectedHour:u,setSelectedHour:k,selectedMinute:E,setSelectedMinute:N,period:I,setPeriod:K,format:v,hours:x,minutes:L,timeValue:n,clearable:A??!0,onChange:l,onConfirm:O,onClose:w,translations:b}),[u,E,I,v,x,L,n,A,l,O,w,b]),Q=r.useCallback(()=>C?h===e.TIMEPICKER_VARIANT_DIAL?s.jsx(Y.TimePickerDialDropdown,{...m,minuteStep:P}):s.jsx(X.TimePickerColumnsDropdown,{...m}):null,[C,h,m,P]);return s.jsxs("div",{ref:R,className:V.cn(e.TIMEPICKER_ROOT_CLASSES,H),children:[M&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:M}),s.jsxs("button",{type:"button",onClick:()=>!T&&d(!C),disabled:T,className:V.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[U??"md"],e.variantClasses[q??"default"],i?"bear-border-red-500":"focus:bear-border-pink-500",T&&"bear-opacity-50 bear-cursor-not-allowed",n?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:n||D}),z??Z]}),i&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:i}),S&&!i&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:S}),Q()]})};exports.TimePicker=g;

package/dist/components/TimePicker/TimePicker.constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,a=60,b={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"},E={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},t="Bear-TimePicker bear-relative",_="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",S="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",I="Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",C="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",T="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",o="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",i="bear-bg-pink-500 bear-text-white",n="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",R="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",c="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",P="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600",s="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",d="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.TIMEPICKER_BUTTON_CLASSES=S;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=c;exports.TIMEPICKER_COLUMN_CLASSES=T;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=C;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=P;exports.TIMEPICKER_DROPDOWN_CLASSES=I;exports.TIMEPICKER_ERROR_CLASSES=s;exports.TIMEPICKER_FOOTER_CLASSES=R;exports.TIMEPICKER_HELPER_CLASSES=d;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=_;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=i;exports.TIMEPICKER_OPTION_CLASSES=o;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=n;exports.TIMEPICKER_ROOT_CLASSES=t;exports.sizeClasses=b;exports.variantClasses=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,a=60,E=768,_="12h",I="24h",b="auto",t="dial",T="columns",C=80,S=100,R=[12,1,2,3,4,5,6,7,8,9,10,11],o={selectTime:"SELECT TIME",hour:"Hour",minute:"Minute",period:"Period",cancel:"CANCEL",ok:"OK"},n={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"},P={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},i="Bear-TimePicker bear-relative",c="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",A="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",s="Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",O="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",M="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",L="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",K="bear-bg-pink-500 bear-text-white",d="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",l="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",N="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",x="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600",g="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",m="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CLOCK_CENTER=S;exports.CLOCK_HOURS_12=R;exports.CLOCK_RADIUS=C;exports.TIMEPICKER_BUTTON_CLASSES=A;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=N;exports.TIMEPICKER_COLUMN_CLASSES=M;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=O;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=x;exports.TIMEPICKER_DEFAULT_BREAKPOINT=E;exports.TIMEPICKER_DEFAULT_TRANSLATIONS=o;exports.TIMEPICKER_DROPDOWN_CLASSES=s;exports.TIMEPICKER_ERROR_CLASSES=g;exports.TIMEPICKER_FOOTER_CLASSES=l;exports.TIMEPICKER_FORMAT_12H=_;exports.TIMEPICKER_FORMAT_24H=I;exports.TIMEPICKER_HELPER_CLASSES=m;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=c;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=K;exports.TIMEPICKER_OPTION_CLASSES=L;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=d;exports.TIMEPICKER_ROOT_CLASSES=i;exports.TIMEPICKER_VARIANT_AUTO=b;exports.TIMEPICKER_VARIANT_COLUMNS=T;exports.TIMEPICKER_VARIANT_DIAL=t;exports.sizeClasses=n;exports.variantClasses=P;

package/dist/components/TimePicker/TimePicker.constants.d.ts

@@ -1,12 +1,33 @@
 export declare const TIMEPICKER_HOURS_12H = 12;
 export declare const TIMEPICKER_HOURS_24H = 24;
 export declare const TIMEPICKER_MINUTES_DIVISOR = 60;
+export declare const TIMEPICKER_DEFAULT_BREAKPOINT = 768;
+/** Format constants */
+export declare const TIMEPICKER_FORMAT_12H = "12h";
+export declare const TIMEPICKER_FORMAT_24H = "24h";
+/** Dropdown variant constants */
+export declare const TIMEPICKER_VARIANT_AUTO = "auto";
+export declare const TIMEPICKER_VARIANT_DIAL = "dial";
+export declare const TIMEPICKER_VARIANT_COLUMNS = "columns";
+/** Clock face constants */
+export declare const CLOCK_RADIUS = 80;
+export declare const CLOCK_CENTER = 100;
+export declare const CLOCK_HOURS_12: readonly [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+/** Default translation strings */
+export declare const TIMEPICKER_DEFAULT_TRANSLATIONS: {
+    readonly selectTime: "SELECT TIME";
+    readonly hour: "Hour";
+    readonly minute: "Minute";
+    readonly period: "Period";
+    readonly cancel: "CANCEL";
+    readonly ok: "OK";
+};
 export declare const sizeClasses: Record<'sm' | 'md' | 'lg', string>;
 export declare const variantClasses: Record<'default' | 'filled' | 'outline', string>;
 export declare const TIMEPICKER_ROOT_CLASSES = "Bear-TimePicker bear-relative";
 export declare const TIMEPICKER_LABEL_CLASSES = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
 export declare const TIMEPICKER_BUTTON_CLASSES = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors";
-export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
+export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
 export declare const TIMEPICKER_COLUMN_HEADER_CLASSES = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center";
 export declare const TIMEPICKER_COLUMN_CLASSES = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1";
 export declare const TIMEPICKER_OPTION_CLASSES = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors";

package/dist/components/TimePicker/TimePicker.constants.js

@@ -1,30 +1,47 @@
-const e = 12, r = 24, a = 60, b = {
+const e = 12, r = 24, a = 60, b = 768, t = "12h", o = "24h", E = "auto", _ = "dial", n = "columns", c = 80, i = 100, I = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], T = {
+  selectTime: "SELECT TIME",
+  hour: "Hour",
+  minute: "Minute",
+  period: "Period",
+  cancel: "CANCEL",
+  ok: "OK"
+}, s = {
   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 = {
+}, C = {
   default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",
   filled: "bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",
   outline: "bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"
-}, o = "Bear-TimePicker bear-relative", i = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", _ = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", n = "Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", E = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", c = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", d = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", s = "bear-bg-pink-500 bear-text-white", S = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", I = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", T = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", C = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600", x = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", P = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+}, d = "Bear-TimePicker bear-relative", S = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", R = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", P = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", x = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", l = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", A = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", m = "bear-bg-pink-500 bear-text-white", M = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", O = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", g = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", k = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600", L = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", K = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
 export {
-  _ as TIMEPICKER_BUTTON_CLASSES,
-  T as TIMEPICKER_CLEAR_BUTTON_CLASSES,
-  c as TIMEPICKER_COLUMN_CLASSES,
-  E as TIMEPICKER_COLUMN_HEADER_CLASSES,
-  C as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
-  n as TIMEPICKER_DROPDOWN_CLASSES,
-  x as TIMEPICKER_ERROR_CLASSES,
-  I as TIMEPICKER_FOOTER_CLASSES,
-  P as TIMEPICKER_HELPER_CLASSES,
+  i as CLOCK_CENTER,
+  I as CLOCK_HOURS_12,
+  c as CLOCK_RADIUS,
+  R as TIMEPICKER_BUTTON_CLASSES,
+  g as TIMEPICKER_CLEAR_BUTTON_CLASSES,
+  l as TIMEPICKER_COLUMN_CLASSES,
+  x as TIMEPICKER_COLUMN_HEADER_CLASSES,
+  k as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
+  b as TIMEPICKER_DEFAULT_BREAKPOINT,
+  T as TIMEPICKER_DEFAULT_TRANSLATIONS,
+  P as TIMEPICKER_DROPDOWN_CLASSES,
+  L as TIMEPICKER_ERROR_CLASSES,
+  O as TIMEPICKER_FOOTER_CLASSES,
+  t as TIMEPICKER_FORMAT_12H,
+  o as TIMEPICKER_FORMAT_24H,
+  K as TIMEPICKER_HELPER_CLASSES,
   e as TIMEPICKER_HOURS_12H,
   r as TIMEPICKER_HOURS_24H,
-  i as TIMEPICKER_LABEL_CLASSES,
+  S as TIMEPICKER_LABEL_CLASSES,
   a as TIMEPICKER_MINUTES_DIVISOR,
-  s as TIMEPICKER_OPTION_ACTIVE_CLASSES,
-  d as TIMEPICKER_OPTION_CLASSES,
-  S as TIMEPICKER_OPTION_INACTIVE_CLASSES,
-  o as TIMEPICKER_ROOT_CLASSES,
-  b as sizeClasses,
-  t as variantClasses
+  m as TIMEPICKER_OPTION_ACTIVE_CLASSES,
+  A as TIMEPICKER_OPTION_CLASSES,
+  M as TIMEPICKER_OPTION_INACTIVE_CLASSES,
+  d as TIMEPICKER_ROOT_CLASSES,
+  E as TIMEPICKER_VARIANT_AUTO,
+  n as TIMEPICKER_VARIANT_COLUMNS,
+  _ as TIMEPICKER_VARIANT_DIAL,
+  s as sizeClasses,
+  C as variantClasses
 };