@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/focal-point-picker.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { cn } from '@saena-io/ui/lib/utils';
+import { type KeyboardEvent, type PointerEvent, useEffect, useMemo, useRef, useState } from 'react';
+
+// A generic focal-point picker (ADR-0009): a large image preview with a draggable/clickable dot marking the
+// "keep this in frame" point. Value is a normalized { x, y } (each 0–1, relative to the original image); unset
+// shows the centre. Dependency-free — the consumer owns what the point means (the content ImageEditor stores it
+// as the image field's `hotspot`).
+//
+// Sizing: we measure the available width + viewport and the image's natural aspect, then give the frame an
+// EXPLICIT display box (preserving aspect, scaled to fit — and upscaling small images to a usable size). The
+// frame's box therefore equals the displayed image exactly, so pointer coords map straight to [0,1] with no
+// letterbox math. (A CSS-only `max-w-full` on a shrink-wrapped image is a circular size constraint that
+// collapses to 0×0, so we compute the box instead.)
+
+export interface FocalPoint {
+  x: number;
+  y: number;
+}
+
+const clamp01 = (n: number): number => Math.min(1, Math.max(0, n));
+const CENTRE: FocalPoint = { x: 0.5, y: 0.5 };
+const NUDGE = 0.02; // arrow-key step
+const MIN_BOX = 160; // px floor so a measure-before-paint frame is still clickable
+
+export function FocalPointPicker({
+  src,
+  value,
+  onChange,
+  guideRatio,
+  alt = '',
+  className,
+}: {
+  src: string;
+  value?: FocalPoint;
+  onChange: (point: FocalPoint) => void;
+  /** Optional crop-preview overlay (w/h): outlines the area a public render at this ratio would keep, centred
+   *  on the current focal point, and dims the rest. Editor guide only — it doesn't change the stored value. */
+  guideRatio?: number;
+  /** Decorative alt for the preview image (the picker is the interactive element). */
+  alt?: string;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+  // Available box: container width × a fraction of the viewport height. Remeasured on resize.
+  const [avail, setAvail] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
+  const point = value ?? CENTRE;
+
+  useEffect(() => {
+    const measure = () => {
+      const w = containerRef.current?.clientWidth ?? 0;
+      const h = Math.max(MIN_BOX, Math.round(window.innerHeight * 0.6));
+      setAvail({ w, h });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (containerRef.current) ro.observe(containerRef.current);
+    window.addEventListener('resize', measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, []);
+
+  // Explicit display box: fit the natural image inside the available box, preserving aspect. `scale` may be > 1
+  // so small images grow to a usable size.
+  const box = useMemo(() => {
+    if (!natural || avail.w === 0) return null;
+    const scale = Math.min(avail.w / natural.w, avail.h / natural.h);
+    return {
+      w: Math.max(1, Math.round(natural.w * scale)),
+      h: Math.max(1, Math.round(natural.h * scale)),
+    };
+  }, [natural, avail]);
+
+  // The crop box a public render at `guideRatio` would keep, centred on the focal point + clamped — same math
+  // as the server crop, in the displayed box's px (ADR-0009). Null until the image is measured.
+  const guide = useMemo(() => {
+    if (!guideRatio || guideRatio <= 0 || !box) return null;
+    const { w: W, h: H } = box;
+    const origAR = W / H;
+    const cw = guideRatio >= origAR ? W : H * guideRatio;
+    const ch = guideRatio >= origAR ? W / guideRatio : H;
+    const left = Math.max(0, Math.min(point.x * W - cw / 2, W - cw));
+    const top = Math.max(0, Math.min(point.y * H - ch / 2, H - ch));
+    return { left, top, width: cw, height: ch };
+  }, [guideRatio, box, point.x, point.y]);
+
+  const setFromPointer = (e: PointerEvent): void => {
+    const el = frameRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 || r.height === 0) return;
+    onChange({
+      x: clamp01((e.clientX - r.left) / r.width),
+      y: clamp01((e.clientY - r.top) / r.height),
+    });
+  };
+
+  const onKeyDown = (e: KeyboardEvent): void => {
+    const dx = e.key === 'ArrowLeft' ? -NUDGE : e.key === 'ArrowRight' ? NUDGE : 0;
+    const dy = e.key === 'ArrowUp' ? -NUDGE : e.key === 'ArrowDown' ? NUDGE : 0;
+    if (dx === 0 && dy === 0) return;
+    e.preventDefault();
+    onChange({ x: clamp01(point.x + dx), y: clamp01(point.y + dy) });
+  };
+
+  return (
+    <div ref={containerRef} className={cn('w-full', className)}>
+      <div
+        ref={frameRef}
+        role="slider"
+        aria-label="Focal point"
+        // A focal point is 2D; expose x as the numeric value and the full x/y in valuetext (which AT reads in
+        // preference to valuenow). Arrow keys nudge both axes.
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(point.x * 100)}
+        aria-valuetext={`x ${Math.round(point.x * 100)}%, y ${Math.round(point.y * 100)}%`}
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          dragging.current = true;
+          // capture so a drag that leaves the frame keeps tracking; guard — a synthetic/edge pointerId can throw.
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+          } catch {}
+          setFromPointer(e);
+        }}
+        onPointerMove={(e) => {
+          if (dragging.current) setFromPointer(e);
+        }}
+        onPointerUp={(e) => {
+          dragging.current = false;
+          try {
+            e.currentTarget.releasePointerCapture?.(e.pointerId);
+          } catch {}
+        }}
+        style={box ? { width: box.w, height: box.h } : { minHeight: MIN_BOX }}
+        className="relative mx-auto cursor-crosshair touch-none overflow-hidden rounded-md bg-muted/40 ring-1 ring-foreground/10 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {/* The frame box equals the displayed image (computed above), so object-cover fills it without cropping.
+            draggable=false stops the native image-drag from hijacking the pointer. */}
+        <img
+          src={src}
+          alt={alt}
+          draggable={false}
+          onLoad={(e) =>
+            setNatural({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })
+          }
+          className="block h-full w-full select-none object-cover"
+        />
+        {guide ? (
+          <div
+            aria-hidden
+            style={{ left: guide.left, top: guide.top, width: guide.width, height: guide.height }}
+            className="pointer-events-none absolute border border-white/90 shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]"
+          />
+        ) : null}
+        <span
+          aria-hidden
+          style={{ left: `${point.x * 100}%`, top: `${point.y * 100}%` }}
+          className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute size-7 rounded-full border-2 border-white shadow-[0_0_0_2px_rgba(0,0,0,0.45)]"
+        >
+          <span className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 size-1.5 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.45)]" />
+        </span>
+      </div>
+    </div>
+  );
+}

package/template/base/src/components/ui/hover-card.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+  className,
+  side = 'bottom',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            'z-50 w-72 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/template/base/src/components/ui/input-group.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { Button } from '@saena-io/ui/components/button';
+import { Input } from '@saena-io/ui/components/input';
+import { Textarea } from '@saena-io/ui/components/textarea';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group relative flex h-7 w-full min-w-0 items-center rounded-md border border-input bg-input/20 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-1 py-2 text-xs/relaxed font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      align: {
+        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem]',
+        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem]',
+        'block-start':
+          'order-first w-full justify-start px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+        'block-end':
+          'order-last w-full justify-start px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  'flex items-center gap-2 rounded-md text-xs/relaxed shadow-none',
+  {
+    variants: {
+      size: {
+        xs: "h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3",
+        sm: 'gap-1',
+        'icon-xs': 'size-6 p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-7 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-xs/relaxed text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/template/base/src/components/ui/input-otp.tsx

@@ -0,0 +1,85 @@
+import { OTPInput, OTPInputContext } from 'input-otp';
+import * as React from 'react';
+
+import { MinusSignIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'cn-input-otp flex items-center has-disabled:opacity-50',
+        containerClassName,
+      )}
+      spellCheck={false}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        'flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'relative flex size-7 items-center justify-center border-y border-r border-input bg-input/20 text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/template/base/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import type * as React from 'react';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        'h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/template/base/src/components/ui/item.tsx

@@ -0,0 +1,188 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { Separator } from '@saena-io/ui/components/separator';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-2', className)}
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  'group/item flex w-full flex-wrap items-center rounded-md border text-xs/relaxed transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'border-transparent bg-muted/50',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'item',
+      variant,
+      size,
+    },
+  });
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'line-clamp-1 flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};

package/template/base/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@saena-io/ui/lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs bg-muted px-1 font-sans text-[0.625rem] font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };