@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+import { CheckIcon } from "@phosphor-icons/react";
+
+const checkboxVariants = cva(
+  "peer relative flex shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] bg-[color:color-mix(in_oklab,var(--input)_10%,transparent)] bg-clip-padding text-[color:var(--foreground)] transition-all outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 hover:!border-[color:color-mix(in_oklab,var(--border)_20%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--input)_15%,transparent)] focus-visible:ring focus-visible:ring-[color:color-mix(in_oklab,var(--ring)_30%,transparent)] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] data-disabled:hover:bg-[color:color-mix(in_oklab,var(--input)_10%,transparent)] aria-invalid:border-[color:var(--destructive)] aria-invalid:ring aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_20%,transparent)] dark:aria-invalid:border-[color:color-mix(in_oklab,var(--destructive)_50%,transparent)] dark:aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_40%,transparent)] data-checked:border-[color:var(--primary)] data-checked:hover:border-[color:var(--primary)] data-checked:active:border-[color:var(--primary)] data-checked:focus-visible:border-[color:var(--primary)] data-checked:bg-[color:var(--primary)] data-checked:bg-clip-border data-checked:text-[color:var(--primary-foreground)] dark:data-checked:bg-[color:var(--primary)]",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        default: "size-4",
+        lg: "size-4.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+const checkboxIndicatorVariants = cva("grid place-content-center text-current transition-none", {
+  variants: {
+    size: {
+      sm: "[&>svg]:size-3",
+      default: "[&>svg]:size-3.5",
+      lg: "[&>svg]:size-3.5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+function Checkbox({
+  className,
+  size,
+  ...props
+}: CheckboxPrimitive.Root.Props & VariantProps<typeof checkboxVariants>) {
+  const resolvedSize = size ?? "default";
+
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      data-size={resolvedSize}
+      className={cn(checkboxVariants({ size: resolvedSize }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className={checkboxIndicatorVariants({ size: resolvedSize })}
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/templates/ui/components/primitives/editable-slider-value-label.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import { Children, isValidElement, useEffect, useRef, useState } from "react";
+
+import { Slider } from "./slider";
+
+const editableValueTextBaseClassName =
+  "block h-full min-w-0 overflow-hidden whitespace-nowrap font-sans text-xs leading-5 tabular-nums";
+const valueLabelContainerClassName = "inline-grid h-5 shrink-0";
+
+type EditableSliderValueLabelLayout = "content" | "reference";
+type EditableSliderValueLabelTextAlign = "left" | "right";
+
+type SliderMetadataProps = {
+  max?: number;
+  min?: number;
+};
+
+type EditableSliderValueLabelProps = {
+  ariaLabel: string;
+  disabled?: boolean;
+  layout?: EditableSliderValueLabelLayout;
+  maxValueLabel?: string;
+  onCommit?: (nextValue: string) => void;
+  onStep?: (direction: -1 | 1, currentDraft: string) => string | undefined;
+  textAlign?: EditableSliderValueLabelTextAlign;
+  valueLabel: string;
+};
+
+export function EditableSliderValueLabel({
+  ariaLabel,
+  disabled = false,
+  layout = "reference",
+  maxValueLabel,
+  onCommit,
+  onStep,
+  textAlign = "right",
+  valueLabel,
+}: EditableSliderValueLabelProps): React.JSX.Element {
+  const [editing, setEditing] = useState(false);
+  const editorRef = useRef<HTMLSpanElement>(null);
+  const valueLabelRef = useRef(valueLabel);
+  const valueTextClassName = getEditableValueTextClassName({ layout, textAlign });
+  const widestValueLabel = getWidestValueLabel(valueLabel, maxValueLabel);
+
+  useEffect(() => {
+    valueLabelRef.current = valueLabel;
+  }, [valueLabel]);
+
+  useEffect(() => {
+    if (editing) {
+      const editor = editorRef.current;
+
+      if (!editor) {
+        return;
+      }
+
+      editor.textContent = valueLabelRef.current;
+      editor.focus();
+      selectEditableText(editor);
+    }
+  }, [editing]);
+
+  if (disabled || !onCommit) {
+    const valueTextToneClassName = disabled
+      ? "text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] opacity-60"
+      : "text-[color:var(--muted-foreground)]";
+
+    return (
+      <span className={getValueLabelContainerClassName(layout, "cursor-default")}>
+        {layout === "reference" ? <SliderValueLabelMeasure valueLabel={widestValueLabel} /> : null}
+        <span
+          className={`col-start-1 row-start-1 cursor-default ${valueTextToneClassName} ${valueTextClassName}`}
+        >
+          {valueLabel}
+        </span>
+      </span>
+    );
+  }
+
+  function commitDraft(): void {
+    onCommit?.(editorRef.current?.textContent ?? valueLabelRef.current);
+    setEditing(false);
+  }
+
+  return (
+    <span className={getValueLabelContainerClassName(layout)}>
+      {layout === "reference" ? <SliderValueLabelMeasure valueLabel={widestValueLabel} /> : null}
+      {editing ? (
+        <EditableSliderValueEditor
+          ariaLabel={ariaLabel}
+          editorRef={editorRef}
+          layout={layout}
+          onCancel={() => setEditing(false)}
+          onCommit={commitDraft}
+          onStep={onStep}
+          textClassName={valueTextClassName}
+        />
+      ) : (
+        <EditableSliderValueButton
+          ariaLabel={ariaLabel}
+          layout={layout}
+          onBeginEditing={() => setEditing(true)}
+          textClassName={valueTextClassName}
+          valueLabel={valueLabel}
+        />
+      )}
+    </span>
+  );
+}
+
+function SliderValueLabelMeasure({ valueLabel }: { valueLabel: string }): React.JSX.Element {
+  return (
+    <span
+      aria-hidden="true"
+      className={`invisible col-start-1 row-start-1 min-w-[4ch] pointer-events-none text-[color:var(--muted-foreground)] ${getEditableValueTextClassName(
+        {
+          layout: "reference",
+          textAlign: "right",
+        },
+      )}`}
+      data-slider-value-label-measure=""
+    >
+      {valueLabel}
+    </span>
+  );
+}
+
+function getValueLabelContainerClassName(
+  layout: EditableSliderValueLabelLayout,
+  className = "",
+): string {
+  return [
+    valueLabelContainerClassName,
+    layout === "content" ? "w-fit justify-items-start" : "place-items-center",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+function getEditableValueTextClassName({
+  layout,
+  textAlign,
+}: {
+  layout: EditableSliderValueLabelLayout;
+  textAlign: EditableSliderValueLabelTextAlign;
+}): string {
+  return [
+    editableValueTextBaseClassName,
+    layout === "content" ? "w-auto" : "w-full",
+    textAlign === "left" ? "text-left" : "text-right",
+  ].join(" ");
+}
+
+function EditableSliderValueEditor({
+  ariaLabel,
+  editorRef,
+  layout,
+  onCancel,
+  onCommit,
+  onStep,
+  textClassName,
+}: {
+  ariaLabel: string;
+  editorRef: React.RefObject<HTMLSpanElement | null>;
+  layout: EditableSliderValueLabelLayout;
+  onCancel: () => void;
+  onCommit: () => void;
+  onStep?: (direction: -1 | 1, currentDraft: string) => string | undefined;
+  textClassName: string;
+}): React.JSX.Element {
+  return (
+    <span
+      aria-label={ariaLabel}
+      className={`col-start-1 row-start-1 cursor-text p-0 text-[color:var(--foreground)] outline-none ${layout === "content" ? "justify-self-start" : ""} ${textClassName}`}
+      contentEditable
+      onBlur={onCommit}
+      onFocus={(event) => selectEditableText(event.currentTarget)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          onCommit();
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onCancel();
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+          const nextValueLabel = onStep?.(
+            event.key === "ArrowUp" ? 1 : -1,
+            event.currentTarget.textContent ?? "",
+          );
+
+          if (typeof nextValueLabel === "string") {
+            event.preventDefault();
+            event.currentTarget.textContent = nextValueLabel;
+            selectEditableText(event.currentTarget);
+          }
+        }
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+      ref={editorRef}
+      role="textbox"
+      suppressContentEditableWarning
+      tabIndex={0}
+    />
+  );
+}
+
+function EditableSliderValueButton({
+  ariaLabel,
+  layout,
+  onBeginEditing,
+  textClassName,
+  valueLabel,
+}: {
+  ariaLabel: string;
+  layout: EditableSliderValueLabelLayout;
+  onBeginEditing: () => void;
+  textClassName: string;
+  valueLabel: string;
+}): React.JSX.Element {
+  function beginEditableActivation(event: React.MouseEvent | React.PointerEvent): void {
+    event.stopPropagation();
+    onBeginEditing();
+  }
+
+  return (
+    <button
+      aria-label={`Edit ${ariaLabel}`}
+      className={`col-start-1 row-start-1 h-full min-w-0 appearance-none cursor-text border-0 bg-transparent p-0 transition-colors ${layout === "content" ? "w-auto justify-self-start" : "w-full"}`}
+      onClick={beginEditableActivation}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.stopPropagation();
+          onBeginEditing();
+        }
+      }}
+      onMouseDown={stopEditableActivation}
+      onMouseUp={beginEditableActivation}
+      onPointerDown={stopEditableActivation}
+      onPointerUp={beginEditableActivation}
+      type="button"
+    >
+      <span
+        className={`cursor-text text-[color:var(--muted-foreground)] transition-colors duration-200 ease-out hover:text-[color:var(--foreground)] ${textClassName}`}
+      >
+        {valueLabel}
+      </span>
+    </button>
+  );
+}
+
+function stopEditableActivation(event: React.MouseEvent | React.PointerEvent): void {
+  event.stopPropagation();
+}
+
+export function getInferredValueLabelWidthReference(
+  valueLabel: string,
+  children: React.ReactNode,
+): string | undefined {
+  const sliderMetadata = getSliderMetadata(children);
+
+  if (!sliderMetadata) {
+    return undefined;
+  }
+
+  return getNumericValueLabelWidthReference(valueLabel, sliderMetadata);
+}
+
+function getSliderMetadata(children: React.ReactNode): SliderMetadataProps | undefined {
+  for (const child of Children.toArray(children)) {
+    if (!isValidElement<SliderMetadataProps>(child) || child.type !== Slider) {
+      continue;
+    }
+
+    return {
+      max: child.props.max ?? 100,
+      min: child.props.min ?? 0,
+    };
+  }
+
+  return undefined;
+}
+
+export function getNumericValueLabelWidthReference(
+  valueLabel: string,
+  { max = 100, min = 0 }: SliderMetadataProps,
+): string | undefined {
+  const numericMatches = Array.from(valueLabel.matchAll(/-?\d+(?:\.\d+)?/g));
+
+  if (numericMatches.length === 0) {
+    return undefined;
+  }
+
+  const decimalPrecision = Math.max(...numericMatches.map(getNumericMatchDecimalPrecision));
+  const widestEndpoint = [min, max]
+    .map((value) => formatNumericEndpoint(value, decimalPrecision))
+    .sort((left, right) => right.length - left.length)[0];
+
+  return valueLabel.replaceAll(/-?\d+(?:\.\d+)?/g, widestEndpoint ?? "");
+}
+
+function getNumericMatchDecimalPrecision(match: RegExpMatchArray): number {
+  return match[0].split(".")[1]?.length ?? 0;
+}
+
+function formatNumericEndpoint(value: number, decimalPrecision: number): string {
+  if (decimalPrecision > 0) {
+    return value.toFixed(decimalPrecision);
+  }
+
+  return `${Math.round(value)}`;
+}
+
+function getWidestValueLabel(valueLabel: string, maxValueLabel?: string): string {
+  if (!maxValueLabel || valueLabel.length > maxValueLabel.length) {
+    return valueLabel;
+  }
+
+  return maxValueLabel;
+}
+
+function selectEditableText(node: HTMLElement): void {
+  const selection = window.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

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

@@ -0,0 +1,225 @@
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+import { Label } from "./label";
+import { Separator } from "./separator";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-field-control data-[invalid=true]:text-[color:var(--destructive)]",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:[&>[role=radio][data-size=lg]]:mt-0.5",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px @md/field-group:has-[>[data-slot=field-content]]:[&>[role=radio][data-size=lg]]:mt-0.5",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-[color:color-mix(in_oklab,var(--primary)_5%,transparent)] has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] *:data-[slot=field]:p-2 dark:has-data-checked:bg-[color:color-mix(in_oklab,var(--primary)_10%,transparent)]",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col group-has-[>[data-slot=checkbox][data-size=sm]]/field:text-xs-plus group-has-[>[data-slot=checkbox][data-checked]]/field:text-[color:var(--foreground)] group-has-[>[data-slot=checkbox][data-size=lg]]/field:text-sm/relaxed group-has-[>[data-slot=radio-group-item][data-size=lg]]/field:text-sm/relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50 group-has-[>[role=radio][data-size=lg]]/field:text-sm/relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-xs/relaxed leading-normal font-normal text-[color:var(--muted-foreground)] group-has-data-horizontal/field:text-balance group-has-[>[role=radio][data-size=lg]]/field:text-sm/relaxed [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[color:var(--primary)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-[color:var(--background)] px-2 text-[color:var(--muted-foreground)]"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-xs/relaxed font-normal text-[color:var(--destructive)]", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

package/templates/ui/components/primitives/index.ts

@@ -0,0 +1,82 @@
+"use client";
+
+export * from "./animated-loader";
+export { Button, buttonVariants } from "./button";
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+} from "./button-group";
+export { Checkbox } from "./checkbox";
+export {
+  EditableSliderValueLabel,
+  getInferredValueLabelWidthReference,
+  getNumericValueLabelWidthReference,
+} from "./editable-slider-value-label";
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "./field";
+export { Input, inputVariants } from "./input";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./input-group";
+export { Label } from "./label";
+export {
+  PortalLayerContainerProvider,
+  usePortalLayerContainer,
+  type PortalLayerContainer,
+} from "./portal-layer-context";
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverSurface,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./popover";
+export { PrimitiveArrowIcon } from "./primitive-arrow-icon";
+export type { PrimitiveArrowDirection } from "./primitive-arrow-icon";
+export { ScrollFade } from "./scroll-fade";
+export * from "./selection-state";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectTriggerButton,
+  SelectValue,
+} from "./select";
+export { Separator } from "./separator";
+export { Slider, SliderInteractionProvider } from "./slider";
+export type { SliderInteractionChangeDetails } from "./slider";
+export { Switch } from "./switch";
+export { Textarea, textareaVariants } from "./textarea";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+export { Toggle, toggleVariants } from "./toggle";
+export { ToggleGroup, ToggleGroupItem } from "./toggle-group";