@la-batcave/ui 3.1.2

package/dist/HoverCard.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import { P as T, c as l, a as k, u as F } from "./_shared/index-CXeb1OMI.js";
+import { u as I } from "./_shared/index-DLcqcWxM.js";
+import { C as U, c as x, R as $, A as W, a as z } from "./_shared/index-uu9PT5Nu.js";
+import { P as B, D as G } from "./_shared/index-B03TCNO5.js";
+import { P as K } from "./_shared/index-V-Ajw7Ac.js";
+import { c as j } from "./_shared/utils-eGXXUFl7.js";
+var E, S = "HoverCard", [O] = k(S, [
+  x
+]), b = x(), [V, g] = O(S), y = (e) => {
+  const {
+    __scopeHoverCard: o,
+    children: t,
+    open: s,
+    defaultOpen: a,
+    onOpenChange: c,
+    openDelay: f = 700,
+    closeDelay: v = 300
+  } = e, d = b(o), C = n.useRef(0), u = n.useRef(0), h = n.useRef(!1), p = n.useRef(!1), [m, r] = F({
+    prop: s,
+    defaultProp: a ?? !1,
+    onChange: c,
+    caller: S
+  }), P = n.useCallback(() => {
+    clearTimeout(u.current), C.current = window.setTimeout(() => r(!0), f);
+  }, [f, r]), L = n.useCallback(() => {
+    clearTimeout(C.current), !h.current && !p.current && (u.current = window.setTimeout(() => r(!1), v));
+  }, [v, r]), M = n.useCallback(() => r(!1), [r]);
+  return n.useEffect(() => () => {
+    clearTimeout(C.current), clearTimeout(u.current);
+  }, []), /* @__PURE__ */ i(
+    V,
+    {
+      scope: o,
+      open: m,
+      onOpenChange: r,
+      onOpen: P,
+      onClose: L,
+      onDismiss: M,
+      hasSelectionRef: h,
+      isPointerDownOnContentRef: p,
+      children: /* @__PURE__ */ i($, { ...d, children: t })
+    }
+  );
+};
+y.displayName = S;
+var N = "HoverCardTrigger", _ = n.forwardRef(
+  (e, o) => {
+    const { __scopeHoverCard: t, ...s } = e, a = g(N, t), c = b(t);
+    return /* @__PURE__ */ i(W, { asChild: !0, ...c, children: /* @__PURE__ */ i(
+      K.a,
+      {
+        "data-state": a.open ? "open" : "closed",
+        ...s,
+        ref: o,
+        onPointerEnter: l(e.onPointerEnter, w(a.onOpen)),
+        onPointerLeave: l(e.onPointerLeave, w(a.onClose)),
+        onFocus: l(e.onFocus, a.onOpen),
+        onBlur: l(e.onBlur, a.onClose),
+        onTouchStart: l(e.onTouchStart, (f) => f.preventDefault())
+      }
+    ) });
+  }
+);
+_.displayName = N;
+var H = "HoverCardPortal", [q, J] = O(H, {
+  forceMount: void 0
+}), D = (e) => {
+  const { __scopeHoverCard: o, forceMount: t, children: s, container: a } = e, c = g(H, o);
+  return /* @__PURE__ */ i(q, { scope: o, forceMount: t, children: /* @__PURE__ */ i(T, { present: t || c.open, children: /* @__PURE__ */ i(B, { asChild: !0, container: a, children: s }) }) });
+};
+D.displayName = H;
+var R = "HoverCardContent", A = n.forwardRef(
+  (e, o) => {
+    const t = J(R, e.__scopeHoverCard), { forceMount: s = t.forceMount, ...a } = e, c = g(R, e.__scopeHoverCard);
+    return /* @__PURE__ */ i(T, { present: s || c.open, children: /* @__PURE__ */ i(
+      Q,
+      {
+        "data-state": c.open ? "open" : "closed",
+        ...a,
+        onPointerEnter: l(e.onPointerEnter, w(c.onOpen)),
+        onPointerLeave: l(e.onPointerLeave, w(c.onClose)),
+        ref: o
+      }
+    ) });
+  }
+);
+A.displayName = R;
+var Q = n.forwardRef((e, o) => {
+  const {
+    __scopeHoverCard: t,
+    onEscapeKeyDown: s,
+    onPointerDownOutside: a,
+    onFocusOutside: c,
+    onInteractOutside: f,
+    ...v
+  } = e, d = g(R, t), C = b(t), u = n.useRef(null), h = I(o, u), [p, m] = n.useState(!1);
+  return n.useEffect(() => {
+    if (p) {
+      const r = document.body;
+      return E = r.style.userSelect || r.style.webkitUserSelect, r.style.userSelect = "none", r.style.webkitUserSelect = "none", () => {
+        r.style.userSelect = E, r.style.webkitUserSelect = E;
+      };
+    }
+  }, [p]), n.useEffect(() => {
+    if (u.current) {
+      const r = () => {
+        m(!1), d.isPointerDownOnContentRef.current = !1, setTimeout(() => {
+          document.getSelection()?.toString() !== "" && (d.hasSelectionRef.current = !0);
+        });
+      };
+      return document.addEventListener("pointerup", r), () => {
+        document.removeEventListener("pointerup", r), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !1;
+      };
+    }
+  }, [d.isPointerDownOnContentRef, d.hasSelectionRef]), n.useEffect(() => {
+    u.current && Z(u.current).forEach((P) => P.setAttribute("tabindex", "-1"));
+  }), /* @__PURE__ */ i(
+    G,
+    {
+      asChild: !0,
+      disableOutsidePointerEvents: !1,
+      onInteractOutside: f,
+      onEscapeKeyDown: s,
+      onPointerDownOutside: a,
+      onFocusOutside: l(c, (r) => {
+        r.preventDefault();
+      }),
+      onDismiss: d.onDismiss,
+      children: /* @__PURE__ */ i(
+        U,
+        {
+          ...C,
+          ...v,
+          onPointerDown: l(v.onPointerDown, (r) => {
+            r.currentTarget.contains(r.target) && m(!0), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !0;
+          }),
+          ref: h,
+          style: {
+            ...v.style,
+            userSelect: p ? "text" : void 0,
+            // Safari requires prefix
+            WebkitUserSelect: p ? "text" : void 0,
+            "--radix-hover-card-content-transform-origin": "var(--radix-popper-transform-origin)",
+            "--radix-hover-card-content-available-width": "var(--radix-popper-available-width)",
+            "--radix-hover-card-content-available-height": "var(--radix-popper-available-height)",
+            "--radix-hover-card-trigger-width": "var(--radix-popper-anchor-width)",
+            "--radix-hover-card-trigger-height": "var(--radix-popper-anchor-height)"
+          }
+        }
+      )
+    }
+  );
+}), X = "HoverCardArrow", Y = n.forwardRef(
+  (e, o) => {
+    const { __scopeHoverCard: t, ...s } = e, a = b(t);
+    return /* @__PURE__ */ i(z, { ...a, ...s, ref: o });
+  }
+);
+Y.displayName = X;
+function w(e) {
+  return (o) => o.pointerType === "touch" ? void 0 : e();
+}
+function Z(e) {
+  const o = [], t = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (s) => s.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  for (; t.nextNode(); ) o.push(t.currentNode);
+  return o;
+}
+var ee = y, re = _, oe = D, te = A;
+const pe = ee, fe = re, ne = n.forwardRef(({ className: e, align: o = "center", sideOffset: t = 4, container: s, ...a }, c) => /* @__PURE__ */ i(oe, { container: s, children: /* @__PURE__ */ i(
+  te,
+  {
+    ref: c,
+    align: o,
+    sideOffset: t,
+    className: j(
+      "z-50 bg-card border border-border rounded-lg shadow-lg p-4 w-64",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "outline-none",
+      e
+    ),
+    ...a
+  }
+) }));
+ne.displayName = "HoverCardContent";
+export {
+  pe as HoverCard,
+  ne as HoverCardContent,
+  fe as HoverCardTrigger
+};

package/dist/Input.d.ts

@@ -0,0 +1,230 @@
+import * as React from "react";
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+}
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'suffix'> {
+    /** Optional label text displayed above the input. */
+    label?: string;
+    /** Error message displayed below the input. When set, the input border turns red. */
+    error?: React.ReactNode;
+    /** Icon component rendered inside the input. @default positioned left */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Side of the input where the icon is rendered. @default "left" */
+    iconPosition?: 'left' | 'right';
+    /** ReactNode rendered inside the input on the left (e.g. currency symbol). */
+    prefix?: React.ReactNode;
+    /** ReactNode rendered inside the input on the right (e.g. unit label). */
+    suffix?: React.ReactNode;
+}
+export interface SelectProps {
+    /** Optional label text displayed above the select. */
+    label?: string;
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string;
+    /** Controlled value. */
+    value?: string;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Callback fired when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Whether the select is disabled. */
+    disabled?: boolean;
+    /**
+     * Render a native `<select>` element instead of Radix UI.
+     * When true, children should be `<option>` and `<optgroup>` elements.
+     * @default false
+     */
+    native?: boolean;
+    /**
+     * Show a clear button (X) when a value is selected.
+     * Calls onValueChange("") to reset.
+     * @default false
+     */
+    clearable?: boolean;
+    /** Additional CSS classes for the trigger. */
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface SelectItemProps {
+    /** The value submitted when this item is selected. */
+    value: string;
+    /** Whether this item is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface SelectGroupProps {
+    /** Optional group label displayed above the items. */
+    label?: string;
+    children?: React.ReactNode;
+}
+export interface ToggleProps {
+    /** Optional label text displayed next to the switch. */
+    label?: string;
+    /** Optional description text displayed below the label. */
+    description?: string;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Callback fired when the toggle state changes. */
+    onChange?: (checked: boolean) => void;
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Side where the label is rendered. @default "right" */
+    labelPosition?: 'left' | 'right';
+    /** Additional CSS classes. */
+    className?: string;
+}
+export interface CheckboxProps {
+    /** Optional label text displayed next to the checkbox. */
+    label?: string;
+    /** Optional description text displayed below the label. */
+    description?: string;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Callback fired when the checkbox state changes. */
+    onChange?: (checked: boolean) => void;
+    /** Whether the checkbox is disabled. */
+    disabled?: boolean;
+    /** Side where the label is rendered. @default "right" */
+    labelPosition?: 'left' | 'right';
+    /** Additional CSS classes. */
+    className?: string;
+}
+export interface RadioGroupProps {
+    /** Optional label text displayed above the radio group. */
+    label?: string;
+    /** Controlled value of the selected radio item. */
+    value?: string;
+    /** Callback fired when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Whether the entire group is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface RadioGroupItemProps {
+    /** The value submitted when this item is selected. */
+    value: string;
+    /** Label text displayed next to the radio. */
+    label?: string;
+    /** Optional description text displayed below the label. */
+    description?: string;
+    /** Whether this item is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export interface SliderProps {
+    /** Optional label text displayed above the slider. */
+    label?: string;
+    /** Controlled value. Array for single or range slider. */
+    value?: number[];
+    /** Callback fired when the value changes. */
+    onValueChange?: (value: number[]) => void;
+    /** Minimum value. @default 0 */
+    min?: number;
+    /** Maximum value. @default 100 */
+    max?: number;
+    /** Step increment. @default 1 */
+    step?: number;
+    /** Whether the slider is disabled. */
+    disabled?: boolean;
+    /** Format function for displayed values. Receives the number, returns a string. @default String */
+    renderValue?: (value: number) => string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+    /** Optional label text displayed above the textarea. */
+    label?: string;
+    /** Error message displayed below the textarea. When set, the border turns red. */
+    error?: React.ReactNode;
+    /** Icon component rendered inside the textarea container. @default positioned left */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Side of the textarea where the icon is rendered. @default "left" */
+    iconPosition?: 'left' | 'right';
+    /** ReactNode rendered inside the container on the left (e.g. label prefix). */
+    prefix?: React.ReactNode;
+    /** ReactNode rendered inside the container on the right. */
+    suffix?: React.ReactNode;
+}
+/**
+ * Styled form label with uppercase tracking and muted foreground color.
+ * Built on Radix UI Label primitive.
+ *
+ * @example
+ * <Label htmlFor="email">Email address</Label>
+ */
+declare function Label({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Text input field with optional label, icon, prefix/suffix, and error message.
+ * When `type="password"`, an eye toggle is automatically added on the right.
+ *
+ * @example
+ * <Input label="Email" placeholder="you@example.com" icon={Mail} />
+ */
+declare function Input({ label, error, icon: Icon, iconPosition, prefix, suffix, className, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Select dropdown built on Radix UI Select. Styled to match the Input component.
+ * Use `SelectItem` for options and `SelectGroup` for grouped options.
+ *
+ * @example
+ * <Select label="Instance Type" placeholder="Selectionner...">
+ *   <SelectItem value="docker">Docker</SelectItem>
+ *   <SelectItem value="totanus">Totanus</SelectItem>
+ * </Select>
+ */
+declare function Select({ label, placeholder, children, className, native, clearable, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+/** Individual option inside a Select dropdown. */
+declare function SelectItem({ children, className, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+/** Group of SelectItem options with an optional label. */
+declare function SelectGroup({ children, label, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Toggle switch built on Radix UI Switch primitive with optional label and description.
+ *
+ * @example
+ * <Toggle label="Dark mode" checked={isDark} onChange={setIsDark} />
+ */
+declare function Toggle({ label, description, checked, onChange, disabled, labelPosition, className }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Checkbox built on Radix UI Checkbox primitive with optional label and description.
+ *
+ * @example
+ * <Checkbox label="Accept terms" checked={accepted} onChange={setAccepted} />
+ */
+declare function Checkbox({ label, description, checked, onChange, disabled, labelPosition, className }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Radio group built on Radix UI RadioGroup primitive.
+ * Use with RadioGroupItem children.
+ *
+ * @example
+ * <RadioGroup label="Plan" value={plan} onValueChange={setPlan}>
+ *   <RadioGroupItem value="free" label="Free" />
+ *   <RadioGroupItem value="pro" label="Pro" description="All features included" />
+ * </RadioGroup>
+ */
+declare function RadioGroup({ label, value, onValueChange, disabled, className, children }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Individual radio option inside a RadioGroup. */
+declare function RadioGroupItem({ value, label, description, disabled, className }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Slider built on Radix UI Slider primitive with optional label and value display.
+ *
+ * @example
+ * <Slider label="Volume" value={[75]} onValueChange={setVolume} />
+ */
+declare function Slider({ label, value, onValueChange, min, max, step, disabled, renderValue, className, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Resizable textarea with optional label, icon, prefix/suffix, and error message.
+ *
+ * @example
+ * <Textarea label="Description" placeholder="Enter details..." />
+ */
+declare function Textarea({ label, error, icon: Icon, iconPosition, prefix, suffix, className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export { Label, Input, Select, SelectItem, SelectGroup, Toggle, Checkbox, RadioGroup, RadioGroupItem, Slider, Textarea };