@godxjp/ui 6.0.0 → 6.0.1

package/src/components/data-entry/cascader.tsx

@@ -1,305 +0,0 @@
-import * as React from "react";
-import { Check, ChevronRight, ChevronsUpDown, X } from "lucide-react";
-
-import { useTranslation } from "../../i18n/use-translation";
-import { cn } from "../../lib/utils";
-import { Button } from "../general/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
-import { ScrollArea, ScrollBar } from "../data-display/scroll-area";
-import { Checkbox } from "./checkbox";
-import { Command, CommandInput } from "./command";
-import {
-  filterTreeOptions,
-  formatPathLabels,
-  getNodeByPath,
-  normalizeTreeOptions,
-  pathKey,
-  pathsEqual,
-  type NormalizedTreeOption,
-} from "./tree-utils";
-import type { CascaderProp } from "../../props/components/data-entry.prop";
-
-export type {
-  CascaderProp,
-  CascaderProp as CascaderProps,
-} from "../../props/components/data-entry.prop";
-export type { TreeOption, TreeFieldNames } from "./tree-utils";
-
-function pathInValues(path: string[], values: string[][]): boolean {
-  return values.some((v) => pathsEqual(v, path));
-}
-
-function togglePath(values: string[][], path: string[]): string[][] {
-  if (pathInValues(path, values)) return values.filter((v) => !pathsEqual(v, path));
-  return [...values, path];
-}
-
-export function Cascader({
-  options: optionsProp,
-  value,
-  defaultValue,
-  onChange,
-  multiple,
-  changeOnSelect,
-  showSearch,
-  placeholder,
-  disabled,
-  className,
-  id,
-  expandTrigger = "click",
-  fieldNames,
-  allowClear = true,
-}: CascaderProp) {
-  const { t } = useTranslation();
-  const options = React.useMemo(
-    () => normalizeTreeOptions(optionsProp as Record<string, unknown>[], fieldNames),
-    [optionsProp, fieldNames],
-  );
-
-  const [open, setOpen] = React.useState(false);
-  const [activePath, setActivePath] = React.useState<string[]>([]);
-  const [search, setSearch] = React.useState("");
-
-  const isControlledSingle = !multiple && value !== undefined;
-  const isControlledMulti = multiple && value !== undefined;
-  const [internalSingle, setInternalSingle] = React.useState<string[]>(
-    multiple ? [] : ((defaultValue as string[] | undefined) ?? []),
-  );
-  const [internalMulti, setInternalMulti] = React.useState<string[][]>(
-    (defaultValue as string[][] | undefined) ?? [],
-  );
-
-  const singleValue = isControlledSingle ? (value as string[]) : internalSingle;
-  const multiValue = isControlledMulti ? (value as string[][]) : internalMulti;
-
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
-
-  const displayLabel = React.useMemo(() => {
-    if (multiple) {
-      if (!multiValue.length) return null;
-      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
-    }
-    if (!singleValue.length) return null;
-    return formatPathLabels(getNodeByPath(options, singleValue));
-  }, [multiple, multiValue, singleValue, options]);
-
-  const commitSingle = (path: string[]) => {
-    if (!isControlledSingle) setInternalSingle(path);
-    onChange?.(path, getNodeByPath(options, path));
-    setOpen(false);
-    setActivePath([]);
-    setSearch("");
-  };
-
-  const commitMulti = (paths: string[][]) => {
-    if (!isControlledMulti) setInternalMulti(paths);
-    onChange?.(
-      paths,
-      paths.map((p) => getNodeByPath(options, p)),
-    );
-  };
-
-  const columns: NormalizedTreeOption[][] = React.useMemo(() => {
-    const cols: NormalizedTreeOption[][] = [options];
-    for (const segment of activePath) {
-      const col = cols.at(-1);
-      const node = col?.find((n) => n.value === segment);
-      if (node?.children?.length) cols.push(node.children);
-      else break;
-    }
-    return cols;
-  }, [options, activePath]);
-
-  const handleSelectNode = (node: NormalizedTreeOption, path: string[]) => {
-    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-    if (hasChildren && !changeOnSelect) {
-      setActivePath(path);
-      return;
-    }
-    if (multiple) {
-      commitMulti(togglePath(multiValue, path));
-      return;
-    }
-    commitSingle(path);
-  };
-
-  const isSearching = showSearch && search.trim().length > 0;
-
-  const searchResults = React.useMemo(
-    () => (isSearching ? filterTreeOptions(options, search) : []),
-    [options, search, isSearching],
-  );
-
-  const handleOpenChange = (next: boolean) => {
-    setOpen(next);
-    if (!next) {
-      setSearch("");
-      setActivePath([]);
-    }
-  };
-
-  const clearValue = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (multiple) commitMulti([]);
-    else commitSingle([]);
-  };
-
-  const renderCascadeColumns = () => (
-    <ScrollArea className="w-full">
-      <div className="flex max-h-[min(280px,50vh)]">
-        {columns.map((col, colIndex) => (
-          <ul
-            key={colIndex}
-            className="min-w-[9rem] border-r last:border-r-0"
-            onMouseLeave={
-              expandTrigger === "hover"
-                ? () => setActivePath(activePath.slice(0, colIndex))
-                : undefined
-            }
-          >
-            {col.map((node) => {
-              const path = [...activePath.slice(0, colIndex), node.value];
-              const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-              const active = activePath[colIndex] === node.value;
-              const selected = multiple
-                ? pathInValues(path, multiValue)
-                : pathsEqual(path, singleValue);
-
-              return (
-                <li key={node.value}>
-                  <button
-                    type="button"
-                    disabled={node.disabled}
-                    className={cn(
-                      "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
-                      "hover:bg-accent hover:text-accent-foreground",
-                      active && "bg-accent/70 font-medium",
-                      node.disabled && "pointer-events-none opacity-50",
-                    )}
-                    onMouseEnter={
-                      expandTrigger === "hover" && hasChildren
-                        ? () => setActivePath(path)
-                        : undefined
-                    }
-                    onClick={() => !node.disabled && handleSelectNode(node, path)}
-                  >
-                    {multiple && (
-                      <Checkbox
-                        checked={selected}
-                        disabled={node.disabled}
-                        className="mr-1"
-                        aria-hidden
-                        tabIndex={-1}
-                      />
-                    )}
-                    {!multiple && selected && (
-                      <Check className="mr-1 size-4 shrink-0" aria-hidden="true" />
-                    )}
-                    <span className="flex-1 truncate text-left">{node.label}</span>
-                    {hasChildren && (
-                      <ChevronRight className="size-4 shrink-0 opacity-50" aria-hidden="true" />
-                    )}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>
-        <Button
-          id={id}
-          type="button"
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn(
-            "w-full justify-between font-normal",
-            !displayLabel && "text-muted-foreground",
-            className,
-          )}
-        >
-          <span className="truncate">{displayLabel ?? resolvedPlaceholder}</span>
-          <span className="ml-2 flex shrink-0 items-center gap-1">
-            {allowClear && displayLabel && !disabled && (
-              <X
-                className="size-4 opacity-50 hover:opacity-100"
-                aria-hidden="true"
-                onClick={clearValue}
-              />
-            )}
-            <ChevronsUpDown className="size-4 opacity-50" aria-hidden="true" />
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-auto min-w-[var(--radix-popover-trigger-width)] p-0"
-        align="start"
-      >
-        {showSearch && (
-          <div className="border-b p-2">
-            <Command shouldFilter={false}>
-              <CommandInput
-                placeholder={t("dataEntry.cascader.searchPlaceholder")}
-                value={search}
-                onValueChange={setSearch}
-              />
-            </Command>
-          </div>
-        )}
-        {isSearching ? (
-          <ScrollArea className="max-h-[min(300px,50vh)]">
-            <div className="p-1">
-              {searchResults.length === 0 ? (
-                <p className="text-muted-foreground py-6 text-center text-sm">
-                  {t("dataEntry.cascader.empty")}
-                </p>
-              ) : (
-                searchResults.map(({ path, labels }) => {
-                  const label = labels.join(" / ");
-                  const selected = multiple
-                    ? pathInValues(path, multiValue)
-                    : pathsEqual(path, singleValue);
-                  return (
-                    <button
-                      key={pathKey(path)}
-                      type="button"
-                      className={cn(
-                        "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-                        "hover:bg-accent hover:text-accent-foreground",
-                        selected && "bg-accent/60",
-                      )}
-                      onClick={() => handleSelectNode({ value: path.at(-1)!, label }, path)}
-                    >
-                      {multiple ? (
-                        <Checkbox checked={selected} className="mr-2" aria-hidden tabIndex={-1} />
-                      ) : (
-                        <Check
-                          className={cn(
-                            "mr-2 size-4 shrink-0",
-                            selected ? "opacity-100" : "opacity-0",
-                          )}
-                          aria-hidden="true"
-                        />
-                      )}
-                      <span className="truncate text-left">{label}</span>
-                    </button>
-                  );
-                })
-              )}
-            </div>
-          </ScrollArea>
-        ) : (
-          renderCascadeColumns()
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/data-entry/checkbox-group.tsx

@@ -1,90 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Checkbox } from "./checkbox";
-import { ChoiceField } from "./choice-field";
-import { choiceGroupClassName, type ChoiceOption } from "./choice-option";
-import type { CheckboxGroupProp } from "../../props/components/data-entry.prop";
-
-export type {
-  CheckboxGroupProp,
-  CheckboxGroupProp as CheckboxGroupProps,
-} from "../../props/components/data-entry.prop";
-
-function useControllableArray(
-  controlled: string[] | undefined,
-  defaultValue: string[],
-): [string[], (next: string[]) => void] {
-  const [internal, setInternal] = React.useState(defaultValue);
-  const value = controlled ?? internal;
-  const setValue = React.useCallback(
-    (next: string[]) => {
-      if (controlled === undefined) setInternal(next);
-    },
-    [controlled],
-  );
-  return [value, setValue];
-}
-
-export function CheckboxGroup({
-  value: controlledValue,
-  defaultValue = [],
-  onChange,
-  options,
-  orientation = "vertical",
-  disabled,
-  name,
-  className,
-  children,
-}: CheckboxGroupProp) {
-  const reactId = React.useId();
-  const [value, setValue] = useControllableArray(controlledValue, defaultValue);
-
-  const toggle = (optionValue: string) => {
-    const next = value.includes(optionValue)
-      ? value.filter((v) => v !== optionValue)
-      : [...value, optionValue];
-    setValue(next);
-    onChange?.(next);
-  };
-
-  if (options && options.length > 0) {
-    return (
-      <div
-        role="group"
-        aria-disabled={disabled ? true : undefined}
-        data-orientation={orientation}
-        className={choiceGroupClassName(orientation, className)}
-      >
-        {options.map((opt: ChoiceOption, index) => {
-          const id = `${reactId}-${opt.value}-${index}`;
-          const checked = value.includes(opt.value);
-          return (
-            <ChoiceField key={opt.value} id={id} label={opt.label} description={opt.description}>
-              <Checkbox
-                id={id}
-                name={name}
-                value={opt.value}
-                checked={checked}
-                disabled={Boolean(disabled) || Boolean(opt.disabled)}
-                onCheckedChange={() => {
-                  toggle(opt.value);
-                }}
-              />
-            </ChoiceField>
-          );
-        })}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      role="group"
-      data-orientation={orientation}
-      className={cn(choiceGroupClassName(orientation), className)}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/data-entry/checkbox.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { CheckboxGroup } from "./checkbox-group";
-
-const CheckboxRoot = React.forwardRef<
-  React.ComponentRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    data-slot="checkbox"
-    className={cn(
-      "peer ui-checkbox focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="ui-choice-indicator">
-      <Check className="ui-checkbox-icon" aria-hidden="true" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
-
-/** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (Ant Design style). */
-export const Checkbox = Object.assign(CheckboxRoot, {
-  Group: CheckboxGroup,
-});

package/src/components/data-entry/choice-field.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Label } from "./label";
-
-interface ChoiceFieldProps {
-  id: string;
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  className?: string;
-  children: React.ReactNode;
-}
-
-/** Label + optional description beside a checkbox/radio control. */
-export function ChoiceField({ id, label, description, className, children }: ChoiceFieldProps) {
-  return (
-    <div className={cn("ui-choice-field", className)}>
-      <div className="ui-choice-control">{children}</div>
-      <div className="ui-choice-content">
-        <Label htmlFor={id} className="ui-choice-label">
-          {label}
-        </Label>
-        {description ? <p className="ui-choice-description">{description}</p> : null}
-      </div>
-    </div>
-  );
-}

package/src/components/data-entry/choice-option.ts

@@ -1,20 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-/** Shared option shape — Ant Design `CheckboxOptionType` / `Radio` options. */
-export type ChoiceOption = {
-  label: React.ReactNode;
-  value: string;
-  disabled?: boolean;
-  description?: React.ReactNode;
-};
-
-export type ChoiceOrientation = "horizontal" | "vertical";
-
-export function choiceGroupClassName(
-  _orientation: ChoiceOrientation = "vertical",
-  className?: string,
-) {
-  return cn("ui-choice-group", className);
-}

package/src/components/data-entry/color-picker.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation";
-import { cn } from "../../lib/utils";
-import { controlIconClass } from "../../lib/control-styles";
-import type { ColorPickerProp } from "../../props/components/data-entry.prop";
-import { Input } from "./input";
-
-export type {
-  ColorPickerProp,
-  ColorPickerProp as ColorPickerProps,
-} from "../../props/components/data-entry.prop";
-
-const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-
-function normalizeHex(value: string): string {
-  if (!value.startsWith("#")) return `#${value}`;
-  return value;
-}
-
-export function ColorPicker({
-  value = "#2563eb",
-  onChange,
-  disabled,
-  className,
-  id,
-  showHexInput = true,
-}: ColorPickerProp) {
-  const { t } = useTranslation();
-  const [draft, setDraft] = React.useState<string | null>(null);
-  const display = draft ?? value;
-
-  const commit = (next: string) => {
-    const normalized = normalizeHex(next);
-    if (!HEX_PATTERN.test(normalized)) {
-      setDraft(null);
-      return;
-    }
-    setDraft(null);
-    onChange?.(normalized);
-  };
-
-  return (
-    <div className={cn("ui-color-picker", className)}>
-      <div className={cn("ui-color-picker-swatch", controlIconClass)}>
-        <div
-          className="ui-color-picker-preview"
-          style={{ backgroundColor: HEX_PATTERN.test(display) ? display : value }}
-          aria-hidden="true"
-        />
-        <input
-          id={id}
-          type="color"
-          value={HEX_PATTERN.test(display) ? display : value}
-          disabled={disabled}
-          onChange={(event) => commit(event.target.value)}
-          className="ui-color-picker-input"
-          aria-label={t("dataEntry.colorPicker.ariaLabel")}
-        />
-      </div>
-      {showHexInput && (
-        <Input
-          value={display}
-          disabled={disabled}
-          onChange={(event) => setDraft(event.target.value)}
-          onBlur={() => commit(display)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") commit(display);
-          }}
-          className="ui-color-picker-hex"
-          spellCheck={false}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/data-entry/command.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { controlIconLeadingClass } from "../../lib/control-styles";
-
-export const Command = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive ref={ref} className={cn("ui-command", className)} {...props} />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-export const CommandInput = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  // cmdk uses this non-standard attribute for input wrapper styling
-  // eslint-disable-next-line react/no-unknown-property -- cmdk convention
-  <div className="ui-command-input-wrapper" cmdk-input-wrapper="">
-    <Search className={cn(controlIconLeadingClass, "ui-command-search-icon")} aria-hidden="true" />
-    <CommandPrimitive.Input ref={ref} className={cn("ui-command-input", className)} {...props} />
-  </div>
-));
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-export const CommandList = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List ref={ref} className={cn("ui-command-list", className)} {...props} />
-));
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-export const CommandEmpty = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="ui-command-empty" {...props} />);
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-export const CommandGroup = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group ref={ref} className={cn("ui-command-group", className)} {...props} />
-));
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-export const CommandItem = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item ref={ref} className={cn("ui-command-item", className)} {...props} />
-));
-CommandItem.displayName = CommandPrimitive.Item.displayName;

package/src/components/data-entry/country-select.tsx

@@ -1,88 +0,0 @@
-import { cn } from "../../lib/utils";
-import type {
-  CountryOptionLabelProp,
-  CountrySelectProp,
-} from "../../props/components/data-entry.prop";
-import { Inline } from "../layout/inline";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-
-export type {
-  CountryOptionProp,
-  CountryOptionLabelProp,
-  CountrySelectProp,
-  CountrySelectProp as CountrySelectProps,
-} from "../../props/components/data-entry.prop";
-
-/** Flag + name (+ optional code) — accepts a select-option or a country summary. */
-export function CountryOptionLabel({
-  country,
-  showCode = false,
-  className,
-}: CountryOptionLabelProp) {
-  const code = country.value ?? country.code ?? "";
-  const text =
-    country.nativeName != null && country.nativeName !== ""
-      ? `${country.name} (${country.nativeName})`
-      : country.name;
-
-  return (
-    <Inline gap="xs" className={cn("items-center", className)}>
-      {country.flagSvgPath != null && country.flagSvgPath !== "" && (
-        <img
-          src={country.flagSvgPath}
-          alt=""
-          className="h-3 w-5 shrink-0 rounded-sm object-cover"
-          aria-hidden="true"
-        />
-      )}
-      <span className="truncate">
-        {text}
-        {showCode && code !== "" && <span className="text-muted-foreground"> · {code}</span>}
-      </span>
-    </Inline>
-  );
-}
-
-/** Country picker on top of Select; submits the country code via a hidden form value. */
-export function CountrySelect({
-  id,
-  name,
-  options,
-  defaultValue,
-  required = false,
-  allowEmpty = false,
-  emptyLabel = "—",
-  placeholder,
-  invalid = false,
-}: CountrySelectProp) {
-  const emptyValue = "0";
-  const resolvedDefault = defaultValue && defaultValue !== "" ? defaultValue : emptyValue;
-
-  return (
-    <Select
-      name={name}
-      defaultValue={allowEmpty ? resolvedDefault : (defaultValue ?? options[0]?.value)}
-    >
-      <SelectTrigger id={id} className="w-full" aria-invalid={invalid} aria-required={required}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          {allowEmpty && <SelectItem value={emptyValue}>{emptyLabel}</SelectItem>}
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value ?? ""}>
-              <CountryOptionLabel country={option} />
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-}