@clasing/ui 2.0.0 → 2.0.2

package/dist/components/blocks/date-range-picker.es.js

@@ -1,246 +0,0 @@
-import { j as e } from "../../jsx-runtime-DywqP_6a.js";
-import { L as z } from "../../label-_kG7WBoJ.js";
-import { c, a as D } from "../../index-CRiPKpXj.js";
-import { c as $ } from "../../index-BqtVL8d-.js";
-import { format as a } from "date-fns";
-import { forwardRef as I, useState as L, useEffect as T } from "react";
-import { DayPicker as B } from "react-day-picker";
-import { e as E, a as G, f as q, b as U } from "../../style-BNIXVvBA.js";
-import { I as y } from "../../icon-component-CxQsODCa.js";
-import { P as V, c as F, b as O } from "../../popover-CHAUhJda.js";
-const A = $(
-  "border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",
-  {
-    variants: {
-      size: {
-        sm: "text-label-md h-8 rounded-sm px-2 py-1",
-        md: "text-label-lg h-12 rounded-md px-3 py-1",
-        lg: "text-label-xl h-16 rounded-lg px-4 py-2"
-      },
-      rounded: {
-        default: "",
-        full: "rounded-full"
-      },
-      state: {
-        default: "",
-        selected: "bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",
-        error: "border-error-main"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      rounded: "default",
-      state: "default"
-    }
-  }
-), H = ({ onChange: d, value: r, options: f }) => /* @__PURE__ */ e.jsx(
-  "select",
-  {
-    className: "text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-md border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",
-    onChange: d,
-    value: r,
-    children: f?.map((n, m) => {
-      const g = n.value === r;
-      return /* @__PURE__ */ e.jsx(
-        "option",
-        {
-          value: n.value,
-          disabled: n.disabled,
-          className: c("disabled:hidden", {
-            "bg-blue-050 font-semibold text-blue-800": g
-          }),
-          children: n.label
-        },
-        m
-      );
-    })
-  }
-), J = ({
-  orientation: d = "down",
-  size: r = 16
-}) => /* @__PURE__ */ e.jsx(
-  y,
-  {
-    iconName: d === "left" ? "IconChevronLeft" : "IconChevronRight",
-    stroke: "1.5",
-    size: r
-  }
-), K = I(
-  ({
-    className: d,
-    locale: r = "enGB",
-    placeholder: f,
-    label: n,
-    size: m = "md",
-    rounded: g = "default",
-    disabledDates: j,
-    helperText: N,
-    side: P = "bottom",
-    align: C = "center",
-    error: b,
-    touched: x,
-    startDate: s,
-    endDate: i,
-    calendarDropdowns: M = !0,
-    onChange: w,
-    minDate: R,
-    maxDate: S,
-    disabled: p = !1,
-    ...u
-  }, _) => {
-    const [t, h] = L({
-      from: s ? new Date(s) : void 0,
-      to: i ? new Date(i) : void 0
-    }), k = (o) => {
-      if (h(o), w) {
-        const l = {
-          from: o.from ? a(o.from, "yyyy-MM-dd") : "",
-          to: o.to ? a(o.to, "yyyy-MM-dd") : ""
-        };
-        w({
-          target: {
-            name: u.name,
-            value: l
-          }
-        });
-      }
-    };
-    T(() => {
-      if (s) {
-        const o = new Date(s);
-        isNaN(o.getTime()) || h((l) => ({ ...l, from: o }));
-      }
-      if (i) {
-        const o = new Date(i);
-        isNaN(o.getTime()) || h((l) => ({ ...l, to: o }));
-      }
-    }, [s, i]);
-    const v = r === "enGB" ? E : r === "enUS" ? G : r === "fr" ? q : U;
-    return /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ref: _,
-        className: c("flex flex-col gap-3", d),
-        ...u,
-        children: [
-          n && /* @__PURE__ */ e.jsx(
-            z,
-            {
-              htmlFor: u.id,
-              className: c({ "text-neutral-700": p }),
-              children: n
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(V, { children: [
-            /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsxs(
-              "button",
-              {
-                type: "button",
-                className: c(
-                  A({
-                    size: m,
-                    rounded: g,
-                    state: t.from && t.to || x && !b ? "selected" : b && x ? "error" : "default"
-                  }),
-                  {
-                    "text-neutral-800": !t.from && !t.to
-                  }
-                ),
-                disabled: p,
-                children: [
-                  /* @__PURE__ */ e.jsx(
-                    y,
-                    {
-                      iconName: "IconCalendar",
-                      size: 20,
-                      className: "pointer-events-none"
-                    }
-                  ),
-                  t.from && t.to ? `${a(t.from, "PPP", { locale: v })} - ${a(t.to, "PPP", { locale: v })}` : f || "Select a date range",
-                  /* @__PURE__ */ e.jsx(
-                    "input",
-                    {
-                      hidden: !0,
-                      onChange: () => null,
-                      value: t.from && t.to ? `${a(t.from, "yyyy-MM-dd")} to ${a(t.to, "yyyy-MM-dd")}` : `${s || ""} to ${i || ""}`
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(
-              O,
-              {
-                className: "w-auto overflow-hidden p-0",
-                side: P,
-                align: C,
-                children: /* @__PURE__ */ e.jsx(
-                  B,
-                  {
-                    mode: "range",
-                    captionLayout: M ? "dropdown" : "label",
-                    selected: t,
-                    onSelect: k,
-                    locale: v,
-                    startMonth: R || new Date(1900, 0, 1),
-                    endMonth: S || new Date(2100, 11, 31),
-                    showOutsideDays: !0,
-                    disabled: j,
-                    className: "p-2",
-                    required: !0,
-                    classNames: {
-                      root: "w-fit text-sm text-center",
-                      weekday: "text-muted-foreground font-regular",
-                      month_grid: "border-separate",
-                      month_caption: "h-9 relative flex items-center w-full",
-                      dropdowns: "absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",
-                      button_next: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
-                      button_previous: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
-                      nav: "w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",
-                      selected: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                      today: "bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",
-                      outside: "bg-white text-neutral-200 border-[0.5px] border-neutral-000",
-                      day_button: "text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",
-                      caption_label: "text-neutral-1000 text-base font-semibold leading-none self-center w-full",
-                      disabled: "bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",
-                      day: "h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",
-                      range_end: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                      range_start: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                      range_middle: "bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"
-                    },
-                    components: {
-                      Dropdown: H,
-                      Chevron: ({ orientation: o, size: l }) => /* @__PURE__ */ e.jsx(J, { orientation: o, size: l })
-                    }
-                  }
-                )
-              }
-            )
-          ] }),
-          b && x ? /* @__PURE__ */ e.jsx(
-            "span",
-            {
-              "aria-describedby": u.id,
-              "aria-invalid": "true",
-              className: "text-error-main text-label-md -mt-1",
-              children: b
-            }
-          ) : /* @__PURE__ */ e.jsx(
-            "span",
-            {
-              className: D("text-muted-foreground -mt-1", {
-                "text-neutral-700": p
-              }),
-              "aria-describedby": u.id,
-              children: N
-            }
-          )
-        ]
-      }
-    );
-  }
-), Q = K;
-Q.displayName = "DateRangePicker";
-export {
-  Q as DateRangePicker
-};

package/dist/entries/blocks/date-picker.d.ts

@@ -1,2 +0,0 @@
-import { Datepicker } from '../../components/blocks/date-picker';
-export { Datepicker };

package/dist/entries/blocks/date-range-picker.d.ts

@@ -1,2 +0,0 @@
-import { DateRangePicker } from '../../components/blocks/date-range-picker';
-export { DateRangePicker };

package/dist/input-BoPcvULq.js

@@ -1,174 +0,0 @@
-import { j as s } from "./jsx-runtime-DywqP_6a.js";
-import { L as j } from "./label-_kG7WBoJ.js";
-import { c as r } from "./index-CRiPKpXj.js";
-import { c as N } from "./index-BqtVL8d-.js";
-import * as y from "react";
-import { I as d } from "./icon-component-CxQsODCa.js";
-const I = N(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      size: {
-        sm: "text-label-md h-8 rounded-sm px-2 py-1",
-        md: "text-label-lg h-12 rounded-md px-3 py-1",
-        lg: "text-label-xl h-16 rounded-lg px-4 py-2"
-      },
-      rounded: {
-        default: "",
-        full: "rounded-full"
-      },
-      state: {
-        default: "",
-        error: "border-destructive ring-destructive/20 dark:ring-destructive/40",
-        success: "border-success ring-success/20 dark:ring-success/40"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      rounded: "default",
-      state: "default"
-    }
-  }
-);
-function V({
-  className: b,
-  label: x,
-  helperText: u,
-  error: t,
-  touched: i,
-  iconName: f,
-  iconPosition: n = "left",
-  type: l = "text",
-  size: g,
-  rounded: v,
-  state: z,
-  containerClassName: p,
-  ...e
-}) {
-  const [o, w] = y.useState(!1), a = f ? ((m) => typeof m == "string" ? { name: m } : m)(f) : void 0, c = t && i ? "error" : i && !t && e.value ? "success" : "default", h = () => {
-    w(!o);
-  };
-  return /* @__PURE__ */ s.jsxs("div", { className: r("flex flex-col gap-2", p), children: [
-    x && /* @__PURE__ */ s.jsx(
-      j,
-      {
-        htmlFor: e.id,
-        className: r("mb-1", {
-          "opacity-50": e.disabled
-        }),
-        children: x
-      }
-    ),
-    /* @__PURE__ */ s.jsxs("div", { className: "relative w-full", children: [
-      a && n === "left" && /* @__PURE__ */ s.jsx(
-        "span",
-        {
-          className: r("absolute top-1/2 left-3 -translate-y-1/2", {
-            "text-muted-foreground": c === "default",
-            "text-destructive": c === "error",
-            "text-success-main": c === "success",
-            "text-muted-foreground opacity-50": e.disabled
-          }),
-          children: /* @__PURE__ */ s.jsx(
-            d,
-            {
-              iconName: a.name,
-              stroke: a.stroke,
-              size: 20
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ s.jsx(
-        "input",
-        {
-          type: l === "password" ? o ? "text" : "password" : l,
-          "data-slot": "input",
-          "aria-describedby": e.id && u ? `${e.id}-helper-text` : void 0,
-          "aria-invalid": !!(t && i),
-          "aria-errormessage": e.id && t ? `${e.id}-error-text` : void 0,
-          className: r(
-            I({
-              size: g,
-              rounded: v,
-              state: c,
-              className: r(
-                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-                a && n === "left" ? "pl-10" : "",
-                a && n === "right" || l === "password" ? "pr-10" : "",
-                l === "color" ? "h-[50px] p-0" : "",
-                b
-              )
-            })
-          ),
-          ...e
-        }
-      ),
-      l === "password" && /* @__PURE__ */ s.jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-label": o ? "Hide password" : "Show password",
-          className: "absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 hover:bg-neutral-100/50 focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-none",
-          onClick: h,
-          children: /* @__PURE__ */ s.jsx(
-            d,
-            {
-              iconName: o ? "IconEyeOff" : "IconEye",
-              size: 20
-            }
-          )
-        }
-      ),
-      a && n === "right" && l !== "password" && /* @__PURE__ */ s.jsx("span", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ s.jsx(
-        d,
-        {
-          iconName: a.name,
-          stroke: a.stroke,
-          size: 20
-        }
-      ) }),
-      !a && t && i && l !== "password" && /* @__PURE__ */ s.jsx(
-        d,
-        {
-          iconName: "IconAlertCircleFilled",
-          size: 20,
-          className: "text-destructive absolute top-1/2 right-3 -translate-y-1/2"
-        }
-      ),
-      !a && i && !t && e.value && l !== "password" && /* @__PURE__ */ s.jsx(
-        d,
-        {
-          iconName: "IconCircleCheckFilled",
-          size: 20,
-          className: "text-success-main absolute top-1/2 right-3 -translate-y-1/2"
-        }
-      )
-    ] }),
-    t && i ? /* @__PURE__ */ s.jsx(
-      "span",
-      {
-        id: e.id && `${e.id}-error-text`,
-        "aria-invalid": !0,
-        className: "text-destructive text-label-md",
-        children: t
-      }
-    ) : u ? /* @__PURE__ */ s.jsx(
-      "span",
-      {
-        id: e.id && `${e.id}-helper-text`,
-        className: r("text-label-md", {
-          "text-muted-foreground": !t && !i,
-          "text-destructive": t && i,
-          "text-success-main": i && !t && e.value !== void 0,
-          "text-muted-foreground opacity-50": e.disabled
-        }),
-        children: u
-      }
-    ) : null
-  ] });
-}
-export {
-  V as I
-};

package/dist/input-eri6Lyeo.cjs

@@ -1 +0,0 @@
-"use strict";const s=require("./jsx-runtime-BuHQgaKs.cjs"),h=require("./label-U5GnYvFO.cjs"),d=require("./index-DoxiiusW.cjs"),y=require("./index-C8P6Mn4U.cjs"),N=require("react"),c=require("./icon-component-D5YssRbR.cjs");function R(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const t=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(o,a,t.get?t:{enumerable:!0,get:()=>l[a]})}}return o.default=l,Object.freeze(o)}const E=R(N),I=y.cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",error:"border-destructive ring-destructive/20 dark:ring-destructive/40",success:"border-success ring-success/20 dark:ring-success/40"}},defaultVariants:{size:"md",rounded:"default",state:"default"}});function z({className:l,label:o,helperText:a,error:t,touched:i,iconName:b,iconPosition:u="left",type:r="text",size:p,rounded:g,state:k,containerClassName:j,...e}){const[x,v]=E.useState(!1),n=b?(f=>typeof f=="string"?{name:f}:f)(b):void 0,m=t&&i?"error":i&&!t&&e.value?"success":"default",w=()=>{v(!x)};return s.jsxRuntimeExports.jsxs("div",{className:d.cn("flex flex-col gap-2",j),children:[o&&s.jsxRuntimeExports.jsx(h.Label,{htmlFor:e.id,className:d.cn("mb-1",{"opacity-50":e.disabled}),children:o}),s.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[n&&u==="left"&&s.jsxRuntimeExports.jsx("span",{className:d.cn("absolute top-1/2 left-3 -translate-y-1/2",{"text-muted-foreground":m==="default","text-destructive":m==="error","text-success-main":m==="success","text-muted-foreground opacity-50":e.disabled}),children:s.jsxRuntimeExports.jsx(c.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),s.jsxRuntimeExports.jsx("input",{type:r==="password"?x?"text":"password":r,"data-slot":"input","aria-describedby":e.id&&a?`${e.id}-helper-text`:void 0,"aria-invalid":!!(t&&i),"aria-errormessage":e.id&&t?`${e.id}-error-text`:void 0,className:d.cn(I({size:p,rounded:g,state:m,className:d.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",n&&u==="left"?"pl-10":"",n&&u==="right"||r==="password"?"pr-10":"",r==="color"?"h-[50px] p-0":"",l)})),...e}),r==="password"&&s.jsxRuntimeExports.jsx("button",{type:"button",tabIndex:-1,"aria-label":x?"Hide password":"Show password",className:"absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 hover:bg-neutral-100/50 focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-none",onClick:w,children:s.jsxRuntimeExports.jsx(c.IconComponent,{iconName:x?"IconEyeOff":"IconEye",size:20})}),n&&u==="right"&&r!=="password"&&s.jsxRuntimeExports.jsx("span",{className:"absolute top-1/2 right-3 -translate-y-1/2",children:s.jsxRuntimeExports.jsx(c.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),!n&&t&&i&&r!=="password"&&s.jsxRuntimeExports.jsx(c.IconComponent,{iconName:"IconAlertCircleFilled",size:20,className:"text-destructive absolute top-1/2 right-3 -translate-y-1/2"}),!n&&i&&!t&&e.value&&r!=="password"&&s.jsxRuntimeExports.jsx(c.IconComponent,{iconName:"IconCircleCheckFilled",size:20,className:"text-success-main absolute top-1/2 right-3 -translate-y-1/2"})]}),t&&i?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md",children:t}):a?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-helper-text`,className:d.cn("text-label-md",{"text-muted-foreground":!t&&!i,"text-destructive":t&&i,"text-success-main":i&&!t&&e.value!==void 0,"text-muted-foreground opacity-50":e.disabled}),children:a}):null]})}exports.Input=z;