@godxjp/ui 6.0.0 → 6.0.2

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

@@ -1,69 +0,0 @@
-import * as React from "react";
-import { CalendarIcon } from "lucide-react";
-import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
-import { formatDate } from "../../lib/datetime";
-import { cn } from "../../lib/utils";
-import { Button } from "../general/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
-import { Calendar } from "./calendar";
-import type { DatePickerProp } from "../../props/components/data-entry.prop";
-
-export type {
-  DatePickerProp,
-  DatePickerProp as DatePickerProps,
-} from "../../props/components/data-entry.prop";
-
-export function DatePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  locale: localeProp,
-  fromDate,
-  toDate,
-}: DatePickerProp) {
-  const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder");
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          id={id}
-          type="button"
-          variant="outline"
-          disabled={disabled}
-          className={cn(
-            "w-full justify-start text-left font-normal",
-            !value && "text-muted-foreground",
-            className,
-          )}
-        >
-          <CalendarIcon className="mr-2 size-4 shrink-0" aria-hidden="true" />
-          {value ? formatDate(value, { kind: "calendar" }) : resolvedPlaceholder}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={value}
-          onSelect={(date) => {
-            onChange?.(date);
-            setOpen(false);
-          }}
-          locale={dayPickerLocale}
-          disabled={[
-            ...(fromDate ? [{ before: fromDate }] : []),
-            ...(toDate ? [{ after: toDate }] : []),
-          ]}
-          startMonth={fromDate}
-          endMonth={toDate}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/data-entry/date-range-picker.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-import { CalendarIcon } from "lucide-react";
-import type { DateRange } from "react-day-picker";
-import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
-import { formatDate } from "../../lib/datetime";
-import { cn } from "../../lib/utils";
-import { Button } from "../general/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
-import { Calendar } from "./calendar";
-import type { DateRangePickerProp } from "../../props/components/data-entry.prop";
-
-export type {
-  DateRangePickerProp,
-  DateRangePickerProp as DateRangePickerProps,
-} from "../../props/components/data-entry.prop";
-
-function formatRange(range: DateRange | undefined): string {
-  if (!range?.from) return "";
-  const fmt = (d: Date) => formatDate(d, { kind: "calendar" });
-  if (!range.to) return fmt(range.from);
-  return `${fmt(range.from)} – ${fmt(range.to)}`;
-}
-
-export function DateRangePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  locale: localeProp,
-  fromDate,
-  toDate,
-}: DateRangePickerProp) {
-  const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
-  const label = formatRange(value);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder");
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          id={id}
-          type="button"
-          variant="outline"
-          disabled={disabled}
-          className={cn(
-            "w-full justify-start text-left font-normal",
-            !label && "text-muted-foreground",
-            className,
-          )}
-        >
-          <CalendarIcon className="mr-2 size-4 shrink-0" aria-hidden="true" />
-          {label || resolvedPlaceholder}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="range"
-          selected={value}
-          onSelect={onChange}
-          locale={dayPickerLocale}
-          disabled={[
-            ...(fromDate ? [{ before: fromDate }] : []),
-            ...(toDate ? [{ after: toDate }] : []),
-          ]}
-          startMonth={fromDate}
-          endMonth={toDate}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

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

@@ -1,59 +0,0 @@
-import * as React from "react";
-
-import { Label } from "../data-entry/label";
-import { cn } from "../../lib/utils";
-import type { FormFieldProp } from "../../props/components/data-entry.prop";
-
-export type {
-  FormFieldProp,
-  FormFieldProp as FormFieldProps,
-} from "../../props/components/data-entry.prop";
-
-export function FormField({
-  id,
-  label,
-  required,
-  helper,
-  error,
-  labelAddon,
-  className,
-  children,
-}: FormFieldProp) {
-  const helperId = helper && !error ? `${id}-helper` : undefined;
-  const errorId = error ? `${id}-error` : undefined;
-  const describedBy = errorId ?? helperId;
-
-  const childWithA11y = React.isValidElement(children)
-    ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
-        "aria-describedby": describedBy,
-        "aria-required": required ? true : undefined,
-        "aria-invalid": !!error || undefined,
-      })
-    : children;
-
-  return (
-    <div className={cn("ui-stack-sm", className)}>
-      <div className="flex items-center gap-1">
-        <Label htmlFor={id} className="ui-inline-xs">
-          <span>{label}</span>
-          {required && (
-            <span aria-hidden="true" className="text-destructive">
-              *
-            </span>
-          )}
-        </Label>
-        {labelAddon}
-      </div>
-      {childWithA11y}
-      {error ? (
-        <p id={errorId} role="alert" className="text-destructive text-xs">
-          {error}
-        </p>
-      ) : helper ? (
-        <p id={helperId} className="text-muted-foreground text-xs">
-          {helper}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/src/components/data-entry/index.ts

@@ -1,62 +0,0 @@
-export { Input } from "./input";
-export type { InputProps } from "./input";
-export { Label } from "./label";
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-export { Checkbox } from "./checkbox";
-export { CheckboxGroup } from "./checkbox-group";
-export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio";
-export { Textarea } from "./textarea";
-export type { TextareaProps } from "./textarea";
-export { FormField } from "./form-field";
-export { SwitchField } from "./switch-field";
-export type { SwitchFieldProps } from "./switch-field";
-export { CountrySelect, CountryOptionLabel } from "./country-select";
-export type {
-  CountrySelectProps,
-  CountryOptionProp,
-  CountryOptionLabelProp,
-} from "./country-select";
-export { SearchInput } from "./search-input";
-export { Switch } from "./switch";
-export type { SwitchProps } from "./switch";
-export { Slider } from "./slider";
-export type { SliderProps } from "./slider";
-export { Calendar } from "./calendar";
-export type { CalendarProps } from "./calendar";
-export { DatePicker } from "./date-picker";
-export type { DatePickerProps } from "./date-picker";
-export { DateRangePicker } from "./date-range-picker";
-export type { DateRangePickerProps } from "./date-range-picker";
-export { TimePicker } from "./time-picker";
-export type { TimePickerProps } from "./time-picker";
-export { ColorPicker } from "./color-picker";
-export type { ColorPickerProps } from "./color-picker";
-export { Autocomplete } from "./autocomplete";
-export type { AutocompleteProps } from "./autocomplete";
-export { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from "./upload";
-export type { UploadProps, UploadFileItem, UploadVariant, UploadCommitAction } from "./upload";
-export { Cascader } from "./cascader";
-export type { CascaderProps, TreeOption, TreeFieldNames } from "./cascader";
-export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select";
-export type { TreeSelectProps } from "./tree-select";
-export { Transfer } from "./transfer";
-export type { TransferProps, TransferItemProp } from "./transfer";
-export {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command";

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

@@ -1,25 +0,0 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-export const Label = React.forwardRef<
-  React.ComponentRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    data-slot="label"
-    className={cn(
-      "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
-      labelVariants(),
-      className,
-    )}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;

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

@@ -1,109 +0,0 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import { ChoiceField } from "./choice-field";
-import { choiceGroupClassName, type ChoiceOption } from "./choice-option";
-import type { RadioGroupProp } from "../../props/components/data-entry.prop";
-
-export type {
-  RadioGroupProp,
-  RadioGroupProp as RadioGroupProps,
-} from "../../props/components/data-entry.prop";
-
-const RadioGroupRoot = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <RadioGroupPrimitive.Root
-    ref={ref}
-    data-slot="radio-group"
-    className={cn("ui-choice-group", className)}
-    {...props}
-  />
-));
-RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioItem = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <RadioGroupPrimitive.Item
-    ref={ref}
-    data-slot="radio-group-item"
-    className={cn(
-      "ui-radio focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <RadioGroupPrimitive.Indicator
-      data-slot="radio-group-indicator"
-      className="ui-choice-indicator"
-    >
-      <Circle className="ui-radio-icon" aria-hidden="true" />
-    </RadioGroupPrimitive.Indicator>
-  </RadioGroupPrimitive.Item>
-));
-RadioItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-function RadioGroupOptions({
-  value,
-  defaultValue,
-  onValueChange,
-  options,
-  orientation = "vertical",
-  disabled,
-  name,
-  className,
-  children,
-}: RadioGroupProp) {
-  const reactId = React.useId();
-
-  if (options && options.length > 0) {
-    return (
-      <RadioGroupRoot
-        value={value}
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-        disabled={disabled}
-        name={name}
-        data-orientation={orientation}
-        className={choiceGroupClassName(orientation, className)}
-      >
-        {options.map((opt: ChoiceOption, index) => {
-          const id = `${reactId}-${opt.value}-${index}`;
-          return (
-            <ChoiceField key={opt.value} id={id} label={opt.label} description={opt.description}>
-              <RadioItem id={id} value={opt.value} disabled={opt.disabled} />
-            </ChoiceField>
-          );
-        })}
-      </RadioGroupRoot>
-    );
-  }
-
-  return (
-    <RadioGroupRoot
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      disabled={disabled}
-      name={name}
-      data-orientation={orientation}
-      className={choiceGroupClassName(orientation, className)}
-    >
-      {children}
-    </RadioGroupRoot>
-  );
-}
-
-/** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
-export const Radio = Object.assign(RadioItem, {
-  Root: RadioGroupRoot,
-  Group: RadioGroupOptions,
-  Item: RadioItem,
-});
-
-export { RadioGroupRoot, RadioItem, RadioGroupOptions as RadioGroup };

package/src/components/data-entry/search-input.tsx

@@ -1,103 +0,0 @@
-import * as React from "react";
-import { Search, X } from "lucide-react";
-
-import { useTranslation } from "../../i18n/use-translation";
-import { Input } from "../data-entry/input";
-import { Label } from "../data-entry/label";
-import { cn } from "../../lib/utils";
-import { useDebouncedValue } from "../../lib/hooks";
-
-interface SearchInputProps {
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  debounce?: number;
-  onSearch: (q: string) => void;
-  label?: React.ReactNode;
-  ariaLabel?: string;
-  className?: string;
-  inputClassName?: string;
-  id?: string;
-  disabled?: boolean;
-}
-
-export function SearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  placeholder,
-  debounce = 250,
-  onSearch,
-  label,
-  ariaLabel,
-  className,
-  inputClassName,
-  id,
-  disabled = false,
-}: SearchInputProps) {
-  const { t } = useTranslation();
-  const isControlled = controlledValue !== undefined;
-  const [internal, setInternal] = React.useState(defaultValue);
-  const value = isControlled ? controlledValue : internal;
-  const debounced = useDebouncedValue(value, debounce);
-  const reactId = React.useId();
-  const inputId = id ?? `search-${reactId}`;
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
-  const resolvedAriaLabel = ariaLabel ?? t("common.search");
-
-  const onSearchRef = React.useRef(onSearch);
-  React.useEffect(() => {
-    onSearchRef.current = onSearch;
-  });
-  React.useEffect(() => {
-    onSearchRef.current(debounced);
-  }, [debounced]);
-
-  const setValue = (v: string) => {
-    if (!isControlled) setInternal(v);
-  };
-
-  return (
-    <div className={cn("ui-search-input", className)}>
-      {label !== undefined ? (
-        <Label htmlFor={inputId} className="ui-search-input-label">
-          {label}
-        </Label>
-      ) : (
-        <Label htmlFor={inputId} className="sr-only">
-          {resolvedAriaLabel}
-        </Label>
-      )}
-      <div className="ui-search-input-field">
-        <Search className="ui-search-input-icon" aria-hidden="true" />
-        <Input
-          id={inputId}
-          type="text"
-          role="searchbox"
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value);
-          }}
-          placeholder={resolvedPlaceholder}
-          aria-label={resolvedAriaLabel}
-          className={cn(
-            "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
-            inputClassName,
-          )}
-          disabled={disabled}
-        />
-        {value && !disabled && (
-          <button
-            type="button"
-            onClick={() => {
-              setValue("");
-            }}
-            aria-label={t("common.clearSearch")}
-            className="ui-search-input-clear"
-          >
-            <X />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,149 +0,0 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { controlTriggerClass } from "../../lib/control-styles";
-
-export function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-export function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-export function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-export const SelectTrigger = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
-  }
->(({ className, children, size = "default", ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    data-slot="select-trigger"
-    data-size={size}
-    className={cn(
-      controlTriggerClass,
-      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-fit gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-4 shrink-0 opacity-50" aria-hidden="true" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-export const SelectScrollUpButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    data-slot="select-scroll-up-button"
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="size-4" aria-hidden="true" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-export const SelectScrollDownButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    data-slot="select-scroll-down-button"
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="size-4" aria-hidden="true" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-export const SelectContent = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      data-slot="select-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-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 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
-        position === "popper" && "translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        data-slot="select-viewport"
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-export const SelectLabel = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    data-slot="select-label"
-    className={cn("px-2 py-1.5 text-sm font-medium", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-export const SelectItem = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    data-slot="select-item"
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  >
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-export const SelectSeparator = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    data-slot="select-separator"
-    className={cn("bg-border -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;