@pixel-point/toolcraft 0.0.2

package/templates/ui/components/primitives/toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { toggleSelectedItemClassName } from "./selection-state";
+import { cn } from "../../lib/utils";
+
+const toggleVariants = cva(
+  `group/toggle inline-flex cursor-pointer items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] hover:text-[color:var(--foreground)] focus-visible:border-[color:var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[color:color-mix(in_oklab,var(--ring)_50%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-[color:var(--destructive)] aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_20%,transparent)] ${toggleSelectedItemClassName} dark:aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_40%,transparent)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5`,
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-transparent text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)]",
+        outline: `border border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] hover:text-[color:var(--foreground)] ${toggleSelectedItemClassName} aria-pressed:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] aria-pressed:hover:text-[color:var(--foreground)] data-[pressed]:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-[pressed]:hover:text-[color:var(--foreground)] data-[state=on]:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] data-[state=on]:hover:text-[color:var(--foreground)]`,
+      },
+      size: {
+        default: "h-7 min-w-7 px-2",
+        sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 min-w-8 px-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/templates/ui/components/primitives/tooltip.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "../../lib/utils";
+import {
+  PortalLayerContainerProvider,
+  type PortalLayerContainer,
+  usePortalLayerContainer,
+} from "./portal-layer-context";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  disableHoverablePopup = true,
+  ...props
+}: TooltipPrimitive.Root.Props) {
+  return (
+    <TooltipPrimitive.Root
+      data-slot="tooltip"
+      disableHoverablePopup={disableHoverablePopup}
+      {...props}
+    />
+  );
+}
+
+function TooltipTrigger({
+  className,
+  ...props
+}: TooltipPrimitive.Trigger.Props) {
+  return (
+    <TooltipPrimitive.Trigger
+      className={className}
+      data-slot="tooltip-trigger"
+      {...props}
+    />
+  );
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  interactive = false,
+  portalContainer,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  > & {
+    interactive?: boolean;
+    portalContainer?: PortalLayerContainer;
+  }) {
+  const resolvedContainer = usePortalLayerContainer(portalContainer);
+  const portalNodeRef = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <TooltipPrimitive.Portal container={resolvedContainer} ref={portalNodeRef}>
+      <PortalLayerContainerProvider container={portalNodeRef}>
+        <TooltipPrimitive.Positioner
+          align={align}
+          alignOffset={alignOffset}
+          side={side}
+          sideOffset={sideOffset}
+          className="isolate z-50"
+        >
+          <TooltipPrimitive.Popup
+            data-slot="tooltip-content"
+            className={cn(
+              "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] bg-[color:color-mix(in_oklab,var(--muted)_95%,transparent)] px-1.5 py-1 popup-text-xs-plus text-[color:var(--foreground)] shadow-md has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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",
+              interactive ? null : "pointer-events-none",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </PortalLayerContainerProvider>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/ui/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    mediaQueryList.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => mediaQueryList.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/templates/ui/index.ts

@@ -0,0 +1,31 @@
+"use client";
+
+export * from "./components/control-layout";
+export * from "./components/composites";
+export * from "./components/controls";
+export * from "./components/panel";
+export * from "./components/primitives";
+
+export {
+  Actions,
+  AnchorGrid,
+  ChannelMixer,
+  Checkbox,
+  CodeTextarea,
+  Color,
+  ColorOpacity,
+  ColorValue,
+  Curves,
+  FileDrop,
+  Gradient,
+  ImagePicker,
+  Palette,
+  RangeInput,
+  RangeSlider,
+  Segmented,
+  Select,
+  Slider,
+  Switch,
+  TextInput,
+  Vector,
+} from "./components/controls";

package/templates/ui/lib/control-outline.ts

@@ -0,0 +1,3 @@
+import { SHARED_INPUT_CONTROL_SURFACE_CLASS_NAME } from "./input-control-style";
+
+export const outlineControlSurfaceClassName = SHARED_INPUT_CONTROL_SURFACE_CLASS_NAME;

package/templates/ui/lib/input-control-style.ts

@@ -0,0 +1,131 @@
+export type SharedInputControlSize = "sm" | "default" | "lg" | "xl";
+
+export const SHARED_INPUT_CONTROL_SURFACE_CLASS_NAME =
+  "border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] bg-clip-padding text-[color:var(--foreground)]";
+
+export const SHARED_INPUT_CONTROL_BASE_CLASS_NAME = [
+  "w-full min-w-0 cursor-text rounded-lg border transition-colors outline-none",
+  "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-[color:var(--foreground)]",
+  "placeholder:text-[color:var(--muted-foreground)]",
+  "[&:not(:focus):hover]:!border-[color:color-mix(in_oklab,var(--border)_20%,transparent)] [&:not(:focus):hover]:text-[color:var(--foreground)]",
+  "focus:border-[color:color-mix(in_oklab,var(--border)_30%,transparent)]",
+  "focus-visible:border-[color:color-mix(in_oklab,var(--border)_30%,transparent)]",
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-[color:var(--destructive)]",
+  "dark:aria-invalid:border-[color:color-mix(in_oklab,var(--destructive)_50%,transparent)]",
+  SHARED_INPUT_CONTROL_SURFACE_CLASS_NAME,
+].join(" ");
+
+export const SHARED_INPUT_CONTROL_SIZE_CLASS_NAMES = {
+  default: "h-7 px-2 py-0.5 text-xs/relaxed file:h-6 file:text-xs/relaxed",
+  lg: "h-8 px-2.5 py-1 text-sm/relaxed file:h-7 file:text-sm/relaxed",
+  sm: "h-6 px-2 py-0 text-xs/relaxed file:h-5 file:text-xs/relaxed",
+  xl: "h-10 px-3 py-1.5 text-base/relaxed file:h-9 file:text-base/relaxed",
+} as const satisfies Record<SharedInputControlSize, string>;
+
+type SharedInputControlCssSizeValue = {
+  fontSize: string;
+  height: string;
+  lineHeight: string;
+  padding: string;
+};
+
+const SHARED_INPUT_CONTROL_SIZE_CSS_VALUES = {
+  default: {
+    fontSize: "0.75rem",
+    height: "1.75rem",
+    lineHeight: "1.625",
+    padding: "0.125rem 0.5rem",
+  },
+  lg: {
+    fontSize: "0.875rem",
+    height: "2rem",
+    lineHeight: "1.625",
+    padding: "0.25rem 0.625rem",
+  },
+  sm: {
+    fontSize: "0.75rem",
+    height: "1.5rem",
+    lineHeight: "1.625",
+    padding: "0 0.5rem",
+  },
+  xl: {
+    fontSize: "1rem",
+    height: "2.5rem",
+    lineHeight: "1.625",
+    padding: "0.375rem 0.75rem",
+  },
+} as const satisfies Record<
+  SharedInputControlSize,
+  SharedInputControlCssSizeValue
+>;
+
+export function buildSharedInputControlCss({
+  extraDeclarations = [],
+  selector,
+  size = "default",
+}: {
+  extraDeclarations?: readonly string[];
+  selector: string;
+  size?: SharedInputControlSize;
+}): string {
+  const sizeValues = SHARED_INPUT_CONTROL_SIZE_CSS_VALUES[size];
+  const extraDeclarationCss =
+    extraDeclarations.length > 0
+      ? `${extraDeclarations.map((declaration) => `  ${declaration}`).join("\n")}\n`
+      : "";
+
+  return `
+${selector} {
+  width: 100%;
+  min-width: 0;
+  height: ${sizeValues.height};
+  box-sizing: border-box;
+  border: 1px solid color-mix(in oklab, var(--border) 12%, transparent);
+  border-radius: var(--radius-lg, 0.5rem);
+  background: color-mix(in oklab, var(--input) 5%, transparent);
+  background-clip: padding-box;
+  color: var(--foreground);
+  padding: ${sizeValues.padding};
+  font-family: inherit;
+  font-size: ${sizeValues.fontSize};
+  line-height: ${sizeValues.lineHeight};
+  outline: none;
+  cursor: text;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    outline-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    --tw-gradient-from,
+    --tw-gradient-via,
+    --tw-gradient-to;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+${extraDeclarationCss}}
+${selector}::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+${selector}:not(:disabled):not(:focus):hover {
+  border-color: color-mix(in oklab, var(--border) 20%, transparent);
+  color: var(--foreground);
+}
+${selector}:not(:disabled):focus {
+  border-color: color-mix(in oklab, var(--border) 30%, transparent);
+}
+[data-focus-visible-mode="keyboard"] ${selector}:focus-visible {
+  border-color: color-mix(in oklab, var(--border) 30%, transparent);
+}
+${selector}:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+${selector}[aria-invalid="true"] {
+  border-color: var(--destructive);
+}`;
+}

package/templates/ui/lib/style-guide-color-utils.ts

@@ -0,0 +1,111 @@
+export type HsvColor = {
+  h: number;
+  s: number;
+  v: number;
+};
+
+function normalizeHue(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return ((value % 360) + 360) % 360;
+}
+
+export function clampNumber(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
+}
+
+export function normalizeHexColor(hex: string | null | undefined): string | null {
+  if (typeof hex !== "string") return null;
+
+  const raw = hex.trim();
+  if (!raw) return null;
+
+  const hashless = raw.startsWith("#") ? raw.slice(1) : raw;
+  if (![3, 6].includes(hashless.length)) return null;
+  if (!/^[\da-f]+$/i.test(hashless)) return null;
+
+  if (hashless.length === 3) {
+    const expanded = hashless
+      .split("")
+      .map((char) => `${char}${char}`)
+      .join("");
+    return `#${expanded.toLowerCase()}`;
+  }
+
+  return `#${hashless.toLowerCase()}`;
+}
+
+export function hexToHsv(hex: string): HsvColor {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+
+  const value = normalized.slice(1);
+  const r = Number.parseInt(value.slice(0, 2), 16) / 255;
+  const g = Number.parseInt(value.slice(2, 4), 16) / 255;
+  const b = Number.parseInt(value.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+
+  let hue = 0;
+  if (delta !== 0) {
+    if (max === r) {
+      hue = ((g - b) / delta) % 6;
+    } else if (max === g) {
+      hue = (b - r) / delta + 2;
+    } else {
+      hue = (r - g) / delta + 4;
+    }
+  }
+
+  hue = normalizeHue(hue * 60);
+
+  return {
+    h: hue,
+    s: max === 0 ? 0 : delta / max,
+    v: max,
+  };
+}
+
+export function hsvToHex(color: HsvColor): string {
+  const hue = normalizeHue(color.h);
+  const saturation = clampNumber(color.s, 0, 1);
+  const value = clampNumber(color.v, 0, 1);
+  const chroma = value * saturation;
+  const hueSegment = hue / 60;
+  const x = chroma * (1 - Math.abs((hueSegment % 2) - 1));
+  const match = value - chroma;
+
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (hueSegment >= 0 && hueSegment < 1) {
+    red = chroma;
+    green = x;
+  } else if (hueSegment >= 1 && hueSegment < 2) {
+    red = x;
+    green = chroma;
+  } else if (hueSegment >= 2 && hueSegment < 3) {
+    green = chroma;
+    blue = x;
+  } else if (hueSegment >= 3 && hueSegment < 4) {
+    green = x;
+    blue = chroma;
+  } else if (hueSegment >= 4 && hueSegment < 5) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+
+  const toHex = (channel: number) =>
+    Math.round((channel + match) * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+}

package/templates/ui/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}