fina-react-ds 1.0.0 → 1.0.1

package/dist/components/calendar.js

@@ -0,0 +1,206 @@
+var w = Object.defineProperty;
+var n = (f, o) => w(f, "name", { value: o, configurable: !0 });
+import { jsx as c } 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";
+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,
+  classNames: o,
+  showOutsideDays: r = !0,
+  captionLayout: s = "label",
+  buttonVariant: u = "ghost",
+  formatters: i,
+  components: m,
+  ...b
+}) {
+  const t = x();
+  return /* @__PURE__ */ c(
+    v,
+    {
+      locale: k,
+      showOutsideDays: r,
+      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
+      ),
+      captionLayout: s,
+      formatters: {
+        formatMonthDropdown: /* @__PURE__ */ n((a) => a.toLocaleString("default", { month: "short" }), "formatMonthDropdown"),
+        ...i
+      },
+      classNames: {
+        root: e("fc:w-fit", t.root),
+        months: e(
+          "fc:flex fc:gap-4 fc:flex-col fc:md:flex-row fc:relative",
+          t.months
+        ),
+        month: e(
+          "fc:flex fc:flex-col fc:w-full fc:gap-4",
+          t.month
+        ),
+        nav: e(
+          "fc:flex fc:items-center fc:gap-1 fc:w-full fc:absolute fc:top-0 fc:inset-x-0 fc:justify-between",
+          t.nav
+        ),
+        button_previous: e(
+          p({
+            variant: u,
+            color: "dark",
+            size: "icon"
+          }),
+          "fc:size-(--cell-size) fc:aria-disabled:opacity-50 fc:p-0 fc:select-none",
+          t.button_previous
+        ),
+        button_next: e(
+          p({
+            variant: u,
+            color: "dark",
+            size: "icon"
+          }),
+          "fc:size-(--cell-size) fc:aria-disabled:opacity-50 fc:p-0 fc:select-none",
+          t.button_next
+        ),
+        month_caption: e(
+          "fc:flex fc:items-center fc:justify-center fc:h-(--cell-size) fc:w-full fc:px-(--cell-size)",
+          t.month_caption
+        ),
+        dropdowns: e(
+          "fc:w-full fc:flex fc:items-center fc:text-sm fc:font-medium fc:justify-center fc:h-(--cell-size) fc:gap-1.5",
+          t.dropdowns
+        ),
+        dropdown_root: e(
+          "fc:relative fc:has-focus:border-ring fc:border fc:border-input-border fc:shadow-xs fc:has-focus:ring-ring/50 fc:has-focus:ring-[3px] fc:rounded-md",
+          t.dropdown_root
+        ),
+        dropdown: e(
+          "fc:absolute fc:bg-popover fc:inset-0 fc:opacity-0",
+          t.dropdown
+        ),
+        caption_label: e(
+          "select-none font-medium",
+          s === "label" ? "fc:text-sm" : "fc:rounded-md fc:pl-2 fc:pr-1 fc:flex fc:items-center fc:gap-1 fc:text-sm fc:h-8 fc:[&>svg]:text-muted fc:[&>svg]:size-3.5",
+          t.caption_label
+        ),
+        table: "fc:w-full fc:border-collapse",
+        weekdays: e("fc:flex", t.weekdays),
+        weekday: e(
+          "fc:text-muted fc:rounded-md fc:flex-1 fc:font-normal fc:text-[0.8rem] fc:select-none",
+          t.weekday
+        ),
+        week: e("fc:flex fc:w-full fc:mt-2", t.week),
+        week_number_header: e(
+          "fc:select-none w-(--cell-size)",
+          t.week_number_header
+        ),
+        week_number: e(
+          "fc:text-[0.8rem] fc:select-none fc:text-muted",
+          t.week_number
+        ),
+        day: e(
+          "fc:relative fc:w-full fc:h-full fc:p-0 fc:text-center fc:[&:first-child[data-selected=true]_button]:rounded-l-md fc:[&:last-child[data-selected=true]_button]:rounded-r-md fc:group/day fc:aspect-square fc:select-none",
+          t.day
+        ),
+        range_start: e(
+          "fc:rounded-l-md fc:bg-accent",
+          t.range_start
+        ),
+        range_middle: e("fc:rounded-none", t.range_middle),
+        range_end: e(
+          "fc:rounded-r-md fc:bg-accent",
+          t.range_end
+        ),
+        today: e(
+          "fc:bg-accent fc:text-accent-foreground fc:rounded-md fc:data-[selected=true]:rounded-none",
+          t.today
+        ),
+        outside: e(
+          "fc:text-muted fc:aria-selected:text-muted",
+          t.outside
+        ),
+        disabled: e(
+          "fc:text-muted fc:opacity-50",
+          t.disabled
+        ),
+        hidden: e("fc:invisible", t.hidden),
+        ...o
+      },
+      components: {
+        Root: /* @__PURE__ */ n(({ className: a, rootRef: d, ...l }) => /* @__PURE__ */ c(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: d,
+            className: e(a),
+            ...l
+          }
+        ), "Root"),
+        Chevron: /* @__PURE__ */ n(({ className: a, orientation: d, ...l }) => d === "left" ? /* @__PURE__ */ c(
+          h,
+          {
+            className: e("fc:size-4", a),
+            ...l
+          }
+        ) : d === "right" ? /* @__PURE__ */ c(
+          y,
+          {
+            className: e("fc:size-4", a),
+            ...l
+          }
+        ) : /* @__PURE__ */ c(
+          _,
+          {
+            className: e("fc:size-4", a),
+            ...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"),
+        ...m
+      },
+      ...b
+    }
+  );
+}
+n(q, "Calendar");
+function N({
+  className: f,
+  day: o,
+  modifiers: r,
+  ...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(
+    z,
+    {
+      ref: i,
+      variant: "ghost",
+      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,
+      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",
+        u.day,
+        f
+      ),
+      ...s
+    }
+  );
+}
+n(N, "CalendarDayButton");
+export {
+  q as Calendar,
+  N as CalendarDayButton
+};

package/dist/components/date-picker.js

@@ -0,0 +1,61 @@
+var p = Object.defineProperty;
+var c = (i, e) => p(i, "name", { value: e, configurable: !0 });
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import * as m from "react";
+import { Calendar as u } from "lucide-react";
+import { Calendar as x } from "./calendar.js";
+import { Popover as b, PopoverTrigger as v, PopoverContent as g } from "./popover.js";
+import { Button as h } from "./button.js";
+function D({
+  placeholder: i = "Choisir une date",
+  onChange: e,
+  value: t,
+  isClearable: s = !1,
+  ...f
+}) {
+  const [d, o] = m.useState(!1), l = /* @__PURE__ */ c((n) => {
+    e == null || e(n || null), o(!1);
+  }, "onSelect");
+  return console.log("DatePicker value", t), /* @__PURE__ */ a(b, { onOpenChange: o, open: d, children: [
+    /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ a(
+      "button",
+      {
+        "data-empty": !t,
+        ...f,
+        className: "fc:border-input-border fc:flex fc:items-center fc:h-9 fc:w-full fc:min-w-0 fc:rounded-md fc:border fc:bg-input fc:px-3 fc:py-1 fc:text-base fc:shadow-xs fc:focus-visible:border-ring fc:ring-ring/50 fc:focus-visible:ring-[3px] fc:data-[state=open]:ring-[3px] fc:data-[state=open]:border-ring fc:aria-invalid:ring-destructive/20 fc:dark:aria-invalid:ring-destructive/40 fc:aria-invalid:border-destructive! fc:outline-none  fc:md:text-sm",
+        children: [
+          /* @__PURE__ */ r(u, { className: "fc:mr-2 fc:size-4" }),
+          t ? /* @__PURE__ */ r("span", { children: "Ma date" }) : /* @__PURE__ */ r("span", { className: "fc:text-placeholder", children: i })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ a(g, { align: "start", className: "fc:w-auto fc:p-0", children: [
+      /* @__PURE__ */ r(
+        x,
+        {
+          mode: "single",
+          required: !0,
+          selected: t || void 0,
+          onSelect: l,
+          captionLayout: "dropdown"
+        }
+      ),
+      t && s && /* @__PURE__ */ r("div", { className: "flex justify-center border-t", children: /* @__PURE__ */ r(
+        h,
+        {
+          variant: "ghost",
+          color: "dark",
+          className: "flex w-full",
+          onClick: /* @__PURE__ */ c(() => {
+            e == null || e(null);
+          }, "onClick"),
+          children: "Effacer"
+        }
+      ) })
+    ] })
+  ] });
+}
+c(D, "DatePicker");
+export {
+  D as DatePicker
+};

package/dist/components/separator.js

@@ -0,0 +1,29 @@
+var n = Object.defineProperty;
+var r = (t, o) => n(t, "name", { value: o, configurable: !0 });
+import { jsx as e } from "react/jsx-runtime";
+import { Root as l } from "../node_modules/@radix-ui/react-separator/dist/index.js";
+import { cn as p } from "../lib/utils.js";
+function s({
+  className: t,
+  orientation: o = "horizontal",
+  decorative: a = !0,
+  ...i
+}) {
+  return /* @__PURE__ */ e(
+    l,
+    {
+      "data-slot": "separator",
+      decorative: a,
+      orientation: o,
+      className: p(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        t
+      ),
+      ...i
+    }
+  );
+}
+r(s, "Separator");
+export {
+  s as Separator
+};

package/dist/components/sheet.js

@@ -2,7 +2,7 @@ var l = Object.defineProperty;
 var a = (t, e) => l(t, "name", { value: e, configurable: !0 });
 import { jsx as c, jsxs as s } from "react/jsx-runtime";
 import { Root as d, Trigger as u, Close as r, Content as h, Title as m, Description as p, Portal as g, Overlay as x } from "../node_modules/@radix-ui/react-dialog/dist/index.js";
-import { XIcon as b } from "lucide-react";
+import { XIcon as y } from "lucide-react";
 import { cn as f } from "../lib/utils.js";
 function j({ ...t }) {
   return /* @__PURE__ */ c(d, { "data-slot": "sheet", ...t });
@@ -20,12 +20,12 @@ function D({
   return /* @__PURE__ */ c(r, { "data-slot": "sheet-close", ...t });
 }
 a(D, "SheetClose");
-function y({
+function b({
   ...t
 }) {
   return /* @__PURE__ */ c(g, { "data-slot": "sheet-portal", ...t });
 }
-a(y, "SheetPortal");
+a(b, "SheetPortal");
 function S({
   className: t,
   ...e
@@ -50,7 +50,7 @@ function O({
   size: o = "s",
   ...i
 }) {
-  return /* @__PURE__ */ s(y, { children: [
+  return /* @__PURE__ */ s(b, { children: [
     /* @__PURE__ */ c(S, {}),
     /* @__PURE__ */ s(
       h,
@@ -69,7 +69,7 @@ function O({
         children: [
           e,
           /* @__PURE__ */ s(r, { className: "fc:ring-offset-background fc:focus:ring-ring fc:data-[state=open]:bg-secondary fc:absolute fc:top-4 fc:right-4 fc:rounded-xs fc:opacity-70 fc:transition-opacity fc:hover:opacity-100 fc:focus:ring-2 fc:focus:ring-offset-2 fc:focus:outline-hidden fc:disabled:pointer-events-none", children: [
-            /* @__PURE__ */ c(b, { className: "fc:size-4" }),
+            /* @__PURE__ */ c(y, { className: "fc:size-4" }),
             /* @__PURE__ */ c("span", { className: "fc:sr-only", children: "Close" })
           ] })
         ]
@@ -106,6 +106,17 @@ function z({ className: t, ...e }) {
   );
 }
 a(z, "SheetFooter");
+function B({ className: t, ...e }) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      className: f("fc:p-4 fc:flex-1 fc:overflow-y-auto", t),
+      ...e
+    }
+  );
+}
+a(B, "SheetBody");
 function F({
   className: t,
   ...e
@@ -136,6 +147,7 @@ function H({
 a(H, "SheetDescription");
 export {
   j as Sheet,
+  B as SheetBody,
   D as SheetClose,
   O as SheetContent,
   H as SheetDescription,