@blibliki/ui 0.9.2

package/src/components/fader.tsx

@@ -0,0 +1,230 @@
+import { throttle } from "@blibliki/utils";
+import { ChangeEvent } from "react";
+import { cn } from "@/lib/cn";
+import { Button } from "./button";
+
+export type TOrientation = "vertical" | "horizontal";
+
+export type MarkProps = {
+  value: number;
+  label: string;
+};
+
+export interface FaderProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
+  name: string;
+  onChange: (value: number, calculatedValue: number) => void;
+  defaultValue?: number;
+  value?: number;
+  orientation?: TOrientation;
+  marks?: readonly MarkProps[];
+  hideMarks?: boolean;
+  max?: number;
+  min?: number;
+  step?: number;
+  exp?: number;
+}
+
+const calcValue = (
+  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;
+  const curved = Math.pow(normalizedSlider, exp);
+
+  return min + curved * range;
+};
+
+const revCalcValue = (
+  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;
+  const sliderPosition = Math.pow(normalizedValue, inverseExp);
+
+  return min + sliderPosition * range;
+};
+
+function formatTooltipValue(value?: number) {
+  if (value === undefined) return "";
+  if (Number.isInteger(value)) return `${value}`;
+  return value.toFixed(2);
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, value));
+
+function Fader(props: FaderProps) {
+  const {
+    className,
+    name,
+    onChange,
+    value,
+    defaultValue,
+    marks,
+    hideMarks = false,
+    exp,
+    min = 0,
+    orientation = "vertical",
+    max: maxProp,
+    step: stepProp,
+    ...rest
+  } = props;
+
+  const marksCount = marks?.length ?? 0;
+  const hasMarkedScale = marksCount > 0;
+  const max = maxProp ?? (hasMarkedScale ? marksCount - 1 : 1);
+  const step = stepProp ?? (hasMarkedScale ? 1 : 0.01);
+
+  const sliderValue =
+    value !== undefined
+      ? clamp(revCalcValue(value, min, max, exp), min, max)
+      : undefined;
+  const sliderDefaultValue =
+    defaultValue !== undefined ? clamp(defaultValue, min, max) : min;
+
+  const onRangeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextSliderValue = clamp(Number(event.target.value), min, max);
+    onChange(nextSliderValue, calcValue(nextSliderValue, min, max, exp));
+  };
+  const debouncedOnChange = throttle(onRangeChange, 1000);
+
+  const onMarkClick = (markValue: number) => () => {
+    const nextSliderValue = clamp(markValue, min, max);
+    onChange(nextSliderValue, calcValue(nextSliderValue, min, max, exp));
+  };
+  const getHorizontalMarkPosition = (markValue: number) => {
+    if (max === min) return 0;
+    return ((clamp(markValue, min, max) - min) / (max - min)) * 100;
+  };
+
+  const hasOnlyZeroMarks = marks
+    ? marks.every((mark) => mark.value === 0)
+    : false;
+  const showTooltip = hideMarks || !marks || hasOnlyZeroMarks;
+  const currentSliderValue = sliderValue ?? sliderDefaultValue;
+  const activeMark = marks?.find((mark) => mark.value === currentSliderValue);
+  const currentDisplayValue =
+    value ?? calcValue(currentSliderValue, min, max, exp);
+  const tooltipText =
+    activeMark?.label ?? formatTooltipValue(currentDisplayValue);
+
+  const rangeValueProps =
+    sliderValue !== undefined
+      ? ({ value: sliderValue } as const)
+      : ({ defaultValue: sliderDefaultValue } as const);
+
+  return (
+    <div
+      className={cn(
+        "ui-fader nodrag",
+        orientation === "horizontal" && "ui-fader--horizontal",
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        className={cn(
+          "ui-fader__control",
+          orientation === "horizontal"
+            ? "ui-fader__control--horizontal"
+            : "ui-fader__control--vertical",
+        )}
+      >
+        <input
+          type="range"
+          min={min}
+          max={max}
+          {...rangeValueProps}
+          step={step}
+          aria-label={name}
+          className={cn(
+            "ui-fader__range",
+            orientation === "horizontal"
+              ? "ui-fader__range--horizontal"
+              : "ui-fader__range--vertical",
+          )}
+          onChange={debouncedOnChange}
+        />
+
+        {showTooltip && (
+          <div
+            className={cn(
+              "ui-fader__tooltip",
+              orientation === "horizontal"
+                ? "ui-fader__tooltip--horizontal"
+                : "ui-fader__tooltip--vertical",
+            )}
+          >
+            {tooltipText}
+          </div>
+        )}
+
+        {marks && !hideMarks && (
+          <div
+            className={cn(
+              "ui-fader__marks",
+              orientation === "horizontal"
+                ? "ui-fader__marks--horizontal"
+                : "ui-fader__marks--vertical",
+              marks.length === 1 && "ui-fader__marks--single",
+            )}
+          >
+            {marks.map((mark, index) => (
+              <Button
+                key={`${mark.value}-${index}`}
+                size="sm"
+                variant="text"
+                color="secondary"
+                className={cn(
+                  "ui-fader__mark-button",
+                  orientation === "horizontal" &&
+                    "ui-fader__mark-button--horizontal",
+                  orientation === "horizontal" &&
+                    mark.value <= min &&
+                    "ui-fader__mark-button--horizontal-start",
+                  orientation === "horizontal" &&
+                    mark.value >= max &&
+                    "ui-fader__mark-button--horizontal-end",
+                )}
+                style={
+                  orientation === "horizontal"
+                    ? { left: `${getHorizontalMarkPosition(mark.value)}%` }
+                    : undefined
+                }
+                onClick={onMarkClick(mark.value)}
+              >
+                <span className="ui-fader__mark-dot" aria-hidden />
+                {mark.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="ui-fader__label-row">
+        <span className="ui-fader__label-dot" aria-hidden />
+        <span className="ui-fader__label">{name}</span>
+      </div>
+    </div>
+  );
+}
+
+Fader.displayName = "Fader";
+
+export { Fader };

package/src/components/icon-button.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cn } from "@/lib/cn";
+import { Button, type ButtonProps } from "./button";
+
+type IconButtonSize = "xs" | "sm" | "md";
+
+const sizeClass: Record<IconButtonSize, string> = {
+  xs: "ui-icon-button--size-xs",
+  sm: "ui-icon-button--size-sm",
+  md: "ui-icon-button--size-md",
+};
+
+export interface IconButtonProps extends Omit<
+  ButtonProps,
+  "children" | "size" | "asChild"
+> {
+  icon: React.ReactNode;
+  size?: IconButtonSize;
+  "aria-label": string;
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      icon,
+      size = "md",
+      variant = "text",
+      color = "secondary",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        color={color}
+        size="icon"
+        className={cn("ui-icon-button", sizeClass[size], className)}
+        {...props}
+      >
+        {icon}
+      </Button>
+    );
+  },
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton };

package/src/components/input.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const inputVariants = cva("ui-input", {
+  variants: {
+    size: {
+      sm: "ui-input--size-sm",
+      md: "ui-input--size-md",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export interface InputProps
+  extends
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", size, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        data-size={size ?? "md"}
+        className={cn(inputVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/src/components/label.tsx

@@ -0,0 +1,14 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/cn";
+
+function Label({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root className={cn("ui-label", className)} {...props} />
+  );
+}
+
+export { Label };

package/src/components/select.tsx

@@ -0,0 +1,342 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import type { ComponentProps } from "react";
+import { useMemo } from "react";
+import { cn } from "@/lib/cn";
+
+function SelectChevronDownIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M4 6.5 8 10.5 12 6.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SelectChevronUpIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+      <path
+        d="M4 9.5 8 5.5 12 9.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SelectCheckIcon(props: 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 Select(props: ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root {...props} />;
+}
+
+function SelectGroup(props: ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group {...props} />;
+}
+
+function SelectValue({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Value>) {
+  return (
+    <SelectPrimitive.Value
+      className={cn("ui-select-value", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "md",
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "md";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-size={size}
+      className={cn("ui-select-trigger", className)}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <SelectChevronDownIcon className="ui-select-chevron" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        position={position}
+        className={cn(
+          "ui-select-content",
+          position === "popper" && "ui-select-content--popper",
+          className,
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "ui-select-viewport",
+            position === "popper" && "ui-select-viewport--popper",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      className={cn("ui-select-label", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      className={cn("ui-select-item", className)}
+      {...props}
+    >
+      <span className="ui-select-indicator" aria-hidden>
+        <SelectPrimitive.ItemIndicator>
+          <SelectCheckIcon className="ui-select-indicator-icon" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText className="ui-select-item-text">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("ui-select-separator", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn("ui-select-scroll-button", className)}
+      {...props}
+    >
+      <SelectChevronUpIcon className="ui-select-scroll-icon" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn("ui-select-scroll-button", className)}
+      {...props}
+    >
+      <SelectChevronDownIcon className="ui-select-scroll-icon" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+type OptionSelectValue = string | number;
+type OptionSelectValueOption = { name: string; value: OptionSelectValue };
+type OptionSelectIdOption = { id: string; name: string };
+type OptionSelectInput =
+  | readonly string[]
+  | readonly number[]
+  | readonly OptionSelectValueOption[]
+  | readonly OptionSelectIdOption[];
+
+export interface OptionSelectProps<T extends OptionSelectValue | undefined> {
+  value: T;
+  options: OptionSelectInput;
+  label?: string;
+  contentClassName?: string;
+  triggerClassName?: string;
+  disabled?: boolean;
+  onChange: (value: T) => void;
+}
+
+function isValueOption(value: unknown): value is OptionSelectValueOption {
+  return Boolean(
+    value &&
+    typeof value === "object" &&
+    "name" in value &&
+    "value" in value &&
+    (typeof (value as { value: unknown }).value === "string" ||
+      typeof (value as { value: unknown }).value === "number"),
+  );
+}
+
+function isIdOption(value: unknown): value is OptionSelectIdOption {
+  return Boolean(
+    value &&
+    typeof value === "object" &&
+    "id" in value &&
+    "name" in value &&
+    typeof (value as { id: unknown }).id === "string",
+  );
+}
+
+function OptionSelect<T extends OptionSelectValue | undefined>({
+  value,
+  options,
+  label,
+  contentClassName,
+  triggerClassName,
+  disabled = false,
+  onChange,
+}: OptionSelectProps<T>) {
+  const normalizedOptions = useMemo(() => {
+    if (!options.length) return [];
+
+    const first = options[0];
+    if (typeof first === "string" || typeof first === "number") {
+      return (options as readonly OptionSelectValue[]).map((option) => ({
+        name: option.toString(),
+        value: option,
+      }));
+    }
+
+    if (isValueOption(first)) {
+      return Array.from(options as readonly OptionSelectValueOption[]);
+    }
+
+    if (isIdOption(first)) {
+      return (options as readonly OptionSelectIdOption[]).map((option) => ({
+        name: option.name,
+        value: option.id,
+      }));
+    }
+
+    return [];
+  }, [options]);
+
+  const valueKind = useMemo<"number" | "string">(() => {
+    if (!normalizedOptions.length) {
+      return typeof value === "number" ? "number" : "string";
+    }
+    return typeof normalizedOptions[0]?.value === "number"
+      ? "number"
+      : "string";
+  }, [normalizedOptions, value]);
+
+  const onValueChange = (newValue: string) => {
+    if (valueKind === "number") {
+      onChange(Number(newValue) as T);
+      return;
+    }
+    onChange(newValue as T);
+  };
+
+  const selectedValue =
+    value !== undefined && value !== "" ? value.toString() : undefined;
+  const placeholder = label && label.length > 0 ? label : "Select...";
+  const longestDisplayLength = useMemo(() => {
+    const longestOption = normalizedOptions.reduce((maxLength, option) => {
+      const length = option.name.length;
+      return Math.max(maxLength, length);
+    }, 0);
+
+    return Math.max(placeholder.length, longestOption);
+  }, [normalizedOptions, placeholder]);
+  const autoWidthCh = Math.min(Math.max(longestDisplayLength + 6, 18), 40);
+
+  const triggerStyle = triggerClassName
+    ? undefined
+    : ({
+        width: `clamp(10rem, ${autoWidthCh}ch, 26rem)`,
+        maxWidth: "100%",
+      } as const);
+
+  return (
+    <Select
+      value={selectedValue}
+      onValueChange={onValueChange}
+      disabled={disabled}
+    >
+      <SelectTrigger className={triggerClassName} style={triggerStyle}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={contentClassName}>
+        <SelectGroup>
+          <SelectLabel>Select...</SelectLabel>
+          {normalizedOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value.toString()}>
+              {option.name}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export {
+  OptionSelect,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};