@forgedevstack/bear 1.0.0

package/dist/components/Rating/Rating.js

@@ -0,0 +1,99 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useState as y, useCallback as S, useMemo as A } from "react";
+import { cn as R } from "../../utils/cn.js";
+const q = {
+  xs: 14,
+  sm: 18,
+  md: 24,
+  lg: 30,
+  xl: 36
+}, I = "#fbbf24", J = "#d1d5db", V = ({
+  value: h,
+  defaultValue: $ = 0,
+  max: a = 5,
+  size: B = "md",
+  readOnly: s = !1,
+  disabled: r = !1,
+  precision: v = 1,
+  color: k = I,
+  emptyColor: x = J,
+  filledIcon: E,
+  emptyIcon: g,
+  halfIcon: w,
+  highlightOnHover: l = !0,
+  showLabel: C = !1,
+  formatLabel: z,
+  onChange: c,
+  className: G,
+  testId: N,
+  ...T
+}) => {
+  const [j, D] = y($), [M, F] = y(null), m = h !== void 0, L = m ? h : j, f = M !== null && !s && !r ? M : L, u = q[B], H = S((e) => {
+    s || r || (m || D(e), c == null || c(e));
+  }, [m, c, s, r]), P = S((e) => {
+    s || r || !l || F(e);
+  }, [s, r, l]), U = S(() => {
+    s || r || !l || F(null);
+  }, [s, r, l]), p = A(() => ({ FilledStar: ({ size: o, color: i }) => /* @__PURE__ */ t("svg", { width: o, height: o, viewBox: "0 0 24 24", fill: i, stroke: "none", children: /* @__PURE__ */ t("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), EmptyStar: ({ size: o, color: i }) => /* @__PURE__ */ t("svg", { width: o, height: o, viewBox: "0 0 24 24", fill: "none", stroke: i, strokeWidth: "2", children: /* @__PURE__ */ t("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), HalfStar: ({ size: o, color: i, emptyColor: _ }) => /* @__PURE__ */ d("svg", { width: o, height: o, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ d("linearGradient", { id: "halfGrad", children: [
+      /* @__PURE__ */ t("stop", { offset: "50%", stopColor: i }),
+      /* @__PURE__ */ t("stop", { offset: "50%", stopColor: _, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ t(
+      "polygon",
+      {
+        points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",
+        fill: "url(#halfGrad)",
+        stroke: _,
+        strokeWidth: "2"
+      }
+    )
+  ] }) }), []), W = (e) => {
+    const n = f - e, b = n >= 1, o = v === 0.5 && n >= 0.5 && n < 1, i = n < (v === 0.5 ? 0.5 : 1);
+    return E && b ? E : w && o ? w : g && i ? g : b ? /* @__PURE__ */ t(p.FilledStar, { size: u, color: k }) : o ? /* @__PURE__ */ t(p.HalfStar, { size: u, color: k, emptyColor: x }) : /* @__PURE__ */ t(p.EmptyStar, { size: u, color: x });
+  }, Y = A(
+    () => Array.from({ length: a }, (e, n) => n + 1),
+    [a]
+  ), Z = z ? z(f) : `${f} out of ${a}`;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: R(
+        "ember-inline-flex ember-items-center ember-gap-1",
+        r && "ember-opacity-50 ember-cursor-not-allowed",
+        G
+      ),
+      role: "radiogroup",
+      "aria-label": "Rating",
+      "data-testid": N,
+      onMouseLeave: U,
+      ...T,
+      children: [
+        Y.map((e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": L >= e,
+            "aria-label": `${e} star${e > 1 ? "s" : ""}`,
+            className: R(
+              "ember-p-0.5 ember-rounded ember-transition-transform ember-bg-transparent ember-border-none",
+              !s && !r && "hover:ember-scale-110 ember-cursor-pointer",
+              s && "ember-cursor-default",
+              r && "ember-cursor-not-allowed"
+            ),
+            onClick: () => H(e),
+            onMouseEnter: () => P(e),
+            disabled: r || s,
+            children: W(e - 1)
+          },
+          e
+        )),
+        C && /* @__PURE__ */ t("span", { className: "ember-ml-2 ember-text-sm ember-text-gray-600 dark:ember-text-gray-400", children: Z })
+      ]
+    }
+  );
+};
+export {
+  V as Rating
+};

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

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+import { BearSize } from '../../types';
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current rating value */
+    value?: number;
+    /** Default rating value (uncontrolled) */
+    defaultValue?: number;
+    /** Maximum rating value */
+    max?: number;
+    /** Rating size */
+    size?: BearSize;
+    /** Whether rating is read-only */
+    readOnly?: boolean;
+    /** Whether rating is disabled */
+    disabled?: boolean;
+    /** Precision for half stars (1 or 0.5) */
+    precision?: 1 | 0.5;
+    /** Color of filled stars */
+    color?: string;
+    /** Empty star color */
+    emptyColor?: string;
+    /** Custom filled icon */
+    filledIcon?: React.ReactNode;
+    /** Custom empty icon */
+    emptyIcon?: React.ReactNode;
+    /** Custom half icon */
+    halfIcon?: React.ReactNode;
+    /** Whether to highlight on hover */
+    highlightOnHover?: boolean;
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Show rating label */
+    showLabel?: boolean;
+    /** Custom label formatter */
+    formatLabel?: (value: number) => string;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Rating, default } from './Rating';
+export type { RatingProps } from './Rating.types';

package/dist/components/ScrollArea/ScrollArea.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../utils/cn.cjs"),w=({children:b,className:l,orientation:a="vertical",scrollbarSize:o="md",scrollbarVariant:t="default",maxHeight:r,maxWidth:e})=>{const s={sm:"[&::-webkit-scrollbar]:bear-w-1 [&::-webkit-scrollbar]:bear-h-1",md:"[&::-webkit-scrollbar]:bear-w-2 [&::-webkit-scrollbar]:bear-h-2",lg:"[&::-webkit-scrollbar]:bear-w-3 [&::-webkit-scrollbar]:bear-h-3"},c={default:"[&::-webkit-scrollbar-track]:bear-bg-zinc-800 [&::-webkit-scrollbar-thumb]:bear-bg-zinc-600 [&::-webkit-scrollbar-thumb]:bear-rounded-full [&::-webkit-scrollbar-thumb]:hover:bear-bg-zinc-500",minimal:"[&::-webkit-scrollbar-track]:bear-bg-transparent [&::-webkit-scrollbar-thumb]:bear-bg-zinc-700 [&::-webkit-scrollbar-thumb]:bear-rounded-full",hidden:"[&::-webkit-scrollbar]:bear-hidden bear-scrollbar-none"},i={vertical:"bear-overflow-y-auto bear-overflow-x-hidden",horizontal:"bear-overflow-x-auto bear-overflow-y-hidden",both:"bear-overflow-auto"};return n.jsx("div",{className:u.cn(i[a],s[o],c[t],l),style:{maxHeight:typeof r=="number"?`${r}px`:r,maxWidth:typeof e=="number"?`${e}px`:e},children:b})};exports.ScrollArea=w;

package/dist/components/ScrollArea/ScrollArea.d.ts

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

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,44 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const k = ({
+  children: b,
+  className: l,
+  orientation: a = "vertical",
+  scrollbarSize: o = "md",
+  scrollbarVariant: t = "default",
+  maxHeight: r,
+  maxWidth: e
+}) => {
+  const s = {
+    sm: "[&::-webkit-scrollbar]:bear-w-1 [&::-webkit-scrollbar]:bear-h-1",
+    md: "[&::-webkit-scrollbar]:bear-w-2 [&::-webkit-scrollbar]:bear-h-2",
+    lg: "[&::-webkit-scrollbar]:bear-w-3 [&::-webkit-scrollbar]:bear-h-3"
+  }, c = {
+    default: "[&::-webkit-scrollbar-track]:bear-bg-zinc-800 [&::-webkit-scrollbar-thumb]:bear-bg-zinc-600 [&::-webkit-scrollbar-thumb]:bear-rounded-full [&::-webkit-scrollbar-thumb]:hover:bear-bg-zinc-500",
+    minimal: "[&::-webkit-scrollbar-track]:bear-bg-transparent [&::-webkit-scrollbar-thumb]:bear-bg-zinc-700 [&::-webkit-scrollbar-thumb]:bear-rounded-full",
+    hidden: "[&::-webkit-scrollbar]:bear-hidden bear-scrollbar-none"
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: n(
+        {
+          vertical: "bear-overflow-y-auto bear-overflow-x-hidden",
+          horizontal: "bear-overflow-x-auto bear-overflow-y-hidden",
+          both: "bear-overflow-auto"
+        }[a],
+        s[o],
+        c[t],
+        l
+      ),
+      style: {
+        maxHeight: typeof r == "number" ? `${r}px` : r,
+        maxWidth: typeof e == "number" ? `${e}px` : e
+      },
+      children: b
+    }
+  );
+};
+export {
+  k as ScrollArea
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface ScrollAreaProps {
+    children: ReactNode;
+    className?: string;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    scrollbarSize?: 'sm' | 'md' | 'lg';
+    scrollbarVariant?: 'default' | 'minimal' | 'hidden';
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+}

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

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

package/dist/components/Select/Select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("react"),a=require("../../utils/cn.cjs"),x=require("../Icon/index.cjs"),N={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},p=({options:i,value:b,onChange:s,placeholder:m="Select an option",label:f,error:l,disabled:n=!1,size:g="md",fullWidth:h=!1,className:y})=>{const[c,o]=d.useState(!1),u=d.useRef(null),w=!!l,t=i.find(e=>e.value===b);d.useEffect(()=>{const e=j=>{u.current&&!u.current.contains(j.target)&&o(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const v=e=>{s==null||s(e),o(!1)};return r.jsxs("div",{ref:u,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",h&&"bear-w-full"),children:[f&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-300",children:f}),r.jsxs("button",{type:"button",disabled:n,onClick:()=>!n&&o(!c),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-bg-gray-800 bear-text-left","bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",w?"bear-border-red-500 focus:bear-ring-red-500":"bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",n&&"bear-opacity-50 bear-cursor-not-allowed",N[g],y),children:[r.jsx("span",{className:t?"bear-text-white":"bear-text-gray-500",children:(t==null?void 0:t.label)||m}),r.jsx(x.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",c&&"bear-rotate-180")})]}),c&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-border-gray-600 bear-bg-gray-800","bear-shadow-lg bear-overflow-hidden","bear-top-full"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:i.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&v(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-300 hover:bear-bg-gray-700 hover:bear-text-white",e.value===b&&"bear-bg-bear-600/20 bear-text-bear-400"),children:[e.label,e.value===b&&r.jsx(x.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=p;

package/dist/components/Select/Select.d.ts

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

package/dist/components/Select/Select.js

@@ -0,0 +1,105 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { useState as p, useRef as N, useEffect as j } from "react";
+import { cn as a } from "../../utils/cn.js";
+import { ChevronDownIcon as k, CheckIcon as E } from "../Icon/index.js";
+const S = {
+  sm: "bear-h-8 bear-text-sm bear-px-3",
+  md: "bear-h-10 bear-text-base bear-px-4",
+  lg: "bear-h-12 bear-text-lg bear-px-5"
+}, O = ({
+  options: i,
+  value: t,
+  onChange: s,
+  placeholder: m = "Select an option",
+  label: u,
+  error: l,
+  disabled: o = !1,
+  size: x = "md",
+  fullWidth: g = !1,
+  className: h
+}) => {
+  const [n, c] = p(!1), d = N(null), w = !!l, b = i.find((e) => e.value === t);
+  j(() => {
+    const e = (v) => {
+      d.current && !d.current.contains(v.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const y = (e) => {
+    s == null || s(e), c(!1);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: d,
+      className: a("bear-relative bear-flex bear-flex-col bear-gap-1.5", g && "bear-w-full"),
+      children: [
+        u && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium bear-text-gray-300", children: u }),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            disabled: o,
+            onClick: () => !o && c(!n),
+            className: a(
+              "bear-flex bear-items-center bear-justify-between bear-w-full",
+              "bear-rounded-lg bear-border bear-bg-gray-800 bear-text-left",
+              "bear-outline-none bear-transition-all bear-duration-200",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",
+              w ? "bear-border-red-500 focus:bear-ring-red-500" : "bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              o && "bear-opacity-50 bear-cursor-not-allowed",
+              S[x],
+              h
+            ),
+            children: [
+              /* @__PURE__ */ r("span", { className: b ? "bear-text-white" : "bear-text-gray-500", children: (b == null ? void 0 : b.label) || m }),
+              /* @__PURE__ */ r(
+                k,
+                {
+                  className: a(
+                    "bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",
+                    n && "bear-rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        n && /* @__PURE__ */ r(
+          "div",
+          {
+            className: a(
+              "bear-absolute bear-z-50 bear-w-full bear-mt-1",
+              "bear-rounded-lg bear-border bear-border-gray-600 bear-bg-gray-800",
+              "bear-shadow-lg bear-overflow-hidden",
+              "bear-top-full"
+            ),
+            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: i.map((e) => /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                disabled: e.disabled,
+                onClick: () => !e.disabled && y(e.value),
+                className: a(
+                  "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
+                  "bear-text-left bear-transition-colors",
+                  e.disabled ? "bear-text-gray-500 bear-cursor-not-allowed" : "bear-text-gray-300 hover:bear-bg-gray-700 hover:bear-text-white",
+                  e.value === t && "bear-bg-bear-600/20 bear-text-bear-400"
+                ),
+                children: [
+                  e.label,
+                  e.value === t && /* @__PURE__ */ r(E, { className: "bear-w-4 bear-h-4 bear-text-bear-400" })
+                ]
+              },
+              e.value
+            )) })
+          }
+        ),
+        l && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: l })
+      ]
+    }
+  );
+};
+export {
+  O as Select
+};

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

@@ -0,0 +1,27 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    /** Select options */
+    options: SelectOption[];
+    /** Current value */
+    value?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Select label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether select is disabled */
+    disabled?: boolean;
+    /** Select size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether select is full width */
+    fullWidth?: boolean;
+    /** Additional class names */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select.types';

package/dist/components/Skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn.cjs"),b={text:"bear-rounded",circular:"bear-rounded-full",rectangular:"bear-rounded-none",rounded:"bear-rounded-lg"},g={pulse:"bear-animate-pulse",wave:"bear-skeleton-wave",none:""},a=({variant:t="text",animation:r="pulse",width:s,height:d,count:l=1,gap:j=8,className:i,testId:o,style:m,...u})=>{const n={width:s||(t==="circular"?40:"100%"),height:(()=>{if(d)return d;switch(t){case"text":return"1em";case"circular":return s||40;default:return"auto"}})(),...m};return l>1&&t==="text"?e.jsx("div",{className:"bear-flex bear-flex-col",style:{gap:j},"data-testid":o,children:Array.from({length:l}).map((v,x)=>e.jsx("div",{className:c.cn("bear-bg-gray-200 dark:bear-bg-gray-700",b[t],g[r],i),style:{...n,width:x===l-1?"80%":n.width},...u},x))}):e.jsx("div",{className:c.cn("bear-bg-gray-200 dark:bear-bg-gray-700",b[t],g[r],i),style:n,"data-testid":o,...u})},h=({size:t=40,className:r})=>e.jsx(a,{variant:"circular",width:t,height:t,className:r}),S=({lines:t=3,width:r="100%",className:s})=>e.jsx(a,{variant:"text",count:t,width:r,className:s}),f=({className:t})=>e.jsxs("div",{className:c.cn("bear-p-4 bear-space-y-4",t),children:[e.jsx(a,{variant:"rectangular",height:200}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-3",children:[e.jsx(h,{}),e.jsxs("div",{className:"bear-flex-1",children:[e.jsx(a,{variant:"text",width:"60%"}),e.jsx(a,{variant:"text",width:"40%",className:"bear-mt-2"})]})]}),e.jsx(S,{lines:3})]});exports.Skeleton=a;exports.SkeletonAvatar=h;exports.SkeletonCard=f;exports.SkeletonText=S;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { SkeletonProps } from './Skeleton.types';
+/**
+ * Skeleton component for loading placeholders
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width={200} />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * <Skeleton variant="rectangular" width="100%" height={200} />
+ * <Skeleton variant="text" count={3} />
+ * ```
+ */
+export declare const Skeleton: FC<SkeletonProps>;
+export declare const SkeletonAvatar: FC<{
+    size?: number;
+    className?: string;
+}>;
+export declare const SkeletonText: FC<{
+    lines?: number;
+    width?: number | string;
+    className?: string;
+}>;
+export declare const SkeletonCard: FC<{
+    className?: string;
+}>;
+export default Skeleton;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,116 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
+const h = {
+  text: "bear-rounded",
+  circular: "bear-rounded-full",
+  rectangular: "bear-rounded-none",
+  rounded: "bear-rounded-lg"
+}, m = {
+  pulse: "bear-animate-pulse",
+  wave: "bear-skeleton-wave",
+  none: ""
+}, a = ({
+  variant: e = "text",
+  animation: t = "pulse",
+  width: l,
+  height: i,
+  count: n = 1,
+  gap: x = 8,
+  className: o,
+  testId: u,
+  style: f,
+  ...b
+}) => {
+  const s = {
+    width: l || (e === "circular" ? 40 : "100%"),
+    height: (() => {
+      if (i) return i;
+      switch (e) {
+        case "text":
+          return "1em";
+        case "circular":
+          return l || 40;
+        default:
+          return "auto";
+      }
+    })(),
+    ...f
+  };
+  return n > 1 && e === "text" ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: "bear-flex bear-flex-col",
+      style: { gap: x },
+      "data-testid": u,
+      children: Array.from({ length: n }).map((N, g) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: d(
+            "bear-bg-gray-200 dark:bear-bg-gray-700",
+            h[e],
+            m[t],
+            o
+          ),
+          style: {
+            ...s,
+            width: g === n - 1 ? "80%" : s.width
+          },
+          ...b
+        },
+        g
+      ))
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      className: d(
+        "bear-bg-gray-200 dark:bear-bg-gray-700",
+        h[e],
+        m[t],
+        o
+      ),
+      style: s,
+      "data-testid": u,
+      ...b
+    }
+  );
+}, S = ({
+  size: e = 40,
+  className: t
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    variant: "circular",
+    width: e,
+    height: e,
+    className: t
+  }
+), v = ({
+  lines: e = 3,
+  width: t = "100%",
+  className: l
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    variant: "text",
+    count: e,
+    width: t,
+    className: l
+  }
+), w = ({ className: e }) => /* @__PURE__ */ c("div", { className: d("bear-p-4 bear-space-y-4", e), children: [
+  /* @__PURE__ */ r(a, { variant: "rectangular", height: 200 }),
+  /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-gap-3", children: [
+    /* @__PURE__ */ r(S, {}),
+    /* @__PURE__ */ c("div", { className: "bear-flex-1", children: [
+      /* @__PURE__ */ r(a, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ r(a, { variant: "text", width: "40%", className: "bear-mt-2" })
+    ] })
+  ] }),
+  /* @__PURE__ */ r(v, { lines: 3 })
+] });
+export {
+  a as Skeleton,
+  S as SkeletonAvatar,
+  w as SkeletonCard,
+  v as SkeletonText
+};

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** The variant of the skeleton */
+    variant?: SkeletonVariant;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Width of the skeleton */
+    width?: number | string;
+    /** Height of the skeleton */
+    height?: number | string;
+    /** Number of skeleton lines to render (for text variant) */
+    count?: number;
+    /** Gap between skeleton lines */
+    gap?: number | string;
+    /** Additional CSS class */
+    className?: string;
+    /** Test ID for testing */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonCard } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonAnimation } from './Skeleton.types';

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),u=require("react"),g=require("../../utils/cn.cjs"),U={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"}},X={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 bear-border-gray-600"}},Y=({value:N,defaultValue:L=0,min:r=0,max:t=100,step:c=1,size:A="md",color:R="primary",showValue:V=!1,marks:f=!1,disabled:s=!1,orientation:F="horizontal",onChange:n,onChangeCommitted:h,valueFormatter:T=y=>String(y),ariaLabel:I="Slider",className:q,testId:O,..._})=>{const[y,p]=u.useState(L),[l,S]=u.useState(!1),[$,d]=u.useState(!1),w=u.useRef(null),o=N??y,M=(o-r)/(t-r)*100,m=U[A],j=X[R],v=u.useCallback(a=>{if(!w.current||s)return;const e=w.current.getBoundingClientRect(),i=Math.max(0,Math.min(1,(a-e.left)/e.width)),K=r+i*(t-r),P=Math.round(K/c)*c,E=Math.max(r,Math.min(t,P));p(E),n==null||n(E)},[r,t,c,s,n]),D=a=>{s||(a.preventDefault(),S(!0),d(!0),v(a.clientX))},k=u.useCallback(a=>{l&&v(a.clientX)},[l,v]),x=u.useCallback(()=>{l&&(S(!1),d(!1),h==null||h(o))},[l,o,h]);u.useEffect(()=>{if(l)return document.addEventListener("mousemove",k),document.addEventListener("mouseup",x),()=>{document.removeEventListener("mousemove",k),document.removeEventListener("mouseup",x)}},[l,k,x]);const z=a=>{if(s)return;let e=o;switch(a.key){case"ArrowRight":case"ArrowUp":e=Math.min(t,o+c);break;case"ArrowLeft":case"ArrowDown":e=Math.max(r,o-c);break;case"Home":e=r;break;case"End":e=t;break;default:return}a.preventDefault(),p(e),n==null||n(e)},B=()=>{if(!f)return null;const a=Array.isArray(f)?f:Array.from({length:(t-r)/c+1},(e,i)=>({value:r+i*c}));return b.jsx("div",{className:"bear-absolute bear-inset-x-0 bear-top-1/2 bear--translate-y-1/2 bear-flex bear-justify-between",children:a.map(e=>{const i=(e.value-r)/(t-r)*100;return b.jsxs("div",{className:"bear-absolute bear-flex bear-flex-col bear-items-center",style:{left:`${i}%`},children:[b.jsx("div",{className:"bear-w-0.5 bear-h-2 bear-bg-gray-400 dark:bear-bg-gray-500"}),e.label&&b.jsx("span",{className:"bear-mt-1 bear-text-xs bear-text-gray-500",children:e.label})]},e.value)})})};return b.jsx("div",{className:g.cn("bear-relative bear-w-full bear-flex bear-items-center",m.height,s&&"bear-opacity-50 bear-cursor-not-allowed",q),"data-testid":O,..._,children:b.jsxs("div",{ref:w,className:g.cn("bear-relative bear-w-full bear-rounded-full bear-bg-gray-200 dark:bear-bg-gray-700",m.track,!s&&"bear-cursor-pointer"),onMouseDown:D,children:[b.jsx("div",{className:g.cn("bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",j.track),style:{width:`${M}%`}}),B(),b.jsx("div",{role:"slider",tabIndex:s?-1:0,"aria-label":I,"aria-valuemin":r,"aria-valuemax":t,"aria-valuenow":o,className:g.cn("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 bear-transition-transform","focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-bear-500 focus:bear-ring-offset-2",m.thumb,j.thumb,!s&&"bear-cursor-grab active:bear-cursor-grabbing hover:bear-scale-110",l&&"bear-scale-125"),style:{left:`${M}%`},onMouseDown:D,onKeyDown:z,onFocus:()=>d(!0),onBlur:()=>!l&&d(!1),children:V&&$&&b.jsx("div",{className:"bear-absolute bear-bottom-full bear-left-1/2 bear--translate-x-1/2 bear-mb-2 bear-px-2 bear-py-1 bear-bg-gray-900 bear-text-white bear-text-xs bear-rounded bear-whitespace-nowrap",children:T(o)})})]})})};exports.Slider=Y;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { SliderProps } from './Slider.types';
+/**
+ * Slider component for range input
+ *
+ * @example
+ * ```tsx
+ * <Slider value={50} onChange={(val) => console.log(val)} />
+ * <Slider min={0} max={100} step={10} marks />
+ * <Slider color="success" showValue />
+ * ```
+ */
+export declare const Slider: FC<SliderProps>;
+export default Slider;