@hilum/ui 0.1.1

package/src/components/carousel.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+interface CarouselProps {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+  return context;
+}
+
+function Carousel({
+  opts,
+  plugins,
+  orientation = "horizontal",
+  setApi,
+  className,
+  children,
+  ...props
+}: CarouselProps & React.ComponentProps<"div">) {
+  const [carouselRef, emblaApi] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "vertical" ? "y" : "x",
+    },
+    plugins,
+  );
+
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = React.useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!emblaApi) return;
+    onSelect(emblaApi);
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+    return () => {
+      emblaApi.off("reInit", onSelect);
+      emblaApi.off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+
+  React.useEffect(() => {
+    if (!emblaApi || !setApi) return;
+    setApi(emblaApi);
+  }, [emblaApi, setApi]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: emblaApi,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        className={cn("flex", orientation === "vertical" ? "-mt-4 flex-col" : "-ml-4", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "vertical" ? "pt-4" : "pl-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-9 w-9 rounded-full",
+        orientation === "vertical"
+          ? "-top-12 left-1/2 -translate-x-1/2 rotate-90"
+          : "-left-12 top-1/2 -translate-y-1/2",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="size-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-9 w-9 rounded-full",
+        orientation === "vertical"
+          ? "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
+          : "-right-12 top-1/2 -translate-y-1/2",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="size-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

package/src/components/chart.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { ResponsiveContainer, type TooltipContentProps } from "recharts";
+import { cn } from "../lib/utils";
+
+// Color palette for charts
+export const CHART_COLORS = {
+  primary: "#FF4D01", // brand-primary
+  secondary: "#CDEA19", // brand-secondary
+  tertiary: "#FDE086", // brand-secondary
+  muted: "#a8978a", // taupe-400
+  subtle: "#e3dcd4", // taupe-200
+  dark: "#26181a", // taupe-900
+};
+
+interface ChartContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  height?: number;
+}
+
+function ChartContainer({ children, className, height = 300 }: ChartContainerProps) {
+  return (
+    <div className={cn("w-full", className)}>
+      <ResponsiveContainer width="100%" height={height}>
+        {children as React.ReactElement}
+      </ResponsiveContainer>
+    </div>
+  );
+}
+ChartContainer.displayName = "ChartContainer";
+
+// Custom tooltip component styled to match the design system
+interface ChartTooltipProps extends Partial<TooltipContentProps<number, string>> {
+  labelClassName?: string;
+}
+
+function ChartTooltip({ active, payload, label, labelClassName }: ChartTooltipProps) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-xl border border-taupe-100 bg-white px-3 py-2 shadow-elevated">
+      {label && <p className={cn("mb-1 label text-taupe-400", labelClassName)}>{label}</p>}
+      {payload.map((entry, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <span
+            className="inline-block h-2 w-2 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="caption text-taupe-500">{entry.name}:</span>
+          <span className="caption font-medium text-taupe-900">{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+ChartTooltip.displayName = "ChartTooltip";
+
+export { ChartContainer, ChartTooltip };
+
+export {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip as RechartsTooltip,
+  Legend,
+  type TooltipProps as RechartsTooltipProps,
+} from "recharts";

package/src/components/checkbox.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import { Checkbox } from "radix-ui";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const CheckboxRoot = React.forwardRef<
+  React.ComponentRef<typeof Checkbox.Root>,
+  React.ComponentPropsWithoutRef<typeof Checkbox.Root>
+>(({ className, ...props }, ref) => (
+  <Checkbox.Root
+    ref={ref}
+    className={cn(
+      "peer size-4 shrink-0 rounded border border-taupe-300 bg-white transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
+      "data-[state=indeterminate]:bg-brand-primary data-[state=indeterminate]:border-brand-primary",
+      className,
+    )}
+    {...props}
+  >
+    <Checkbox.Indicator className="flex items-center justify-center text-white">
+      {props.checked === "indeterminate" ? (
+        <Minus size={11} strokeWidth={3} />
+      ) : (
+        <Check size={11} strokeWidth={3} />
+      )}
+    </Checkbox.Indicator>
+  </Checkbox.Root>
+));
+CheckboxRoot.displayName = "Checkbox";
+
+export { CheckboxRoot as Checkbox };

package/src/components/collapsible.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { Collapsible } from "radix-ui";
+
+const CollapsibleRoot = Collapsible.Root;
+const CollapsibleTrigger = Collapsible.Trigger;
+const CollapsibleContent = Collapsible.Content;
+
+export { CollapsibleRoot as Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/color-input.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { ColorPicker } from "./color-picker";
+
+interface ColorInputProps {
+  value: string;
+  onChange: (next: string) => void;
+  /** Show an opacity slider (0–100). Pass `opacity` and `onOpacityChange`. */
+  opacity?: number;
+  onOpacityChange?: (next: number) => void;
+  className?: string;
+  disabled?: boolean;
+  presets?: string[];
+}
+
+/**
+ * Compact, inline color input designed for designer property panels.
+ * Combines a swatch trigger (ColorPicker), a hex input, and an optional opacity field.
+ */
+function ColorInput({
+  value,
+  onChange,
+  opacity,
+  onOpacityChange,
+  className,
+  disabled,
+  presets,
+}: ColorInputProps) {
+  const [hex, setHex] = React.useState(value);
+
+  React.useEffect(() => {
+    setHex(value);
+  }, [value]);
+
+  const commitHex = (next: string) => {
+    if (/^#([0-9a-fA-F]{3}){1,2}$/.test(next)) onChange(next);
+    else setHex(value);
+  };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex h-8 items-stretch gap-0 rounded-md border border-taupe-200 bg-white overflow-hidden",
+        "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+        disabled && "opacity-50 pointer-events-none",
+        className,
+      )}
+    >
+      <ColorPicker
+        value={value}
+        onChange={onChange}
+        presets={presets}
+        disabled={disabled}
+        className="h-full w-8 border-0 rounded-none focus-visible:ring-0"
+      />
+      <input
+        type="text"
+        value={hex.replace(/^#/, "")}
+        onChange={(e) => setHex("#" + e.target.value.replace(/^#/, ""))}
+        onBlur={(e) => commitHex("#" + e.target.value.replace(/^#/, ""))}
+        onKeyDown={(e) => {
+          if (e.key === "Enter")
+            commitHex("#" + (e.target as HTMLInputElement).value.replace(/^#/, ""));
+        }}
+        spellCheck={false}
+        className="w-[5.5rem] caption text-taupe-900 px-2 bg-transparent border-l border-taupe-100 focus:outline-none uppercase"
+      />
+      {typeof opacity === "number" && onOpacityChange && (
+        <div className="relative flex items-center border-l border-taupe-100">
+          <input
+            type="number"
+            min={0}
+            max={100}
+            value={Math.round(opacity)}
+            onChange={(e) => onOpacityChange(Number(e.target.value))}
+            className="w-12 caption text-taupe-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+          <span aria-hidden className="caption-xs text-taupe-400 pr-2">
+            %
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { ColorInput };
+export type { ColorInputProps };

package/src/components/color-picker.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Popover } from "radix-ui";
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (next: string) => void;
+  className?: string;
+  disabled?: boolean;
+  /** Optional preset palette shown above the picker. */
+  presets?: string[];
+  /** Accessible label for the trigger. */
+  ariaLabel?: string;
+}
+
+function isValidHex(s: string): boolean {
+  return /^#([0-9a-fA-F]{3}){1,2}$/.test(s);
+}
+
+function ColorPicker({
+  value,
+  onChange,
+  className,
+  disabled,
+  presets,
+  ariaLabel = "Color",
+}: ColorPickerProps) {
+  const [hex, setHex] = React.useState(value);
+
+  React.useEffect(() => {
+    setHex(value);
+  }, [value]);
+
+  const commit = (next: string) => {
+    if (isValidHex(next)) onChange(next);
+  };
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          className={cn(
+            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-taupe-200 bg-white",
+            "transition-colors hover:border-taupe-300",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+        >
+          <span
+            aria-hidden
+            className="h-5 w-5 rounded-sm border border-black/5"
+            style={{ backgroundColor: value }}
+          />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          align="start"
+          sideOffset={6}
+          className="z-50 w-56 rounded-xl bg-white p-3 shadow-natural outline-none"
+        >
+          <input
+            type="color"
+            value={isValidHex(hex) ? hex : "#000000"}
+            onChange={(e) => {
+              setHex(e.target.value);
+              onChange(e.target.value);
+            }}
+            className="h-10 w-full cursor-pointer rounded-md border border-taupe-200 bg-white p-0.5"
+          />
+          <div className="mt-2 flex items-center gap-2">
+            <span className="caption text-taupe-500">Hex</span>
+            <input
+              type="text"
+              value={hex}
+              onChange={(e) => setHex(e.target.value)}
+              onBlur={(e) => commit(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
+              }}
+              className="flex-1 h-7 rounded-md border border-taupe-200 bg-white px-2 caption text-taupe-900 focus:outline-none focus:border-brand-primary"
+            />
+          </div>
+          {presets && presets.length > 0 && (
+            <div className="mt-3 grid grid-cols-8 gap-1.5">
+              {presets.map((p) => (
+                <button
+                  key={p}
+                  type="button"
+                  onClick={() => onChange(p)}
+                  aria-label={p}
+                  className="h-5 w-5 rounded-sm border border-black/10 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
+                  style={{ backgroundColor: p }}
+                />
+              ))}
+            </div>
+          )}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+export { ColorPicker };
+export type { ColorPickerProps };