@blibliki/ui 0.9.2

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,243 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+function MenuCheckIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M3.5 8.5 6.5 11.5 12.5 4.5"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MenuDotIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden {...props}>
+      <circle cx="8" cy="8" r="3" />
+    </svg>
+  );
+}
+
+function MenuChevronRightIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M6 3.5 10.5 8 6 12.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DropdownMenu(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>,
+) {
+  return <DropdownMenuPrimitive.Root {...props} />;
+}
+
+function DropdownMenuPortal(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
+) {
+  return <DropdownMenuPrimitive.Portal {...props} />;
+}
+
+function DropdownMenuTrigger(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>,
+) {
+  return <DropdownMenuPrimitive.Trigger {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 6,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn("ui-dropdown-content", className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>,
+) {
+  return <DropdownMenuPrimitive.Group {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset = false,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-variant={variant}
+      className={cn("ui-dropdown-item", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "ui-dropdown-item ui-dropdown-item--with-indicator",
+        className,
+      )}
+      {...props}
+    >
+      <span className="ui-dropdown-indicator" aria-hidden>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <MenuCheckIcon className="ui-dropdown-indicator-icon" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+) {
+  return <DropdownMenuPrimitive.RadioGroup {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        "ui-dropdown-item ui-dropdown-item--with-indicator",
+        className,
+      )}
+      {...props}
+    >
+      <span className="ui-dropdown-indicator" aria-hidden>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <MenuDotIcon className="ui-dropdown-indicator-icon" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset = false,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-inset={inset ? "true" : undefined}
+      className={cn("ui-dropdown-label", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn("ui-dropdown-separator", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return <span className={cn("ui-dropdown-shortcut", className)} {...props} />;
+}
+
+function DropdownMenuSub(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>,
+) {
+  return <DropdownMenuPrimitive.Sub {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-inset={inset ? "true" : undefined}
+      className={cn("ui-dropdown-item ui-dropdown-sub-trigger", className)}
+      {...props}
+    >
+      {children}
+      <MenuChevronRightIcon className="ui-dropdown-chevron" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      className={cn("ui-dropdown-content ui-dropdown-sub-content", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/components/encoder.tsx

@@ -0,0 +1,323 @@
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
+  type WheelEvent,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "@/lib/cn";
+
+type EncoderSize = "sm" | "md";
+
+type DragState = {
+  pointerId: number;
+  lastY: number;
+  sliderValue: number;
+};
+
+const FULL_RANGE_DRAG_DISTANCE_PX = 80;
+const FINE_DRAG_DISTANCE_MULTIPLIER = 8;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, value));
+
+const calcSliderValue = (
+  actualValue: number,
+  min: number,
+  max: number,
+  exp?: number,
+) => {
+  if (exp === undefined || exp === 1) return actualValue;
+
+  const range = max - min;
+  if (range === 0) return min;
+
+  const normalizedValue = (actualValue - min) / range;
+  const inverseExp = 1 / exp;
+
+  return min + Math.pow(normalizedValue, inverseExp) * range;
+};
+
+const calcActualValue = (
+  sliderValue: number,
+  min: number,
+  max: number,
+  exp?: number,
+) => {
+  if (exp === undefined || exp === 1) return sliderValue;
+
+  const range = max - min;
+  if (range === 0) return min;
+
+  const normalizedSlider = (sliderValue - min) / range;
+
+  return min + Math.pow(normalizedSlider, exp) * range;
+};
+
+const getStepPrecision = (step: number) => {
+  const stepString = `${step}`;
+  const decimalIndex = stepString.indexOf(".");
+
+  return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
+};
+
+const roundToStep = (value: number, min: number, step: number) => {
+  const precision = getStepPrecision(step);
+  const nextValue = Math.round((value - min) / step) * step + min;
+
+  return Number(nextValue.toFixed(precision));
+};
+
+const formatDisplayValue = (value: number, step: number) => {
+  const precision = Math.min(4, getStepPrecision(step));
+
+  if (precision === 0) return `${Math.round(value)}`;
+
+  return `${Number(value.toFixed(precision))}`;
+};
+
+export interface EncoderProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
+  name: string;
+  onChange: (value: number) => void;
+  defaultValue?: number;
+  value?: number;
+  max?: number;
+  min?: number;
+  step?: number;
+  exp?: number;
+  size?: EncoderSize;
+  disabled?: boolean;
+  formatValue?: (value: number) => string;
+}
+
+const Encoder = forwardRef<HTMLDivElement, EncoderProps>(
+  (
+    {
+      className,
+      style,
+      name,
+      onChange,
+      value,
+      defaultValue,
+      max = 1,
+      min = 0,
+      step = 0.01,
+      exp,
+      size = "md",
+      disabled = false,
+      formatValue,
+      onKeyDown,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onWheel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      clamp(defaultValue ?? min, min, max),
+    );
+    const dragStateRef = useRef<DragState | null>(null);
+
+    const currentValue = clamp(value ?? uncontrolledValue, min, max);
+    const currentSliderValue = clamp(
+      calcSliderValue(currentValue, min, max, exp),
+      min,
+      max,
+    );
+
+    const progress = max === min ? 0 : (currentSliderValue - min) / (max - min);
+
+    const displayValue = formatValue
+      ? formatValue(currentValue)
+      : formatDisplayValue(currentValue, step);
+
+    const commitValue = (nextRawValue: number) => {
+      const nextValue = clamp(roundToStep(nextRawValue, min, step), min, max);
+
+      if (nextValue === currentValue) return;
+
+      if (value === undefined) {
+        setUncontrolledValue(nextValue);
+      }
+
+      onChange(nextValue);
+    };
+
+    const changeBySteps = (stepDelta: number) => {
+      commitValue(currentValue + stepDelta * step);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(event);
+
+      if (event.defaultPrevented || disabled) return;
+
+      switch (event.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          event.preventDefault();
+          changeBySteps(1);
+          return;
+        case "ArrowDown":
+        case "ArrowLeft":
+          event.preventDefault();
+          changeBySteps(-1);
+          return;
+        case "PageUp":
+          event.preventDefault();
+          changeBySteps(10);
+          return;
+        case "PageDown":
+          event.preventDefault();
+          changeBySteps(-10);
+          return;
+        case "Home":
+          event.preventDefault();
+          commitValue(min);
+          return;
+        case "End":
+          event.preventDefault();
+          commitValue(max);
+          return;
+        default:
+          return;
+      }
+    };
+
+    const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(event);
+
+      if (event.defaultPrevented || disabled) return;
+
+      event.preventDefault();
+      event.currentTarget.focus();
+      event.currentTarget.setPointerCapture(event.pointerId);
+
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        lastY: event.clientY,
+        sliderValue: currentSliderValue,
+      };
+    };
+
+    const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+      onPointerMove?.(event);
+
+      if (event.defaultPrevented || disabled) return;
+
+      const dragState = dragStateRef.current;
+
+      if (dragState?.pointerId !== event.pointerId) return;
+
+      event.preventDefault();
+
+      const dragDistance =
+        FULL_RANGE_DRAG_DISTANCE_PX *
+        (event.shiftKey ? FINE_DRAG_DISTANCE_MULTIPLIER : 1);
+      const deltaSliderValue =
+        ((dragState.lastY - event.clientY) * (max - min)) / dragDistance;
+      const nextSliderValue = clamp(
+        dragState.sliderValue + deltaSliderValue,
+        min,
+        max,
+      );
+      const nextValue = calcActualValue(nextSliderValue, min, max, exp);
+
+      dragState.lastY = event.clientY;
+      dragState.sliderValue = nextSliderValue;
+
+      commitValue(nextValue);
+    };
+
+    const clearDragState = (event: PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (dragState?.pointerId !== event.pointerId) return;
+
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+
+      dragStateRef.current = null;
+    };
+
+    const handlePointerUp = (event: PointerEvent<HTMLDivElement>) => {
+      onPointerUp?.(event);
+
+      if (event.defaultPrevented) return;
+
+      clearDragState(event);
+    };
+
+    const handlePointerCancel = (event: PointerEvent<HTMLDivElement>) => {
+      onPointerCancel?.(event);
+
+      if (event.defaultPrevented) return;
+
+      clearDragState(event);
+    };
+
+    const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+      onWheel?.(event);
+
+      if (event.defaultPrevented || disabled || event.deltaY === 0) return;
+
+      event.preventDefault();
+      changeBySteps(event.deltaY < 0 ? 1 : -1);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="slider"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={name}
+        aria-disabled={disabled}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={currentValue}
+        aria-valuetext={displayValue}
+        data-size={size}
+        className={cn(
+          "ui-encoder",
+          size === "sm" && "ui-encoder--size-sm",
+          size === "md" && "ui-encoder--size-md",
+          disabled && "ui-encoder--disabled",
+          className,
+        )}
+        style={
+          {
+            ...style,
+            "--ui-encoder-angle": `${-135 + progress * 270}deg`,
+            "--ui-encoder-fill": `${progress * 270}deg`,
+          } as CSSProperties
+        }
+        onKeyDown={handleKeyDown}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+        onWheel={handleWheel}
+        {...rest}
+      >
+        <div className="ui-encoder__dial">
+          <span className="ui-encoder__indicator" aria-hidden />
+        </div>
+        <span className="ui-encoder__value">{displayValue}</span>
+      </div>
+    );
+  },
+);
+
+Encoder.displayName = "Encoder";
+
+export { Encoder };