@still-forest/canopy 0.28.2 → 0.29.0

package/dist/chunks/TextInput-NfG9yrGJ.js

@@ -0,0 +1,330 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { Flex as m, Grid as L } from "@/layout";
+import { cn as h } from "@/utils";
+import { Button as w } from "@/components/ui/button";
+import { Trash2 as k, Send as v, Save as F, Loader as G, Calendar as D, Check as E, ChevronsUpDown as j } from "lucide-react";
+import { Button as C, Label as f, TextInput as P, InputError as b, InputGroup as z } from "@/forms";
+import { useState as I, useEffect as O, useMemo as R } from "react";
+import { Checkbox as V } from "@/components/ui/checkbox";
+import { Calendar as M } from "@/components/ui/calendar";
+import { Popover as y, PopoverTrigger as T, PopoverContent as $ } from "@/components/ui/popover";
+import { Text as x } from "@/typography";
+import { Label as U } from "@/components/ui/label";
+import { TextInput as _ } from "@/forms/TextInput";
+import { RadioGroup as A, RadioGroupItem as X } from "@/components/ui/radio-group";
+import { Select as Y, SelectTrigger as q, SelectValue as H, SelectContent as J, SelectItem as K } from "@/components/ui/select";
+import { Command as Q, CommandInput as W, CommandList as Z, CommandEmpty as ee, CommandGroup as te, CommandItem as ae } from "@/components/ui/command";
+import { Textarea as re } from "@/components/ui/textarea";
+import { Input as ne } from "@/components/ui/input";
+const le = ({
+  children: t,
+  onClick: a,
+  variant: r = "default",
+  size: n = "default",
+  icon: l,
+  disabled: s = !1,
+  className: o = "",
+  type: c = "button",
+  asChild: d = !1,
+  full: i = !1,
+  fit: p = !1,
+  ...g
+}) => {
+  const S = () => r === "primary" ? "default" : r === "subtle" ? "secondary" : r, B = () => n === "md" ? "default" : n === "xs" ? "sm" : r === "unstyled" ? "unstyled" : n;
+  return /* @__PURE__ */ e(
+    w,
+    {
+      asChild: d,
+      className: h(o, p && "w-fit", i && "w-full", r === "unstyled" && "justify-start"),
+      disabled: s,
+      onClick: a,
+      size: B(),
+      type: c,
+      variant: S(),
+      ...g,
+      children: l && t ? /* @__PURE__ */ u(m, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ e("span", { children: l }, "icon"),
+        /* @__PURE__ */ e("span", { children: t }, "children")
+      ] }) : l || t
+    }
+  );
+}, se = ({ children: t, className: a = "" }) => /* @__PURE__ */ e(m, { className: a, children: t });
+se.Button = ({ children: t, className: a, ...r }) => /* @__PURE__ */ e(le, { className: h("not-first:-ml-1 not-last:rounded-r-none not-first:rounded-l-none", a), ...r, children: t });
+const Te = ({ disabled: t = !1, handleDelete: a, ...r }) => /* @__PURE__ */ e(
+  C,
+  {
+    disabled: t,
+    icon: /* @__PURE__ */ e(k, {}),
+    onClick: a,
+    variant: "outline",
+    ...r,
+    className: "border-destructive text-destructive hover:bg-destructive hover:text-white",
+    children: "Delete"
+  }
+), N = {
+  default: { label: "Submit", submittingLabel: "Submitting", IconComponent: v },
+  submit: { label: "Submit", submittingLabel: "Submitting", IconComponent: v },
+  save: { label: "Save", submittingLabel: "Saving", IconComponent: F },
+  send: { label: "Send", submittingLabel: "Sending", IconComponent: v }
+}, $e = ({
+  submitting: t = !1,
+  disabled: a = !1,
+  submittingIcon: r,
+  action: n = "default",
+  noIcon: l = !1,
+  ...s
+}) => {
+  const o = r || G;
+  if (!N[n])
+    throw new Error(`Invalid action: ${n}`);
+  const { label: c, submittingLabel: d, IconComponent: i } = N[n];
+  return /* @__PURE__ */ e(
+    C,
+    {
+      disabled: a || t,
+      icon: l ? void 0 : t ? /* @__PURE__ */ e(o, { className: "animate-spin" }) : /* @__PURE__ */ e(i, {}),
+      type: "submit",
+      variant: "primary",
+      ...s,
+      children: t ? d : c
+    }
+  );
+}, Be = ({ label: t, name: a, value: r, checked: n, onCheckedChange: l }) => {
+  const [s, o] = I(n);
+  O(() => {
+    o(n);
+  }, [n]);
+  let c = a;
+  const d = r || a;
+  return r && (c += `[${r}]`), /* @__PURE__ */ u(m, { align: "center", gap: "2", children: [
+    /* @__PURE__ */ e(
+      V,
+      {
+        checked: s,
+        id: c,
+        name: a,
+        onCheckedChange: (p) => {
+          o(p), l?.(p);
+        },
+        value: d
+      }
+    ),
+    /* @__PURE__ */ e(f, { className: "cursor-pointer", htmlFor: c, children: t })
+  ] });
+}, Le = ({ name: t, label: a, placeholder: r, note: n, className: l, ...s }) => /* @__PURE__ */ e(
+  P,
+  {
+    className: h("max-w-[150px]", l),
+    label: a,
+    name: t,
+    note: n,
+    placeholder: r,
+    type: "date",
+    ...s
+  }
+), ke = ({ onDateSelection: t, initialValue: a, className: r, size: n = "default", error: l }) => {
+  const [s, o] = I(a), c = (d) => {
+    o(d), d && t(d);
+  };
+  return /* @__PURE__ */ u(m, { direction: "col", gap: "2", children: [
+    /* @__PURE__ */ u(y, { children: [
+      /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ u(
+        C,
+        {
+          className: h("w-[280px] justify-start text-left font-normal", !s && "text-muted-foreground", r),
+          size: n,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ e(D, { className: "mr-2 h-4 w-4" }),
+            s ? s.toISOString().split("T")[0] : /* @__PURE__ */ e("span", { children: "Select a date" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e($, { className: "w-auto p-0", children: /* @__PURE__ */ e(M, { autoFocus: !0, mode: "single", onSelect: c, selected: s }) })
+    ] }),
+    l && /* @__PURE__ */ e(b, { message: l })
+  ] });
+}, Fe = ({ message: t }) => /* @__PURE__ */ e(x, { size: "xs", variant: "destructive", children: t }), Ge = ({ label: t, labelFor: a, className: r = "", labelClassName: n = "", children: l }) => /* @__PURE__ */ u(m, { direction: "col", gap: "2", children: [
+  t && /* @__PURE__ */ e(f, { className: n, htmlFor: a, children: t }),
+  /* @__PURE__ */ e(m, { className: `rounded-md border border-input bg-card p-2 shadow-xs ${r}`, gapY: "1", children: l })
+] }), De = ({ htmlFor: t, value: a, children: r, className: n = "", ...l }) => /* @__PURE__ */ e(
+  U,
+  {
+    className: h("font-display font-normal text-base text-foreground", n),
+    htmlFor: t,
+    ...l,
+    children: a || r
+  }
+), Ee = ({
+  name: t,
+  label: a,
+  placeholder: r,
+  note: n,
+  // Default to two decimal places for currency and general decimal values
+  step: l = ".01",
+  className: s,
+  ...o
+}) => /* @__PURE__ */ e(
+  _,
+  {
+    className: s,
+    label: a,
+    name: t,
+    note: n,
+    placeholder: r,
+    step: l,
+    type: "number",
+    ...o
+  }
+), je = ({ label: t, name: a, options: r, value: n, onChange: l, error: s }) => /* @__PURE__ */ u(z, { className: "flex flex-col gap-4 px-2 py-1", label: t, labelFor: a, children: [
+  /* @__PURE__ */ e(A, { className: "w-full", name: a, onValueChange: l, value: n, children: /* @__PURE__ */ e(L, { cols: "2", children: r.map((o, c) => /* @__PURE__ */ u(m, { align: "center", gap: "2", justify: "start", children: [
+    /* @__PURE__ */ e(X, { id: o.value, value: o.value }),
+    /* @__PURE__ */ e(f, { htmlFor: o.value, children: o.label })
+  ] }, c)) }) }),
+  s && /* @__PURE__ */ e(b, { message: s })
+] }), Pe = ({
+  name: t,
+  defaultValue: a,
+  options: r,
+  label: n,
+  placeholder: l,
+  note: s,
+  className: o,
+  value: c,
+  onValueChange: d,
+  error: i,
+  ...p
+}) => /* @__PURE__ */ u(m, { className: "w-full", direction: "col", gap: "2", children: [
+  n && /* @__PURE__ */ e(f, { htmlFor: t, children: n }),
+  /* @__PURE__ */ u(
+    Y,
+    {
+      defaultValue: a,
+      name: t,
+      onValueChange: d,
+      value: c,
+      ...p,
+      children: [
+        /* @__PURE__ */ e(q, { className: h("min-w-[180px]", o), "data-testid": `select-input-${t}`, children: /* @__PURE__ */ e(H, { placeholder: l }) }),
+        /* @__PURE__ */ e(J, { children: r.map(({ value: g, label: S }) => /* @__PURE__ */ e(K, { value: g, children: S }, `option-${g}`)) })
+      ]
+    }
+  ),
+  s && /* @__PURE__ */ e(x, { size: "sm", variant: "muted", children: s }),
+  i && /* @__PURE__ */ e(b, { message: i })
+] }), oe = ({
+  placeholder: t,
+  selected: a,
+  className: r,
+  open: n,
+  renderSelected: l = (s) => s.label
+}) => /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ u(w, { "aria-expanded": n, className: `justify-between ${r}`, role: "combobox", variant: "outline", children: [
+  l(a || { label: t, value: "" }),
+  /* @__PURE__ */ e(j, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+] }) }), ze = ({
+  options: t,
+  value: a = "",
+  placeholder: r = "Select a value...",
+  className: n = "",
+  onSelect: l = () => {
+  },
+  renderSelected: s = (o) => o.label
+}) => {
+  const [o, c] = I(!1), d = R(() => t.find((i) => i.value === a), [t, a]);
+  return /* @__PURE__ */ u(y, { onOpenChange: c, open: o, children: [
+    /* @__PURE__ */ e(
+      oe,
+      {
+        className: `w-full ${n}`,
+        open: o,
+        placeholder: r,
+        renderSelected: s,
+        selected: d
+      }
+    ),
+    /* @__PURE__ */ e($, { className: "w-full p-0", children: /* @__PURE__ */ u(Q, { value: a, children: [
+      /* @__PURE__ */ e(W, { "aria-label": "Search options", className: "h-9", placeholder: "Search" }),
+      /* @__PURE__ */ u(Z, { children: [
+        /* @__PURE__ */ e(ee, { children: "No results found" }),
+        /* @__PURE__ */ e(te, { children: t.map((i) => /* @__PURE__ */ u(
+          ae,
+          {
+            onSelect: () => {
+              c(!1), l(i.value);
+            },
+            value: i.value,
+            children: [
+              i.icon ? /* @__PURE__ */ e("span", { className: "mr-2", children: i.icon }) : "",
+              i.label,
+              /* @__PURE__ */ e(E, { className: h("ml-auto", i.value === a ? "opacity-100" : "opacity-0") })
+            ]
+          },
+          i.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+};
+function Oe({ label: t, name: a, note: r, placeholder: n, className: l, error: s, ...o }) {
+  return /* @__PURE__ */ u(m, { className: "w-full", direction: "col", gap: "2", children: [
+    t && /* @__PURE__ */ e(f, { htmlFor: a, children: t }),
+    /* @__PURE__ */ e(
+      re,
+      {
+        "aria-label": t || a,
+        className: l,
+        id: a,
+        name: a,
+        placeholder: n,
+        ...o
+      }
+    ),
+    r && /* @__PURE__ */ e(x, { size: "sm", variant: "muted", children: r }),
+    s && /* @__PURE__ */ e(b, { message: s })
+  ] });
+}
+const Re = ({
+  name: t,
+  type: a = "text",
+  placeholder: r,
+  label: n,
+  labelOrientation: l = "top",
+  note: s,
+  className: o,
+  error: c,
+  ...d
+}) => /* @__PURE__ */ u(m, { className: "w-full", direction: l === "left" ? "row" : "col", gap: "2", children: [
+  n && /* @__PURE__ */ e(f, { className: l === "left" ? "text-nowrap" : "", htmlFor: t, children: n }),
+  /* @__PURE__ */ e(
+    ne,
+    {
+      "aria-label": n || t,
+      className: o,
+      id: t,
+      name: t,
+      placeholder: r,
+      type: a,
+      ...d
+    }
+  ),
+  s && /* @__PURE__ */ e(x, { size: "sm", variant: "muted", children: s }),
+  c && /* @__PURE__ */ e(b, { message: c })
+] });
+export {
+  le as B,
+  Be as C,
+  Te as D,
+  Fe as I,
+  De as L,
+  Ee as N,
+  je as R,
+  $e as S,
+  Oe as T,
+  se as a,
+  Le as b,
+  ke as c,
+  Ge as d,
+  Pe as e,
+  ze as f,
+  Re as g
+};

package/dist/chunks/cn-B6yFEsav.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function m(...r) {
+  return t(o(r));
+}
+export {
+  m as c
+};

package/dist/forms.js

@@ -1,21 +1,19 @@
-import { B as e, a as s } from "./calendar.js";
-import { C as r, a as u, b as p, D as n, I as c, c as I, L as x, N as S, R as b, d as l, S as m, T as B } from "./SelectInput.js";
-import { S as D, T } from "./Textarea.js";
+import { B as e, a as s, C as u, b as o, c as r, D as n, I as p, d as c, L as I, N as b, R as l, e as B, f as S, S as i, g as x, T as D } from "./chunks/TextInput-NfG9yrGJ.js";
 export {
   e as Button,
   s as ButtonGroup,
-  r as Checkbox,
-  u as DateInput,
-  p as DatePicker,
+  u as Checkbox,
+  o as DateInput,
+  r as DatePicker,
   n as DeleteButton,
-  c as InputError,
-  I as InputGroup,
-  x as Label,
-  S as NumberInput,
-  b as RadioSelect,
-  l as SelectInput,
-  D as SelectPicker,
-  m as SubmitButton,
-  B as TextInput,
-  T as Textarea
+  p as InputError,
+  c as InputGroup,
+  I as Label,
+  b as NumberInput,
+  l as RadioSelect,
+  B as SelectInput,
+  S as SelectPicker,
+  i as SubmitButton,
+  x as TextInput,
+  D as Textarea
 };

package/dist/index.d.ts

@@ -1,21 +1,41 @@
-import { Accordion as Accordion_2 } from 'radix-ui';
+import { Accordion as Accordion_3 } from 'radix-ui';
 import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { ComponentProps } from 'react';
 import { default as default_2 } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { Popover as Popover_3 } from 'radix-ui';
 import * as React_2 from 'react';
+import { ReactNode } from 'react';
 import { Tabs as Tabs_2 } from 'radix-ui';
 import { VariantProps } from 'class-variance-authority';
 
-export declare function Accordion({ ...props }: React_2.ComponentProps<typeof Accordion_2.Root>): JSX.Element;
+export declare const Accordion: AccordionComponent;
 
-export declare function AccordionContent({ className, children, ...props }: React_2.ComponentProps<typeof Accordion_2.Content>): JSX.Element;
+declare function Accordion_2({ ...props }: React_2.ComponentProps<typeof Accordion_3.Root>): JSX.Element;
 
-export declare function AccordionItem({ className, ...props }: React_2.ComponentProps<typeof Accordion_2.Item>): JSX.Element;
+declare type AccordionComponent = React.FC<AccordionProps> & {
+    Item: React.FC<AccordionItemProps>;
+    Trigger: React.FC<AccordionTriggerProps>;
+    Content: React.FC<AccordionContentProps>;
+};
+
+declare function AccordionContent({ className, children, ...props }: React_2.ComponentProps<typeof Accordion_3.Content>): JSX.Element;
+
+declare type AccordionContentProps = React.ComponentProps<typeof AccordionContent>;
 
-export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof Accordion_2.Trigger>): JSX.Element;
+declare function AccordionItem({ className, ...props }: React_2.ComponentProps<typeof Accordion_3.Item>): JSX.Element;
+
+declare type AccordionItemProps = React.ComponentProps<typeof AccordionItem>;
+
+export declare type AccordionProps = React.ComponentProps<typeof Accordion_2> & {
+    children: ReactNode;
+};
+
+declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof Accordion_3.Trigger>): JSX.Element;
+
+declare type AccordionTriggerProps = React.ComponentProps<typeof AccordionTrigger>;
 
 export declare const Alert: ({ type, title, message, className }: AlertProps) => JSX.Element;
 
@@ -28,7 +48,7 @@ export declare interface AlertProps {
 
 export declare const Badge: ({ label, onClick, className, variant, color }: BadgeProps) => JSX.Element;
 
-declare interface BadgeProps {
+export declare interface BadgeProps {
     variant?: "default" | "secondary" | "destructive" | "outline";
     color?: TailwindColor;
     label: string;
@@ -141,6 +161,25 @@ export declare function cn(...inputs: ClassValue[]): string;
 
 export declare const Code: ({ children, ...props }: TextProps) => JSX.Element;
 
+export declare const Collapsible: CollapsibleComponent;
+
+declare function Collapsible_2({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): JSX.Element;
+
+declare type CollapsibleComponent = React.FC<CollapsibleProps> & {
+    Trigger: React.FC<CollapsibleTriggerProps>;
+    Content: React.FC<CollapsibleContentProps>;
+};
+
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): JSX.Element;
+
+declare type CollapsibleContentProps = React.ComponentProps<typeof CollapsibleContent>;
+
+export declare type CollapsibleProps = React.ComponentProps<typeof Collapsible_2>;
+
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): JSX.Element;
+
+declare type CollapsibleTriggerProps = React.ComponentProps<typeof CollapsibleTrigger>;
+
 export declare const Container: ({ children, className, direction, ...props }: ContainerProps) => JSX.Element;
 
 export declare interface ContainerProps extends FlexProps {