@clasing/ui 2.0.1 → 2.0.2

package/dist/components/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../calendar-gxLdKgjb.cjs");exports.Calendar=e.Calendar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../jsx-runtime-BuHQgaKs.cjs"),y=require("react"),m=require("react-day-picker"),p=require("../button-BnSM-lrr.cjs"),g=require("../icon-component-D5YssRbR.cjs"),e=require("../index-DoxiiusW.cjs");function h(r){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(d,n,s.get?s:{enumerable:!0,get:()=>r[n]})}}return d.default=r,Object.freeze(d)}const f=h(y);function _({className:r,classNames:d,showOutsideDays:n=!0,captionLayout:s="label",buttonVariant:l="inverse",formatters:i,components:x,...b}){const t=m.getDefaultClassNames();return o.jsxRuntimeExports.jsx(m.DayPicker,{showOutsideDays:n,className:e.cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,r),captionLayout:s,formatters:{formatMonthDropdown:a=>a.toLocaleString("default",{month:"short"}),...i},classNames:{root:e.cn("w-fit",t.root),months:e.cn("flex gap-4 flex-col md:flex-row relative",t.months),month:e.cn("flex flex-col w-full gap-4",t.month),nav:e.cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",t.nav),button_previous:e.cn(p.buttonStyles({variant:l}),"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",t.button_previous),button_next:e.cn(p.buttonStyles({variant:l}),"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",t.button_next),month_caption:e.cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",t.month_caption),dropdowns:e.cn("w-full flex items-center text-paragraph-sm font-medium justify-center h-(--cell-size) gap-1.5",t.dropdowns),dropdown_root:e.cn("relative has-focus:border-ring border border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",t.dropdown_root),dropdown:e.cn("absolute bg-popover inset-0 opacity-0",t.dropdown),caption_label:e.cn("select-none font-medium",s==="label"?"text-paragraph-sm":"rounded-md pl-2 pr-1 flex items-center gap-1 text-paragraph-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",t.caption_label),table:"w-full border-collapse",weekdays:e.cn("flex",t.weekdays),weekday:e.cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",t.weekday),week:e.cn("flex w-full mt-2",t.week),week_number_header:e.cn("select-none w-(--cell-size)",t.week_number_header),week_number:e.cn("text-[0.8rem] select-none text-muted-foreground",t.week_number),day:e.cn("relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",t.day),range_start:e.cn("rounded-l-md bg-accent",t.range_start),range_middle:e.cn("rounded-none",t.range_middle),range_end:e.cn("rounded-r-md bg-accent",t.range_end),today:e.cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",t.today),outside:e.cn("text-muted-foreground aria-selected:text-muted-foreground",t.outside),disabled:e.cn("text-muted-foreground opacity-50",t.disabled),hidden:e.cn("invisible",t.hidden),...d},components:{Root:({className:a,rootRef:c,...u})=>o.jsxRuntimeExports.jsx("div",{"data-slot":"calendar",ref:c,className:e.cn(a),...u}),Chevron:({className:a,orientation:c,...u})=>c==="left"?o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronLeft",className:e.cn("size-4",a),...u}):c==="right"?o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronRight",className:e.cn("size-4",a),...u}):o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronDown",className:e.cn("size-4",a),...u}),DayButton:v,WeekNumber:({children:a,...c})=>o.jsxRuntimeExports.jsx("td",{...c,children:o.jsxRuntimeExports.jsx("div",{className:"flex size-(--cell-size) items-center justify-center text-center",children:a})}),...x},...b})}function v({className:r,day:d,modifiers:n,...s}){const l=m.getDefaultClassNames(),i=f.useRef(null);return f.useEffect(()=>{n.focused&&i.current?.focus()},[n.focused]),o.jsxRuntimeExports.jsx(p.Button,{ref:i,variant:"inverse",size:"sm","data-day":d.date.toLocaleDateString(),"data-selected-single":n.selected&&!n.range_start&&!n.range_end&&!n.range_middle,"data-range-start":n.range_start,"data-range-end":n.range_end,"data-range-middle":n.range_middle,className:e.cn("data-[selected-single=true]:bg-secondary data-[selected-single=true]:text-secondary-foreground data-[range-middle=true]:bg-blue-050 data-[range-start=true]:bg-secondary data-[range-start=true]:text-secondary-foreground data-[range-end=true]:bg-secondary data-[range-end=true]:text-secondary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground data-[selected-single=true]:hover:bg-secondary/80 data-[selected-single=true]:hover:text-secondary-foreground data-[range-start=true]:hover:bg-secondary/80 data-[range-end=true]:hover:bg-secondary/80 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 rounded-md p-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:text-blue-800 data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",l.day,r),...s})}exports.Calendar=_;

package/dist/components/calendar.d.ts

@@ -1,15 +1,8 @@
-import 'react-day-picker/dist/style.css';
-export interface ICalendarProps {
-    locale?: 'enGB' | 'enUS' | 'es' | 'fr';
-    disabledDates?: string | string[] | Date | Date[] | undefined;
-    enabledDates?: string | string[] | Date | Date[] | undefined;
-    dropdownsSelectors?: boolean;
-    hideNavigation?: boolean;
-    showOutsideDays?: boolean;
-    minDate?: Date;
-    maxDate?: Date;
-    value?: string;
-    onChange?: (value: string | undefined) => void | undefined;
-    className?: string;
-}
-export declare const Calendar: React.FC<ICalendarProps>;
+import * as React from 'react';
+import { DayButton, DayPicker } from 'react-day-picker';
+import { Button } from '@/components/button';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/calendar.es.js

@@ -1,4 +1,190 @@
-import { C as e } from "../calendar-DA08oJl2.js";
+import { j as n } from "../jsx-runtime-DywqP_6a.js";
+import * as m from "react";
+import { getDefaultClassNames as p, DayPicker as y } from "react-day-picker";
+import { c as f, B as h } from "../button-C5IBh3Tr.js";
+import { I as g } from "../icon-component-CxQsODCa.js";
+import { c as e } from "../index-CRiPKpXj.js";
+function k({
+  className: c,
+  classNames: i,
+  showOutsideDays: a = !0,
+  captionLayout: s = "label",
+  buttonVariant: l = "inverse",
+  formatters: u,
+  components: x,
+  ...b
+}) {
+  const t = p();
+  return /* @__PURE__ */ n.jsx(
+    y,
+    {
+      showOutsideDays: a,
+      className: e(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        c
+      ),
+      captionLayout: s,
+      formatters: {
+        formatMonthDropdown: (r) => r.toLocaleString("default", { month: "short" }),
+        ...u
+      },
+      classNames: {
+        root: e("w-fit", t.root),
+        months: e(
+          "flex gap-4 flex-col md:flex-row relative",
+          t.months
+        ),
+        month: e("flex flex-col w-full gap-4", t.month),
+        nav: e(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          t.nav
+        ),
+        button_previous: e(
+          f({ variant: l }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_previous
+        ),
+        button_next: e(
+          f({ variant: l }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_next
+        ),
+        month_caption: e(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          t.month_caption
+        ),
+        dropdowns: e(
+          "w-full flex items-center text-paragraph-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          t.dropdowns
+        ),
+        dropdown_root: e(
+          "relative has-focus:border-ring border border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          t.dropdown_root
+        ),
+        dropdown: e(
+          "absolute bg-popover inset-0 opacity-0",
+          t.dropdown
+        ),
+        caption_label: e(
+          "select-none font-medium",
+          s === "label" ? "text-paragraph-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-paragraph-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          t.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: e("flex", t.weekdays),
+        weekday: e(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          t.weekday
+        ),
+        week: e("flex w-full mt-2", t.week),
+        week_number_header: e(
+          "select-none w-(--cell-size)",
+          t.week_number_header
+        ),
+        week_number: e(
+          "text-[0.8rem] select-none text-muted-foreground",
+          t.week_number
+        ),
+        day: e(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          t.day
+        ),
+        range_start: e(
+          "rounded-l-md bg-accent",
+          t.range_start
+        ),
+        range_middle: e("rounded-none", t.range_middle),
+        range_end: e("rounded-r-md bg-accent", t.range_end),
+        today: e(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          t.today
+        ),
+        outside: e(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          t.outside
+        ),
+        disabled: e(
+          "text-muted-foreground opacity-50",
+          t.disabled
+        ),
+        hidden: e("invisible", t.hidden),
+        ...i
+      },
+      components: {
+        Root: ({
+          className: r,
+          rootRef: d,
+          ...o
+        }) => /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: d,
+            className: e(r),
+            ...o
+          }
+        ),
+        Chevron: ({ className: r, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronLeft",
+            className: e("size-4", r),
+            ...o
+          }
+        ) : d === "right" ? /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronRight",
+            className: e("size-4", r),
+            ...o
+          }
+        ) : /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronDown",
+            className: e("size-4", r),
+            ...o
+          }
+        ),
+        DayButton: _,
+        WeekNumber: ({ children: r, ...d }) => /* @__PURE__ */ n.jsx("td", { ...d, children: /* @__PURE__ */ n.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: r }) }),
+        ...x
+      },
+      ...b
+    }
+  );
+}
+function _({
+  className: c,
+  day: i,
+  modifiers: a,
+  ...s
+}) {
+  const l = p(), u = m.useRef(null);
+  return m.useEffect(() => {
+    a.focused && u.current?.focus();
+  }, [a.focused]), /* @__PURE__ */ n.jsx(
+    h,
+    {
+      ref: u,
+      variant: "inverse",
+      size: "sm",
+      "data-day": i.date.toLocaleDateString(),
+      "data-selected-single": a.selected && !a.range_start && !a.range_end && !a.range_middle,
+      "data-range-start": a.range_start,
+      "data-range-end": a.range_end,
+      "data-range-middle": a.range_middle,
+      className: e(
+        "data-[selected-single=true]:bg-secondary data-[selected-single=true]:text-secondary-foreground data-[range-middle=true]:bg-blue-050 data-[range-start=true]:bg-secondary data-[range-start=true]:text-secondary-foreground data-[range-end=true]:bg-secondary data-[range-end=true]:text-secondary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground data-[selected-single=true]:hover:bg-secondary/80 data-[selected-single=true]:hover:text-secondary-foreground data-[range-start=true]:hover:bg-secondary/80 data-[range-end=true]:hover:bg-secondary/80 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 rounded-md p-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:text-blue-800 data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        l.day,
+        c
+      ),
+      ...s
+    }
+  );
+}
 export {
-  e as Calendar
+  k as Calendar
 };

package/dist/components/textarea.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-BuHQgaKs.cjs"),y=require("../label-U5GnYvFO.cjs"),a=require("../index-DoxiiusW.cjs"),R=require("../index-C8P6Mn4U.cjs"),u=require("../icon-component-D5YssRbR.cjs"),E=R.cva("placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 resize-none border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{sm:"text-label-md min-h-20 rounded-sm px-2 py-1",md:"text-label-lg min-h-24 rounded-md px-3 py-2",lg:"text-label-xl min-h-32 rounded-lg px-4 py-3"},rounded:{default:"",full:"rounded-2xl"},state:{default:"",error:"border-destructive ring-destructive/20 dark:ring-destructive/40",success:"border-success ring-success/20 dark:ring-success/40"},resize:{none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"}},defaultVariants:{size:"md",rounded:"default",state:"default",resize:"vertical"}});function h({className:b,label:x,helperText:c,error:s,touched:i,iconName:m,size:v,rounded:f,state:p,resize:j,containerClassName:g,maxLength:n,showCharacterCount:z=!1,...e}){const l=m?(o=>typeof o=="string"?{name:o}:o)(m):void 0,r=s&&i?"error":i&&!s&&e.value?"success":"default",d=e.value?String(e.value).length:0,N=z||n;return t.jsxRuntimeExports.jsxs("div",{className:a.cn("flex flex-col gap-2",g),children:[x&&t.jsxRuntimeExports.jsx(y.Label,{htmlFor:e.id,className:a.cn({"text-neutral-700":e.disabled}),children:x}),t.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[t.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea","aria-describedby":e.id&&c?`${e.id}-helper-text`:void 0,"aria-invalid":!!(s&&i),"aria-errormessage":e.id&&s?`${e.id}-error-text`:void 0,maxLength:n,className:a.cn(E({size:v,rounded:f,resize:j,state:r,className:a.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",l?"pr-10":"",b)})),...e}),l&&t.jsxRuntimeExports.jsx("span",{className:a.cn("absolute top-3 right-3",{"text-muted-foreground":r==="default","text-destructive":r==="error","text-success-main":r==="success","text-neutral-700":e.disabled}),children:t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:l.name,stroke:l.stroke,size:20})}),!l&&s&&i&&t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconAlertCircleFilled",size:20,className:"text-destructive absolute top-3 right-3"}),!l&&i&&!s&&e.value&&t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconCircleCheckFilled",size:20,className:"text-success-main absolute top-3 right-3"})]}),N&&t.jsxRuntimeExports.jsx("div",{className:"flex justify-end",children:t.jsxRuntimeExports.jsx("span",{className:a.cn("text-label-sm",{"text-muted-foreground":!n||d<=n,"text-destructive":n&&d>n}),children:n?`${d}/${n}`:d})}),s&&i?t.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md",children:s}):c?t.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-helper-text`,className:a.cn("text-label-md",{"text-muted-foreground":!s&&!i,"text-destructive":s&&i,"text-success-main":i&&!s&&e.value!==void 0,"text-neutral-700":e.disabled}),children:c}):null]})}exports.Textarea=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BuHQgaKs.cjs"),a=require("../index-DoxiiusW.cjs"),v=require("../index-C8P6Mn4U.cjs"),p=require("../icon-component-D5YssRbR.cjs"),x=v.cva("placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{xs:"text-label-sm min-h-16 px-2 py-1",sm:"text-label-md min-h-20 px-2 py-1",md:"text-label-lg min-h-24 px-3 py-2",lg:"text-label-xl min-h-32 px-4 py-3"},resize:{none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"}},defaultVariants:{size:"md",resize:"vertical"}});function b({className:o,size:l,resize:d,iconName:u,maxLength:t,showCharacterCount:m=!1,...i}){const r=u?(n=>typeof n=="string"?{name:n}:n)(u):void 0,s=i.value?String(i.value).length:0,c=m||t;return!r&&!c?e.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea",maxLength:t,className:a.cn(x({size:l,resize:d}),"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",o),...i}):e.jsxRuntimeExports.jsxs("div",{className:"space-y-2",children:[e.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[e.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea",maxLength:t,className:a.cn(x({size:l,resize:d}),"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",r?"pr-10":"",o),...i}),r&&e.jsxRuntimeExports.jsx("span",{className:"absolute top-3 right-3 text-muted-foreground",children:e.jsxRuntimeExports.jsx(p.IconComponent,{iconName:r.name,stroke:r.stroke,size:20})})]}),c&&e.jsxRuntimeExports.jsx("div",{className:"flex justify-end",children:e.jsxRuntimeExports.jsx("span",{className:a.cn("text-xs text-muted-foreground",{"text-destructive":t&&s>t}),children:t?`${s}/${t}`:s})})]})}exports.Textarea=b;

package/dist/components/textarea.d.ts

@@ -1,32 +1,20 @@
-import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
 import { TablerIconName } from './icon-component';
 declare const textareaStyles: (props?: ({
-    size?: "lg" | "md" | "sm" | null | undefined;
-    rounded?: "default" | "full" | null | undefined;
-    state?: "default" | "error" | "success" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     resize?: "none" | "horizontal" | "vertical" | "both" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextareaProps extends VariantProps<typeof textareaStyles> {
-    /** Label text shown above the textarea */
-    label?: string;
-    /** Helper text shown below the textarea */
-    helperText?: string;
-    /** Error message shown below the textarea */
-    error?: string;
-    /** Whether the textarea has been touched/blurred */
-    touched?: boolean;
     /** Icon to display in the top-right corner of the textarea */
     iconName?: TablerIconName | {
         name: TablerIconName;
         stroke?: string;
     };
-    /** Container className for the entire textarea component including label and helper text */
-    containerClassName?: string;
     /** Maximum number of characters allowed */
     maxLength?: number;
     /** Show character count */
     showCharacterCount?: boolean;
 }
-declare function Textarea({ className, label, helperText, error, touched, iconName, size, rounded, state, resize, containerClassName, maxLength, showCharacterCount, ...props }: Omit<React.ComponentProps<'textarea'>, 'size'> & TextareaProps): import("react/jsx-runtime").JSX.Element;
-export { Textarea, textareaStyles };
+declare function Textarea({ className, size, resize, iconName, maxLength, showCharacterCount, ...props }: Omit<React.ComponentProps<'textarea'>, 'size'> & TextareaProps): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/components/textarea.es.js

@@ -1,25 +1,16 @@
-import { j as t } from "../jsx-runtime-DywqP_6a.js";
-import { L as y } from "../label-_kG7WBoJ.js";
-import { c as l } from "../index-CRiPKpXj.js";
-import { c as h } from "../index-BqtVL8d-.js";
-import { I as u } from "../icon-component-CxQsODCa.js";
-const I = h(
-  "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 resize-none border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { c as n } from "../index-CRiPKpXj.js";
+import { c as v } from "../index-BqtVL8d-.js";
+import { I as b } from "../icon-component-CxQsODCa.js";
+const x = v(
+  "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
-        sm: "text-label-md min-h-20 rounded-sm px-2 py-1",
-        md: "text-label-lg min-h-24 rounded-md px-3 py-2",
-        lg: "text-label-xl min-h-32 rounded-lg px-4 py-3"
-      },
-      rounded: {
-        default: "",
-        full: "rounded-2xl"
-      },
-      state: {
-        default: "",
-        error: "border-destructive ring-destructive/20 dark:ring-destructive/40",
-        success: "border-success ring-success/20 dark:ring-success/40"
+        xs: "text-label-sm min-h-16 px-2 py-1",
+        sm: "text-label-md min-h-20 px-2 py-1",
+        md: "text-label-lg min-h-24 px-3 py-2",
+        lg: "text-label-xl min-h-32 px-4 py-3"
       },
       resize: {
         none: "resize-none",
@@ -30,134 +21,70 @@ const I = h(
     },
     defaultVariants: {
       size: "md",
-      rounded: "default",
-      state: "default",
       resize: "vertical"
     }
   }
 );
-function E({
-  className: f,
-  label: x,
-  helperText: c,
-  error: s,
-  touched: i,
-  iconName: m,
-  size: v,
-  rounded: b,
-  state: k,
-  resize: g,
-  containerClassName: z,
-  maxLength: a,
-  showCharacterCount: j = !1,
-  ...e
+function j({
+  className: o,
+  size: l,
+  resize: d,
+  iconName: c,
+  maxLength: r,
+  showCharacterCount: m = !1,
+  ...t
 }) {
-  const r = m ? ((o) => typeof o == "string" ? { name: o } : o)(m) : void 0, n = s && i ? "error" : i && !s && e.value ? "success" : "default", d = e.value ? String(e.value).length : 0, N = j || a;
-  return /* @__PURE__ */ t.jsxs("div", { className: l("flex flex-col gap-2", z), children: [
-    x && /* @__PURE__ */ t.jsx(
-      y,
-      {
-        htmlFor: e.id,
-        className: l({
-          "text-neutral-700": e.disabled
-        }),
-        children: x
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ t.jsx(
+  const i = c ? ((s) => typeof s == "string" ? { name: s } : s)(c) : void 0, a = t.value ? String(t.value).length : 0, u = m || r;
+  return !i && !u ? /* @__PURE__ */ e.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      maxLength: r,
+      className: n(
+        x({ size: l, resize: d }),
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        o
+      ),
+      ...t
+    }
+  ) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ e.jsx(
         "textarea",
         {
           "data-slot": "textarea",
-          "aria-describedby": e.id && c ? `${e.id}-helper-text` : void 0,
-          "aria-invalid": !!(s && i),
-          "aria-errormessage": e.id && s ? `${e.id}-error-text` : void 0,
-          maxLength: a,
-          className: l(
-            I({
-              size: v,
-              rounded: b,
-              resize: g,
-              state: n,
-              className: l(
-                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-                r ? "pr-10" : "",
-                f
-              )
-            })
+          maxLength: r,
+          className: n(
+            x({ size: l, resize: d }),
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            i ? "pr-10" : "",
+            o
           ),
-          ...e
-        }
-      ),
-      r && /* @__PURE__ */ t.jsx(
-        "span",
-        {
-          className: l("absolute top-3 right-3", {
-            "text-muted-foreground": n === "default",
-            "text-destructive": n === "error",
-            "text-success-main": n === "success",
-            "text-neutral-700": e.disabled
-          }),
-          children: /* @__PURE__ */ t.jsx(
-            u,
-            {
-              iconName: r.name,
-              stroke: r.stroke,
-              size: 20
-            }
-          )
+          ...t
         }
       ),
-      !r && s && i && /* @__PURE__ */ t.jsx(
-        u,
+      i && /* @__PURE__ */ e.jsx("span", { className: "absolute top-3 right-3 text-muted-foreground", children: /* @__PURE__ */ e.jsx(
+        b,
         {
-          iconName: "IconAlertCircleFilled",
-          size: 20,
-          className: "text-destructive absolute top-3 right-3"
+          iconName: i.name,
+          stroke: i.stroke,
+          size: 20
         }
-      ),
-      !r && i && !s && e.value && /* @__PURE__ */ t.jsx(
-        u,
-        {
-          iconName: "IconCircleCheckFilled",
-          size: 20,
-          className: "text-success-main absolute top-3 right-3"
-        }
-      )
+      ) })
     ] }),
-    N && /* @__PURE__ */ t.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: l("text-label-sm", {
-          "text-muted-foreground": !a || d <= a,
-          "text-destructive": a && d > a
-        }),
-        children: a ? `${d}/${a}` : d
-      }
-    ) }),
-    s && i ? /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        id: e.id && `${e.id}-error-text`,
-        "aria-invalid": !0,
-        className: "text-destructive text-label-md",
-        children: s
-      }
-    ) : c ? /* @__PURE__ */ t.jsx(
+    u && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ e.jsx(
       "span",
       {
-        id: e.id && `${e.id}-helper-text`,
-        className: l("text-label-md", {
-          "text-muted-foreground": !s && !i,
-          "text-destructive": s && i,
-          "text-success-main": i && !s && e.value !== void 0,
-          "text-neutral-700": e.disabled
+        className: n("text-xs text-muted-foreground", {
+          "text-destructive": r && a > r
         }),
-        children: c
+        children: r ? `${a}/${r}` : a
       }
-    ) : null
+    ) })
   ] });
 }
 export {
-  E as Textarea
+  j as Textarea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -230,16 +230,6 @@
       "require": "./dist/components/tooltip.umd.js",
       "types": "./dist/components/tooltip.d.ts"
     },
-    "./blocks/date-picker": {
-      "import": "./dist/components/blocks/date-picker.es.js",
-      "require": "./dist/components/blocks/date-picker.umd.js",
-      "types": "./dist/components/blocks/date-picker.d.ts"
-    },
-    "./blocks/date-range-picker": {
-      "import": "./dist/components/blocks/date-range-picker.es.js",
-      "require": "./dist/components/blocks/date-range-picker.umd.js",
-      "types": "./dist/components/blocks/date-range-picker.d.ts"
-    },
     "./blocks/interactive-card": {
       "import": "./dist/components/blocks/interactive-card.es.js",
       "require": "./dist/components/blocks/interactive-card.umd.js",

package/dist/calendar-DA08oJl2.js

@@ -1,117 +0,0 @@
-import { j as i } from "./jsx-runtime-DywqP_6a.js";
-import { c as x } from "./index-CRiPKpXj.js";
-import { min as S, max as E, startOfMonth as N, endOfMonth as k, eachDayOfInterval as I, format as z } from "date-fns";
-import { useState as T, useEffect as B } from "react";
-import { DayPicker as G } from "react-day-picker";
-import { e as L, a as O, f as F, b as H } from "./style-BNIXVvBA.js";
-import { I as P } from "./icon-component-CxQsODCa.js";
-const R = ({ onChange: r, value: t, options: o }) => /* @__PURE__ */ i.jsx(
-  "select",
-  {
-    className: "text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-2xl 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: r,
-    value: t,
-    children: o?.map((n, l) => {
-      const u = n.value === t;
-      return /* @__PURE__ */ i.jsx(
-        "option",
-        {
-          value: n.value,
-          disabled: n.disabled,
-          className: x("disabled:hidden", {
-            "bg-blue-050 font-semibold text-blue-800": u
-          }),
-          children: n.label
-        },
-        l
-      );
-    })
-  }
-), U = ({
-  orientation: r = "down",
-  size: t = 16
-}) => /* @__PURE__ */ i.jsx(
-  P,
-  {
-    iconName: r === "left" ? "IconChevronLeft" : "IconChevronRight",
-    stroke: "1.5",
-    size: t
-  }
-), Y = ({
-  locale: r = "enGB",
-  disabledDates: t,
-  enabledDates: o,
-  dropdownsSelectors: n = !0,
-  hideNavigation: l = !1,
-  showOutsideDays: u = !0,
-  minDate: w,
-  maxDate: y,
-  value: c,
-  className: D,
-  onChange: m
-}) => {
-  const [_, b] = T(), j = (e) => e.filter((a) => a !== void 0), d = Array.isArray(o) ? o.map((e) => new Date(e)) : o ? new Date(o) : void 0, s = Array.isArray(d) ? j(d) : d ? [d] : [], f = s.length > 0 ? S(s) : void 0, p = s.length > 0 ? E(s) : void 0, g = () => Array.isArray(t) ? t.map((e) => new Date(e)) : t ? new Date(t) : void 0, h = Array.isArray(g()) ? [...g()] : [];
-  if (f && p) {
-    const e = N(f), a = k(p);
-    I({ start: e, end: a }).forEach((v) => {
-      s.some(
-        (M) => M.setHours(0, 0, 0, 0) === v.setHours(0, 0, 0, 0)
-      ) || h.push(v);
-    });
-  }
-  B(() => {
-    if (c) {
-      const e = new Date(c);
-      isNaN(e.getTime()) || b(e);
-    } else
-      b(void 0);
-  }, [c]);
-  const C = (e) => {
-    b(e), m && m(e ? z(e, "yyyy-MM-dd") : void 0);
-  }, A = r === "enGB" ? L : r === "enUS" ? O : r === "fr" ? F : H;
-  return /* @__PURE__ */ i.jsx(
-    G,
-    {
-      mode: "single",
-      captionLayout: n ? "dropdown" : "label",
-      selected: _,
-      onSelect: C,
-      locale: A,
-      startMonth: w || f || new Date(1900, 1, 1),
-      endMonth: y || p || new Date(2100, 12, 31),
-      disabled: h,
-      showOutsideDays: u,
-      hideNavigation: l,
-      className: x(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        D
-      ),
-      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 ${l ? "hidden" : ""}`,
-        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-md 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-md 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-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold",
-        today: "bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",
-        disabled: "bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",
-        caption_label: "text-neutral-1000 text-base font-semibold leading-none self-center w-full",
-        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-md",
-        day: "h-9 w-9 aspect-square text-sm rounded-md border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap"
-      },
-      components: {
-        Dropdown: R,
-        Chevron: ({ orientation: e, size: a }) => /* @__PURE__ */ i.jsx(U, { orientation: e, size: a })
-      }
-    }
-  );
-};
-export {
-  Y as C
-};