@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.12

package/src/components/select/select.tsx

@@ -0,0 +1,430 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { useRender } from "@base-ui/react/use-render";
+import {
+  ChevronDownIcon,
+  ChevronsUpDownIcon,
+  ChevronUpIcon,
+} from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib";
+import { inputBaseClasses } from "../input";
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+export const selectTriggerClasses = cn(
+  inputBaseClasses,
+  "relative inline-flex items-center justify-between gap-2 select-none text-left text-foreground",
+  "focus-visible:border-ring",
+  "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+  "has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20",
+  "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+);
+
+export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
+
+export function SelectRoot<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+>({
+  onChange,
+  ...props
+}: Omit<SelectPrimitive.Root.Props<Value, Multiple>, "onValueChange"> & {
+  onChange?: SelectPrimitive.Root.Props<Value, Multiple>["onValueChange"];
+}): React.ReactElement {
+  return <SelectPrimitive.Root onValueChange={onChange} {...props} />;
+}
+
+export function SelectTrigger({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(selectTriggerClasses, className)}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        data-slot="select-icon"
+        className="text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export type SelectButtonProps = useRender.ComponentProps<"button"> & {
+  ref?: React.Ref<HTMLButtonElement>;
+};
+
+export function SelectButton({
+  className,
+  render,
+  children,
+  ...props
+}: SelectButtonProps): React.ReactElement {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    children: (
+      <>
+        <span className="flex-1 truncate in-data-placeholder:text-muted-foreground/72">
+          {children}
+        </span>
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </>
+    ),
+    className: cn(selectTriggerClasses, "min-w-0", className),
+    "data-slot": "select-button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export function SelectValue({
+  className,
+  ...props
+}: SelectPrimitive.Value.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Value
+      className={cn(
+        "flex-1 truncate data-placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="select-value"
+      {...props}
+    />
+  );
+}
+
+export function SelectPopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  anchor,
+  portalProps,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  portalProps?: SelectPrimitive.Portal.Props;
+  side?: SelectPrimitive.Positioner.Props["side"];
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
+  align?: SelectPrimitive.Positioner.Props["align"];
+  alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"];
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
+  anchor?: SelectPrimitive.Positioner.Props["anchor"];
+}): React.ReactElement {
+  return (
+    <SelectPrimitive.Portal {...portalProps}>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 select-none"
+        data-slot="select-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.Popup
+          className="origin-(--transform-origin) text-foreground outline-none"
+          data-slot="select-popup"
+          {...props}
+        >
+          <SelectPrimitive.ScrollUpArrow
+            className="top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover"
+            data-slot="select-scroll-up-arrow"
+          >
+            <ChevronUpIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollUpArrow>
+          <div className="relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]">
+            <SelectPrimitive.List
+              className={cn(
+                "max-h-(--available-height) overflow-y-auto p-1",
+                className,
+              )}
+              data-slot="select-list"
+            >
+              {children}
+            </SelectPrimitive.List>
+          </div>
+          <SelectPrimitive.ScrollDownArrow
+            className="bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
+            data-slot="select-scroll-down-arrow"
+          >
+            <ChevronDownIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollDownArrow>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1fr_1rem] items-center gap-2 rounded-sm py-1 px-2 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="col-start-1 min-w-0">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator className="col-start-2">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+export function SelectGroup(
+  props: SelectPrimitive.Group.Props,
+): React.ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+export function SelectGroupLabel(
+  props: SelectPrimitive.GroupLabel.Props,
+): React.ReactElement {
+  return (
+    <SelectPrimitive.GroupLabel
+      className="px-2 py-1.5 font-medium text-muted-foreground text-xs"
+      data-slot="select-group-label"
+      {...props}
+    />
+  );
+}
+
+export function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.Label.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        "not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="select-label"
+      {...props}
+    />
+  );
+}
+
+// ─── Composite ────────────────────────────────────────────────────────────────
+
+function defaultGetLabel(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object" && "label" in item)
+    return String((item as Record<string, unknown>).label);
+  return String(item);
+}
+
+function defaultGetValue(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object" && "value" in item)
+    return String((item as Record<string, unknown>).value);
+  return String(item);
+}
+
+type SelectRootPropsAlias<V = string> = Omit<
+  SelectPrimitive.Root.Props<V, false>,
+  "onValueChange"
+> & {
+  onChange?: SelectPrimitive.Root.Props<V, false>["onValueChange"];
+};
+
+type SelectBaseProps<TItem = unknown> = Omit<
+  SelectRootPropsAlias<string>,
+  "children" | "onChange" | "value" | "defaultValue" | "items" | "multiple"
+> & {
+  items: readonly TItem[];
+  getLabel?: (item: TItem) => string;
+  getValue?: (item: TItem) => string;
+  renderItem?: (item: TItem) => React.ReactNode;
+  placeholder?: string;
+  triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+  popupProps?: React.ComponentProps<typeof SelectPopup>;
+  popupClassName?: string;
+  itemProps?: SelectPrimitive.Item.Props;
+  itemClassName?: string;
+  className?: string;
+};
+
+export type SelectProps<TItem = unknown> =
+  | (SelectBaseProps<TItem> & {
+      multiple?: false;
+      value?: TItem | null;
+      defaultValue?: TItem | null;
+      onChange?: (value: TItem | null) => void;
+    })
+  | (SelectBaseProps<TItem> & {
+      multiple: true;
+      value?: TItem[];
+      defaultValue?: TItem[];
+      onChange?: (value: TItem[]) => void;
+    });
+
+/**
+ * Composite select for single and multiple selection. Items shaped as
+ * `{ label, value }` or plain strings/numbers work with no extra props.
+ * For other shapes, provide `getLabel` and/or `getValue`.
+ *
+ * `renderItem` customizes the content **inside** each `SelectItem` (the
+ * checkmark indicator is always rendered by the item wrapper).
+ *
+ * Use `SelectRoot` + primitives directly when you need full structural
+ * control beyond what escape-hatch props offer.
+ */
+export function Select<TItem = unknown>(
+  allProps: SelectProps<TItem>,
+): React.ReactElement {
+  const {
+    items,
+    getLabel: getLabelProp,
+    getValue: getValueProp,
+    renderItem,
+    placeholder,
+    onChange,
+    value,
+    defaultValue,
+    multiple,
+    triggerProps,
+    popupProps,
+    itemProps,
+    itemClassName,
+    className,
+    popupClassName,
+    ...rest
+  } = allProps as SelectBaseProps<TItem> & {
+    multiple?: boolean;
+    onChange?: (value: any) => void;
+    value?: any;
+    defaultValue?: any;
+  };
+
+  const getLabel: (item: TItem) => string = getLabelProp ?? defaultGetLabel;
+  const getValue: (item: TItem) => string = getValueProp ?? defaultGetValue;
+
+  const stringValue = multiple
+    ? (value as TItem[] | undefined)?.map(getValue)
+    : value != null
+      ? getValue(value as TItem)
+      : undefined;
+
+  const stringDefaultValue = multiple
+    ? (defaultValue as TItem[] | undefined)?.map(getValue)
+    : defaultValue != null
+      ? getValue(defaultValue as TItem)
+      : undefined;
+
+  const handleChange = (stringVal: string | string[] | null) => {
+    if (multiple) {
+      const vals = (stringVal as string[]) ?? [];
+      const found = vals
+        .map((sv) => items.find((i) => getValue(i) === sv) ?? null)
+        .filter(Boolean) as TItem[];
+      onChange?.(found);
+    } else {
+      if (stringVal == null) {
+        onChange?.(null);
+        return;
+      }
+      const item =
+        items.find((i) => getValue(i) === (stringVal as string)) ?? null;
+      onChange?.(item);
+    }
+  };
+
+  const itemToStringLabel = (stringVal: string) => {
+    const item = items.find((i) => getValue(i) === stringVal);
+    return item ? getLabel(item) : stringVal;
+  };
+
+  return (
+    <SelectRoot
+      itemToStringLabel={itemToStringLabel}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      multiple={multiple as any}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      value={stringValue as any}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      defaultValue={stringDefaultValue as any}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onChange={handleChange as any}
+      {...(rest as any)}
+    >
+      <SelectTrigger className={className} {...triggerProps}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectPopup className={popupClassName} {...popupProps}>
+        {items.map((item) => (
+          <SelectItem
+            key={getValue(item)}
+            value={getValue(item)}
+            className={itemClassName}
+            {...itemProps}
+          >
+            {renderItem ? renderItem(item) : getLabel(item)}
+          </SelectItem>
+        ))}
+      </SelectPopup>
+    </SelectRoot>
+  );
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { SelectPrimitive };
+export { SelectPopup as SelectContent };

package/src/components/show/index.ts

@@ -0,0 +1 @@
+export * from "./show";

package/src/components/show/show.stories.tsx

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Flame, Phone, Rat, SprayCan } from "lucide-react";
+import { Button, Show } from "../../components";
+import { useHover, useToggle } from "../../hooks";
+import { cn } from "../../lib";
+
+/**
+ * Componente que permite animar la entrada y salida de un componente.
+ *
+ * Expone dos estados `open` y `closed` para animar la entrada y salida respectivamente.
+ *
+ * ### Uso:
+ *
+ * ```tsx
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div className="animated-box">
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * ### CSS para animaciones:
+ *
+ * Define las animaciones en un archivo CSS. En este ejemplo, se crean animaciones para la entrada (`fadeInZoomIn`) y la salida (`fadeOutZoomOut`).
+ *
+ * ```css
+ * @keyframes fadeInZoomIn {
+ *   0% {
+ *     opacity: 0;
+ *     transform: scale(0.95);
+ *   }
+ *   100% {
+ *     opacity: 1;
+ *     transform: scale(1);
+ *   }
+ * }
+ *
+ * @keyframes fadeOutZoomOut {
+ *   0% {
+ *     opacity: 1;
+ *     transform: scale(1);
+ *   }
+ *   100% {
+ *     opacity: 0;
+ *     transform: scale(0.95);
+ *   }
+ * }
+ *
+ * .animated-box[data-state="open"] {
+ *   animation: fadeInZoomIn 0.5s forwards;
+ * }
+ *
+ * .animated-box[data-state="closed"] {
+ *   animation: fadeOutZoomOut 0.5s forwards;
+ * }
+ * ```
+ *
+ * ### Alternativa con TailwindCSS:
+ *
+ * Alternativamente, se puede usar el plugin [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)
+ * que ya trae animaciones predefinidas. Acá un ejemplo:
+ *
+ * ```tsx
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div
+ *           className={cn(
+ *             // Animaciones de entrada
+ *             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+ *            // Animaciones de salida
+ *             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+ *           )}
+ *         >
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * ## Crea alias para acortar `data-[state-X]`
+ * En caso de que se quiera acortar el prefijo `data-[state-X]` se puede crear una variante en el archivo `tailwind.config.js`:
+ *
+ * ```tsx
+ * // tailwind.config.js
+ *
+ * // Importar plugin
+ * const plugin = require("tailwindcss/plugin");
+ *
+ * module.exports = {
+ *   // ...
+ *   plugins: [
+ *     plugin(function ({ addVariant }) {
+ *       addVariant("open", '&[data-state="open"]');
+ *       addVariant("closed", '&[data-state="closed"]');
+ *     }),
+ *   ],
+ * };
+ *
+ * // Uso
+ * import { Show } from './Show';
+ *
+ * const Example = () => {
+ *   const [open, toggle] = useToggle(false);
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggle()}>Toggle</button>
+ *       <Show when={open}>
+ *         <div
+ *           className={cn(
+ *             // Animaciones de entrada
+ *             "open:animate-in open:fade-in-0 open:zoom-in-95",
+ *            // Animaciones de salida
+ *             "closed:animate-out closed:fade-out-0 closed:zoom-out-95"
+ *           )}
+ *         >
+ *           🐙
+ *         </div>
+ *       </Show>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+const meta: Meta<typeof Show> = {
+  title: "others/Show",
+  component: Show,
+};
+
+export default meta;
+type Story = StoryObj<typeof Show>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, toggle] = useToggle(false);
+    return (
+      <div>
+        <Button onClick={() => toggle()}>Toggle</Button>
+        <Show when={open}>
+          <div
+            className={cn(
+              "border rounded-md p-2 mt-2 w-[200px]",
+              "open:animate-in open:zoom-in-95",
+              "closed:animate-out closed:fade-out-0 closed:zoom-out-95",
+            )}
+          >
+            🐙
+          </div>
+        </Show>
+      </div>
+    );
+  },
+};
+
+export const Hover: Story = {
+  render: () => {
+    const { ref, isHovering } = useHover<HTMLDivElement>();
+    return (
+      <div
+        className="bg-gray-100 h-[300px] w-[300px] border border-dashed flex items-end overflow-hidden"
+        ref={ref}
+      >
+        <Show when={isHovering}>
+          <div
+            className={cn(
+              "rounded-md text-xl p-2 w-full flex justify-center gap-x-4",
+              "duration-300",
+              "open:animate-in open:slide-in-from-bottom",
+              "closed:animate-out closed:slide-out-to-bottom",
+            )}
+          >
+            <Phone />
+            <Rat />
+            <SprayCan />
+            <Flame />
+          </div>
+        </Show>
+      </div>
+    );
+  },
+};

package/src/components/show/show.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ComponentProps } from "react";
+import { describe, expect, test } from "vitest";
+import { Show } from "../../components";
+
+type PresenceProps = ComponentProps<typeof Show>;
+
+describe("Show Component", () => {
+  const renderPresence = (props: PresenceProps) => {
+    return render(<Show {...props} />);
+  };
+
+  test('renders the component with "open" state when "when" prop is true', () => {
+    renderPresence({ when: true, children: <div>hello</div> });
+
+    const slotElement = screen.getByText("hello");
+    expect(slotElement).toBeInTheDocument();
+    expect(slotElement).toHaveAttribute("data-state", "open");
+  });
+
+  test('unmount the component when "when" prop is false', () => {
+    renderPresence({ when: false, children: <div>hello</div> });
+
+    const slotElement = screen.queryByText("hello");
+    expect(slotElement).not.toBeInTheDocument();
+  });
+
+  test("passes additional props to the Slot component", () => {
+    renderPresence({
+      when: true,
+      className: "test-class",
+      children: <div>hello</div>,
+    });
+
+    const slotElement = screen.getByText("hello");
+    expect(slotElement).toBeInTheDocument();
+
+    expect(slotElement).toHaveClass("test-class");
+  });
+});

package/src/components/show/show.tsx

@@ -0,0 +1,16 @@
+import { Presence as AnimatePresence } from "@radix-ui/react-presence";
+import { Slot } from "@radix-ui/react-slot";
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+interface Props extends ComponentPropsWithoutRef<typeof Slot> {
+  /** Si el componente está presente o no */
+  when: ComponentProps<typeof AnimatePresence>["present"];
+}
+
+export const Show = ({ when, ...props }: Props) => {
+  return (
+    <AnimatePresence present={when}>
+      <Slot {...props} data-state={when ? "open" : "closed"} data-slot="show" />
+    </AnimatePresence>
+  );
+};

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./skeleton";