fina-react-ds 1.0.7 → 1.0.8

package/dist/components/calendar.js

@@ -1,6 +1,6 @@
 var w = Object.defineProperty;
-var n = (f, o) => w(f, "name", { value: o, configurable: !0 });
-import { jsx as c } from "react/jsx-runtime";
+var f = (d, o) => w(d, "name", { value: o, configurable: !0 });
+import { jsx as a } from "react/jsx-runtime";
 import * as g from "react";
 import { ChevronLeftIcon as h, ChevronRightIcon as y, ChevronDownIcon as _ } from "lucide-react";
 import { getDefaultClassNames as x, DayPicker as v } from "react-day-picker";
@@ -8,9 +8,9 @@ import { cn as e } from "../lib/utils.js";
 import { buttonVariants as p, Button as z } from "./button.js";
 import { fr as k } from "../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/fr.js";
 function q({
-  className: f,
+  className: d,
   classNames: o,
-  showOutsideDays: r = !0,
+  showOutsideDays: c = !0,
   captionLayout: s = "label",
   buttonVariant: u = "ghost",
   formatters: i,
@@ -18,20 +18,20 @@ function q({
   ...b
 }) {
   const t = x();
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(
     v,
     {
       locale: k,
-      showOutsideDays: r,
+      showOutsideDays: c,
       className: e(
         "fc:group/calendar fc:p-3 fc:[--cell-size:--spacing(8)]",
         String.raw`fc:rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`fc:rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        f
+        d
       ),
       captionLayout: s,
       formatters: {
-        formatMonthDropdown: /* @__PURE__ */ n((a) => a.toLocaleString("default", { month: "short" }), "formatMonthDropdown"),
+        formatMonthDropdown: /* @__PURE__ */ f((r) => r.toLocaleString("default", { month: "short" }), "formatMonthDropdown"),
         ...i
       },
       classNames: {
@@ -131,54 +131,54 @@ function q({
         ...o
       },
       components: {
-        Root: /* @__PURE__ */ n(({ className: a, rootRef: d, ...l }) => /* @__PURE__ */ c(
+        Root: /* @__PURE__ */ f(({ className: r, rootRef: n, ...l }) => /* @__PURE__ */ a(
           "div",
           {
             "data-slot": "calendar",
-            ref: d,
-            className: e(a),
+            ref: n,
+            className: e(r),
             ...l
           }
         ), "Root"),
-        Chevron: /* @__PURE__ */ n(({ className: a, orientation: d, ...l }) => d === "left" ? /* @__PURE__ */ c(
+        Chevron: /* @__PURE__ */ f(({ className: r, orientation: n, ...l }) => n === "left" ? /* @__PURE__ */ a(
           h,
           {
-            className: e("fc:size-4", a),
+            className: e("fc:size-4", r),
             ...l
           }
-        ) : d === "right" ? /* @__PURE__ */ c(
+        ) : n === "right" ? /* @__PURE__ */ a(
           y,
           {
-            className: e("fc:size-4", a),
+            className: e("fc:size-4", r),
             ...l
           }
-        ) : /* @__PURE__ */ c(
+        ) : /* @__PURE__ */ a(
           _,
           {
-            className: e("fc:size-4", a),
+            className: e("fc:size-4", r),
             ...l
           }
         ), "Chevron"),
         DayButton: N,
-        WeekNumber: /* @__PURE__ */ n(({ children: a, ...d }) => /* @__PURE__ */ c("td", { ...d, children: /* @__PURE__ */ c("div", { className: "fc:flex fc:size-(--cell-size) fc:items-center fc:justify-center fc:text-center", children: a }) }), "WeekNumber"),
+        WeekNumber: /* @__PURE__ */ f(({ children: r, ...n }) => /* @__PURE__ */ a("td", { ...n, children: /* @__PURE__ */ a("div", { className: "fc:flex fc:size-(--cell-size) fc:items-center fc:justify-center fc:text-center", children: r }) }), "WeekNumber"),
         ...m
       },
       ...b
     }
   );
 }
-n(q, "Calendar");
+f(q, "Calendar");
 function N({
-  className: f,
+  className: d,
   day: o,
-  modifiers: r,
+  modifiers: c,
   ...s
 }) {
   const u = x(), i = g.useRef(null);
   return g.useEffect(() => {
     var m;
-    r.focused && ((m = i.current) == null || m.focus());
-  }, [r.focused]), /* @__PURE__ */ c(
+    c.focused && ((m = i.current) == null || m.focus());
+  }, [c.focused]), /* @__PURE__ */ a(
     z,
     {
       ref: i,
@@ -186,20 +186,20 @@ function N({
       size: "icon",
       color: "dark",
       "data-day": o.date.toLocaleDateString(),
-      "data-selected-single": r.selected && !r.range_start && !r.range_end && !r.range_middle,
-      "data-range-start": r.range_start,
-      "data-range-end": r.range_end,
-      "data-range-middle": r.range_middle,
+      "data-selected-single": c.selected && !c.range_start && !c.range_end && !c.range_middle,
+      "data-range-start": c.range_start,
+      "data-range-end": c.range_end,
+      "data-range-middle": c.range_middle,
       className: e(
-        "fc:data-[selected-single=true]:bg-primary! fc:data-[selected-single=true]:text-primary-foreground! data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-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-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "fc:data-[selected-single=true]:bg-primary! fc:data-[selected-single=true]:text-primary-foreground! fc:data-[range-middle=true]:bg-accent fc:data-[range-middle=true]:text-accent-foreground fc:data-[range-start=true]:bg-primary fc:data-[range-start=true]:text-primary-foreground fc:data-[range-end=true]:bg-primary fc:data-[range-end=true]:text-primary-foreground fc:group-data-[focused=true]/day:border-ring fc:group-data-[focused=true]/day:ring-ring/50 fc:dark:hover:text-accent-foreground fc:flex fc:aspect-square fc:size-auto fc:w-full fc:min-w-(--cell-size) fc:flex-col fc:gap-1 fc:leading-none fc:font-normal fc:group-data-[focused=true]/day:relative fc:group-data-[focused=true]/day:z-10 fc:group-data-[focused=true]/day:ring-[3px] fc:data-[range-end=true]:rounded-md fc:data-[range-end=true]:rounded-r-md fc:data-[range-middle=true]:rounded-none fc:data-[range-start=true]:rounded-md fc:data-[range-start=true]:rounded-l-md fc:[&>span]:text-xs fc:[&>span]:opacity-70",
         u.day,
-        f
+        d
       ),
       ...s
     }
   );
 }
-n(N, "CalendarDayButton");
+f(N, "CalendarDayButton");
 export {
   q as Calendar,
   N as CalendarDayButton

package/dist/components/mode-toggle.js

@@ -1,22 +1,22 @@
 var a = Object.defineProperty;
 var o = (r, t) => a(r, "name", { value: t, configurable: !0 });
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { Sun as l, Moon as i } from "lucide-react";
 import { Button as s } from "./button.js";
-import { DropdownMenu as m, DropdownMenuTrigger as f, DropdownMenuContent as d, DropdownMenuItem as c } from "./dropdown-menu.js";
+import { DropdownMenu as m, DropdownMenuTrigger as f, DropdownMenuContent as d, DropdownMenuItem as n } from "./dropdown-menu.js";
 import { useTheme as h } from "../providers/theme-provider.js";
 function C() {
   const { setTheme: r } = h();
-  return /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ n(s, { variant: "outline", color: "dark", size: "icon", children: [
+  return /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ c(s, { variant: "ghost", color: "dark", size: "icon", children: [
       /* @__PURE__ */ e(l, { className: "fc:h-[1.2rem] fc:w-[1.2rem] fc:scale-100 fc:rotate-0 fc:transition-all fc:dark:scale-0 fc:dark:-rotate-90" }),
       /* @__PURE__ */ e(i, { className: "fc:absolute fc:h-[1.2rem] fc:w-[1.2rem] fc:scale-0 fc:rotate-90 fc:transition-all fc:dark:scale-100 fc:dark:rotate-0" }),
       /* @__PURE__ */ e("span", { className: "fc:sr-only", children: "Toggle theme" })
     ] }) }),
-    /* @__PURE__ */ n(d, { align: "end", children: [
-      /* @__PURE__ */ e(c, { onClick: /* @__PURE__ */ o(() => r("light"), "onClick"), children: "Light" }),
-      /* @__PURE__ */ e(c, { onClick: /* @__PURE__ */ o(() => r("dark"), "onClick"), children: "Dark" }),
-      /* @__PURE__ */ e(c, { onClick: /* @__PURE__ */ o(() => r("system"), "onClick"), children: "System" })
+    /* @__PURE__ */ c(d, { align: "end", children: [
+      /* @__PURE__ */ e(n, { onClick: /* @__PURE__ */ o(() => r("light"), "onClick"), children: "Light" }),
+      /* @__PURE__ */ e(n, { onClick: /* @__PURE__ */ o(() => r("dark"), "onClick"), children: "Dark" }),
+      /* @__PURE__ */ e(n, { onClick: /* @__PURE__ */ o(() => r("system"), "onClick"), children: "System" })
     ] })
   ] });
 }

package/dist/themes/base.css

@@ -364,6 +364,10 @@
     width: calc(var(--fc-spacing) * 9);
     height: calc(var(--fc-spacing) * 9);
   }
+  .fc\:size-auto {
+    width: auto;
+    height: auto;
+  }
   .fc\:size-full {
     width: 100%;
     height: 100%;
@@ -467,6 +471,9 @@
   .fc\:max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .fc\:min-w-\(--cell-size\) {
+    min-width: var(--cell-size);
+  }
   .fc\:min-w-0 {
     min-width: calc(var(--fc-spacing) * 0);
   }
@@ -1318,6 +1325,35 @@
       opacity: 50%;
     }
   }
+  .fc\:group-data-\[focused\=true\]\/day\:relative {
+    &:is(:where(.fc\:group\/day)[data-focused="true"] *) {
+      position: relative;
+    }
+  }
+  .fc\:group-data-\[focused\=true\]\/day\:z-10 {
+    &:is(:where(.fc\:group\/day)[data-focused="true"] *) {
+      z-index: 10;
+    }
+  }
+  .fc\:group-data-\[focused\=true\]\/day\:border-ring {
+    &:is(:where(.fc\:group\/day)[data-focused="true"] *) {
+      border-color: var(--ring);
+    }
+  }
+  .fc\:group-data-\[focused\=true\]\/day\:ring-\[3px\] {
+    &:is(:where(.fc\:group\/day)[data-focused="true"] *) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .fc\:group-data-\[focused\=true\]\/day\:ring-ring\/50 {
+    &:is(:where(.fc\:group\/day)[data-focused="true"] *) {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
   .fc\:group-data-\[side\=left\]\:-right-4 {
     &:is(:where(.fc\:group)[data-side="left"] *) {
       right: calc(var(--fc-spacing) * -4);
@@ -2062,6 +2098,63 @@
       padding-left: calc(var(--fc-spacing) * 8);
     }
   }
+  .fc\:data-\[range-end\=true\]\:rounded-md {
+    &[data-range-end="true"] {
+      border-radius: var(--fc-radius-md);
+    }
+  }
+  .fc\:data-\[range-end\=true\]\:rounded-r-md {
+    &[data-range-end="true"] {
+      border-top-right-radius: var(--fc-radius-md);
+      border-bottom-right-radius: var(--fc-radius-md);
+    }
+  }
+  .fc\:data-\[range-end\=true\]\:bg-primary {
+    &[data-range-end="true"] {
+      background-color: var(--primary);
+    }
+  }
+  .fc\:data-\[range-end\=true\]\:text-primary-foreground {
+    &[data-range-end="true"] {
+      color: var(--primary-foreground);
+    }
+  }
+  .fc\:data-\[range-middle\=true\]\:rounded-none {
+    &[data-range-middle="true"] {
+      border-radius: 0;
+    }
+  }
+  .fc\:data-\[range-middle\=true\]\:bg-accent {
+    &[data-range-middle="true"] {
+      background-color: var(--accent);
+    }
+  }
+  .fc\:data-\[range-middle\=true\]\:text-accent-foreground {
+    &[data-range-middle="true"] {
+      color: var(--accent-foreground);
+    }
+  }
+  .fc\:data-\[range-start\=true\]\:rounded-md {
+    &[data-range-start="true"] {
+      border-radius: var(--fc-radius-md);
+    }
+  }
+  .fc\:data-\[range-start\=true\]\:rounded-l-md {
+    &[data-range-start="true"] {
+      border-top-left-radius: var(--fc-radius-md);
+      border-bottom-left-radius: var(--fc-radius-md);
+    }
+  }
+  .fc\:data-\[range-start\=true\]\:bg-primary {
+    &[data-range-start="true"] {
+      background-color: var(--primary);
+    }
+  }
+  .fc\:data-\[range-start\=true\]\:text-primary-foreground {
+    &[data-range-start="true"] {
+      color: var(--primary-foreground);
+    }
+  }
   .fc\:data-\[selected-single\=true\]\:bg-primary\! {
     &[data-selected-single="true"] {
       background-color: var(--primary) !important;
@@ -2472,6 +2565,15 @@
       }
     }
   }
+  .fc\:dark\:hover\:text-accent-foreground {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--accent-foreground);
+        }
+      }
+    }
+  }
   .fc\:has-aria-invalid\:dark\:ring-destructive\/40\! {
     &:has(*[aria-invalid="true"]) {
       &:is(.dark *) {
@@ -2615,6 +2717,17 @@
       display: none;
     }
   }
+  .fc\:\[\&\>span\]\:text-xs {
+    &>span {
+      font-size: var(--fc-text-xs);
+      line-height: var(--tw-leading, var(--fc-text-xs--line-height));
+    }
+  }
+  .fc\:\[\&\>span\]\:opacity-70 {
+    &>span {
+      opacity: 70%;
+    }
+  }
   .fc\:\[\&\>span\:last-child\]\:truncate {
     &>span:last-child {
       overflow: hidden;
@@ -2795,7 +2908,6 @@
   initial-value: 0;
 }
 :root {
-  --radius: 0.625rem;
   --background: oklch(0.9659 0.008 286.25);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/F1na/fina-react-ds"
   },
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "files": [
     "dist"