@jinaan/uikit 0.1.42 → 0.1.44

package/dist/input-select.d.ts

@@ -0,0 +1,24 @@
+import { type InputProps } from "./input";
+export interface InputSelectOption {
+    value: string;
+    label: string;
+}
+export interface InputSelectProps extends Omit<InputProps, "className" | "containerClassName" | "onClear"> {
+    /** Selected value for the right-hand inline dropdown. */
+    selectValue: string;
+    onSelectChange: (value: string) => void;
+    selectOptions: InputSelectOption[];
+    selectAriaLabel: string;
+    selectPlaceholder?: string;
+    /** Outer wrapper class. */
+    className?: string;
+    inputClassName?: string;
+    selectClassName?: string;
+}
+/**
+ * Joined text/number input with an inline select on the right. The input keeps
+ * its right corners square and the dropdown keeps its left corners square so
+ * they read as one control.
+ */
+export declare const InputSelect: import("react").ForwardRefExoticComponent<InputSelectProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input-select.d.ts.map

package/dist/input-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-select.d.ts","sourceRoot":"","sources":["../src/input-select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAUjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,oBAAoB,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,+GAuDvB,CAAC"}

package/dist/select.d.ts

@@ -5,8 +5,8 @@ export declare const SelectValue: import("react").ForwardRefExoticComponent<Sele
 /** Select root; disabled when there are no items to choose from. */
 export declare function Select({ children, disabled, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>): import("react").JSX.Element;
 export interface SelectTriggerProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
-    /** `field` fills a form; `inline` mimics the compact app dropdown. */
-    variant?: "field" | "inline";
+    /** `field` fills a form; `inline` mimics the compact app dropdown; `ghost` mirrors a ghost button. */
+    variant?: "field" | "inline" | "ghost";
 }
 export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,oEAAoE;AACpE,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,+BAQvD;AAED,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,kHAuBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,oEAAoE;AACpE,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,+BAQvD;AAED,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,kHA2BxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -141,6 +141,14 @@ interface DataTableProps<T> {
   onRowClick?: (row: T) => void;
 
   defaultSort?: { id: string; dir: "asc" | "desc" };
+  /**
+   * Controlled sort state. Pass together with `onSortChange`: header caret
+   * clicks then report through the callback instead of mutating internal
+   * state, so an external control (e.g. a toolbar "Sort by" select) and the
+   * headers can drive one shared state.
+   */
+  sort?: { id: string; dir: "asc" | "desc" };
+  onSortChange?: (sort: { id: string; dir: "asc" | "desc" } | null) => void;
   pageSize?: number;
   pageSizeOptions?: number[];
 
@@ -223,6 +231,8 @@ export function DataTable<T>({
   rowActions,
   onRowClick,
   defaultSort,
+  sort: sortProp,
+  onSortChange,
   pageSize: initialPageSize = 25,
   pageSizeOptions = [10, 25, 50, 100],
   pagination = "auto",
@@ -240,9 +250,15 @@ export function DataTable<T>({
   // Column order and runtime pins are per-mount, like `hidden`.
   const [order, setOrder] = useState<string[] | null>(null);
   const [dragId, setDragId] = useState<string | null>(null);
-  const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
+  const [internalSort, setInternalSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
     defaultSort ?? null,
   );
+  // Controlled when the caller passes onSortChange; uncontrolled otherwise.
+  const sort = onSortChange ? sortProp ?? null : internalSort;
+  const setSort = (next: { id: string; dir: "asc" | "desc" } | null) => {
+    if (onSortChange) onSortChange(next);
+    else setInternalSort(next);
+  };
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -323,7 +339,8 @@ export function DataTable<T>({
 
   const toggleSort = (col: Column<T>) => {
     if (!col.sortable) return;
-    setSort((prev) =>
+    const prev = sort;
+    setSort(
       prev?.id === col.id
         ? prev.dir === "asc"
           ? { id: col.id, dir: "desc" }

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./empty-state";
 export * from "./input";
+export * from "./input-select";
 export * from "./kbd";
 export * from "./label";
 export * from "./radio-group";

package/src/input-select.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from "react";
+
+import { Input, type InputProps } from "./input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { cn } from "./utils";
+
+export interface InputSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface InputSelectProps
+  extends Omit<InputProps, "className" | "containerClassName" | "onClear"> {
+  /** Selected value for the right-hand inline dropdown. */
+  selectValue: string;
+  onSelectChange: (value: string) => void;
+  selectOptions: InputSelectOption[];
+  selectAriaLabel: string;
+  selectPlaceholder?: string;
+  /** Outer wrapper class. */
+  className?: string;
+  inputClassName?: string;
+  selectClassName?: string;
+}
+
+/**
+ * Joined text/number input with an inline select on the right. The input keeps
+ * its right corners square and the dropdown keeps its left corners square so
+ * they read as one control.
+ */
+export const InputSelect = forwardRef<HTMLInputElement, InputSelectProps>(
+  (
+    {
+      className,
+      inputClassName,
+      selectClassName,
+      selectValue,
+      onSelectChange,
+      selectOptions,
+      selectAriaLabel,
+      selectPlaceholder,
+      id,
+      size,
+      disabled,
+      ...inputProps
+    },
+    ref,
+  ) => (
+    <div className={cn("flex w-full items-stretch", className)}>
+      <Input
+        {...inputProps}
+        ref={ref}
+        id={id}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          "min-w-0 rounded-l-(--control-radius) rounded-r-none",
+          inputClassName,
+        )}
+      />
+      <Select
+        value={selectValue}
+        onValueChange={onSelectChange}
+        disabled={disabled}
+      >
+        <SelectTrigger
+          aria-label={selectAriaLabel}
+          variant="ghost"
+          className={cn(
+            "min-w-28 shrink-0 rounded-l-none border border-(--input-border) border-l-0 px-3 text-[13px] font-normal",
+            selectClassName,
+          )}
+        >
+          <SelectValue placeholder={selectPlaceholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {selectOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+);
+InputSelect.displayName = "InputSelect";

package/src/select.tsx

@@ -30,8 +30,8 @@ export function Select({
 export interface SelectTriggerProps extends ComponentPropsWithoutRef<
   typeof SelectPrimitive.Trigger
 > {
-  /** `field` fills a form; `inline` mimics the compact app dropdown. */
-  variant?: "field" | "inline";
+  /** `field` fills a form; `inline` mimics the compact app dropdown; `ghost` mirrors a ghost button. */
+  variant?: "field" | "inline" | "ghost";
 }
 
 export const SelectTrigger = forwardRef<
@@ -48,13 +48,17 @@ export const SelectTrigger = forwardRef<
         "h-(--control-h-md) w-full rounded-md border border-line bg-surface px-3 focus:border-primary focus:ring-2 focus:ring-focus/30",
       variant === "inline" &&
         "btn-fill btn-inner-border btn-interactive h-(--control-h-md) w-auto rounded-(--control-radius) border-0 bg-(--button-secondary-bg) px-(--control-pad-x-sm) font-medium text-fg hover:bg-(--button-surface-hover) active:bg-(--button-surface-active) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
+      variant === "ghost" &&
+        "btn-inner-border btn-interactive h-(--control-h-md) w-auto rounded-(--control-radius) border-0 px-(--control-pad-x-sm) text-muted hover:bg-(--button-surface-hover) hover:text-fg active:bg-(--button-surface-active) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
       className,
     )}
     {...props}
   >
     <span className="min-w-0 flex-1 truncate text-left">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <CaretDown className="ml-auto size-3.5 shrink-0 text-muted transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+      <span className="flex size-4 shrink-0 items-center justify-center">
+        <CaretDown className="size-3.5 text-muted transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+      </span>
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));