@jinaan/uikit 0.1.0 → 0.1.2

package/dist/input.d.ts

@@ -7,6 +7,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     leadingIcon?: ReactNode;
     /** Optional icon rendered inside the field, after the text. */
     trailingIcon?: ReactNode;
+    /** Shows a real clear button when the field has a value. */
+    onClear?: () => void;
     /** Error styling; also pairs with `helperText` for the message. */
     error?: boolean;
     /** Helper or error message shown below the field (wired to aria-describedby). */

package/dist/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpF,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqC3C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,KAAK,yGAgHjB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpF,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqC3C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,KAAK,yGAqIjB,CAAC"}

package/package.json

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

package/src/data-table.tsx

@@ -3,6 +3,8 @@ import {
   CaretUp,
   CaretUpDown,
   Columns as ColumnsIcon,
+  FunnelSimple,
+  Lock,
   MagnifyingGlass,
   WarningCircle,
   X,
@@ -17,6 +19,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -49,6 +52,23 @@ export interface Column<T> {
   className?: string;
   /** Column width for the fixed layout (e.g. "18rem", "20%"). Defaults to auto. */
   width?: string;
+  /** Required columns stay visible and cannot be hidden. */
+  required?: boolean;
+}
+
+export interface DataTableFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface DataTableFilter<T> {
+  id: string;
+  label: string;
+  options: DataTableFilterOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  /** Return true when the row matches the selected filter values. */
+  match: (row: T, values: string[]) => boolean;
 }
 
 export interface BulkAction<T> {
@@ -90,6 +110,7 @@ interface DataTableProps<T> {
     placeholder?: string;
     keys: (row: T) => string;
   };
+  filters?: DataTableFilter<T>[];
   toolbarStart?: ReactNode;
   toolbarEnd?: ReactNode;
 
@@ -124,6 +145,9 @@ interface DataTableProps<T> {
 const HEADER_CELL =
   "h-[var(--table-header-h)] whitespace-nowrap px-[var(--table-pad-x)] text-left align-middle text-[0.8125rem] font-medium";
 
+const TOOLBAR_BUTTON =
+  "rounded-[6px] bg-surface text-fg shadow-xs ring-1 ring-line hover:bg-elevated hover:text-fg active:bg-elevated";
+
 function initials(name: string): string {
   return name
     .split(/\s+/)
@@ -164,6 +188,7 @@ export function DataTable<T>({
   error,
   empty,
   search,
+  filters,
   toolbarStart,
   toolbarEnd,
   tabs,
@@ -184,7 +209,9 @@ export function DataTable<T>({
   className,
 }: DataTableProps<T>) {
   const [hidden, setHidden] = useState<Record<string, boolean>>(() =>
-    Object.fromEntries(columns.filter((c) => c.defaultHidden).map((c) => [c.id, true])),
+    Object.fromEntries(
+      columns.filter((c) => c.defaultHidden && !c.required).map((c) => [c.id, true]),
+    ),
   );
   const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
     defaultSort ?? null,
@@ -192,14 +219,26 @@ export function DataTable<T>({
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
 
   const visibleColumns = columns.filter((c) => !hidden[c.id]);
+  const hiddenColumns = columns.filter((c) => hidden[c.id] && !c.required);
+  const activeFilters = (filters ?? []).filter((f) => activeFilterIds.includes(f.id));
+  const filterSignature = (filters ?? [])
+    .map((f) => `${f.id}:${f.value.join(",")}`)
+    .join("|");
 
   const filtered = useMemo(() => {
-    if (!search || !search.value.trim()) return rows;
+    let next = rows;
+    for (const filter of filters ?? []) {
+      if (filter.value.length > 0) {
+        next = next.filter((row) => filter.match(row, filter.value));
+      }
+    }
+    if (!search || !search.value.trim()) return next;
     const q = search.value.trim().toLowerCase();
-    return rows.filter((r) => search.keys(r).toLowerCase().includes(q));
-  }, [rows, search]);
+    return next.filter((r) => search.keys(r).toLowerCase().includes(q));
+  }, [rows, search, filters]);
 
   const sorted = useMemo(() => {
     if (!sort) return filtered;
@@ -221,7 +260,7 @@ export function DataTable<T>({
 
   useEffect(() => {
     setPage(0);
-  }, [search?.value, pageSize, sort?.id, sort?.dir, activeTab]);
+  }, [search?.value, pageSize, sort?.id, sort?.dir, activeTab, filterSignature]);
 
   useEffect(() => {
     if (page > pageCount - 1) setPage(pageCount - 1);
@@ -263,7 +302,7 @@ export function DataTable<T>({
     });
   };
 
-  const hasToolbar = Boolean(search || toolbarStart || toolbarEnd);
+  const hasToolbar = Boolean(search || filters?.length || toolbarStart || toolbarEnd);
 
   // Fixed layout keeps header and body columns aligned across the two tables.
   // When no column declares a width, give the first column more room and split
@@ -317,49 +356,170 @@ export function DataTable<T>({
         <div className="flex flex-wrap items-center gap-2">
           {search && (
             <Input
-              size="md"
+              size="sm"
               type="search"
               aria-label={search.placeholder ?? "Search"}
-              placeholder={search.placeholder ?? "Search…"}
+              placeholder={search.placeholder ?? "Search..."}
               value={search.value}
               onChange={(e) => search.onChange(e.target.value)}
+              onClear={() => search.onChange("")}
               leadingIcon={<MagnifyingGlass />}
-              containerClassName="w-full sm:w-72"
+              containerClassName="w-full sm:w-[280px]"
+              className="rounded-[6px] border-0 bg-surface shadow-xs ring-1 ring-line"
             />
           )}
           {toolbarStart}
-          <div className="ml-auto flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="secondary"
+                size="sm"
+                leadingIcon={<ColumnsIcon />}
+                trailingIcon={<CaretDown />}
+                className={TOOLBAR_BUTTON}
+              >
+                Columns
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-54">
+              <DropdownMenuLabel className="text-[13px]">Active columns</DropdownMenuLabel>
+              {visibleColumns.map((c) => (
+                <DropdownMenuCheckboxItem
+                  key={c.id}
+                  checked
+                  disabled={c.required}
+                  onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: true }))}
+                  onSelect={(e) => e.preventDefault()}
+                  className="justify-between"
+                >
+                  <span>{c.header}</span>
+                  {c.required ? <Lock className="size-3.5 text-subtle" aria-hidden /> : null}
+                </DropdownMenuCheckboxItem>
+              ))}
+              {hiddenColumns.length > 0 ? (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel className="text-[13px]">Available columns</DropdownMenuLabel>
+                  {hiddenColumns.map((c) => (
+                    <DropdownMenuCheckboxItem
+                      key={c.id}
+                      checked={false}
+                      onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: false }))}
+                      onSelect={(e) => e.preventDefault()}
+                    >
+                      {c.header}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+                </>
+              ) : null}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {filters && filters.length > 0 ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
                   variant="secondary"
-                  size="xs"
-                  leadingIcon={<ColumnsIcon />}
-                  trailingIcon={<CaretDown />}
+                  size="sm"
+                  iconOnly
+                  aria-label="Add filter"
+                  className={TOOLBAR_BUTTON}
                 >
-                  Columns
+                  <FunnelSimple />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-44">
-                <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                {columns.map((c) => (
-                  <DropdownMenuCheckboxItem
-                    key={c.id}
-                    checked={!hidden[c.id]}
-                    onCheckedChange={(v) => setHidden((prev) => ({ ...prev, [c.id]: !v }))}
-                    onSelect={(e) => e.preventDefault()}
+              <DropdownMenuContent align="start" className="w-54">
+                {filters.map((filter) => (
+                  <DropdownMenuItem
+                    key={filter.id}
+                    onSelect={() =>
+                      setActiveFilterIds((prev) =>
+                        prev.includes(filter.id) ? prev : [...prev, filter.id],
+                      )
+                    }
                   >
-                    {c.header}
-                  </DropdownMenuCheckboxItem>
+                    {filter.label}
+                  </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
             </DropdownMenu>
-            {toolbarEnd}
-          </div>
+          ) : null}
+          {toolbarEnd ? (
+            <div className="flex-0 sm:ml-auto [&_button]:h-8 [&_button]:rounded-[6px]">
+              {toolbarEnd}
+            </div>
+          ) : null}
         </div>
       )}
 
+      {activeFilters.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {activeFilters.map((filter) => (
+            <DropdownMenu key={filter.id}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="rounded-[6px] bg-surface shadow-xs"
+                >
+                  <FunnelSimple />
+                  <span className="font-medium">{filter.label}</span>
+                  <span className="h-4 w-px bg-line" aria-hidden />
+                  <span className="text-muted">
+                    {filter.value.length > 0
+                      ? `${filter.value.length} selected`
+                      : "Enter value"}
+                  </span>
+                  <CaretDown className="text-muted" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-56">
+                <DropdownMenuLabel className="text-[13px]">
+                  Filter by {filter.label}
+                </DropdownMenuLabel>
+                {filter.options.map((option) => {
+                  const checked = filter.value.includes(option.value);
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={option.value}
+                      checked={checked}
+                      onCheckedChange={() =>
+                        filter.onChange(
+                          checked
+                            ? filter.value.filter((value) => value !== option.value)
+                            : [...filter.value, option.value],
+                        )
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                    >
+                      {option.label}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={() => {
+                    filter.onChange([]);
+                    setActiveFilterIds((prev) => prev.filter((id) => id !== filter.id));
+                  }}
+                >
+                  Clear filter
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ))}
+          <button
+            type="button"
+            onClick={() => {
+              for (const filter of activeFilters) filter.onChange([]);
+              setActiveFilterIds([]);
+            }}
+            className="text-sm text-muted transition-colors hover:text-fg"
+          >
+            Clear filters
+          </button>
+        </div>
+      ) : null}
+
       {infoBanner}
 
       {selectable && selected.size > 0 && (
@@ -421,12 +581,16 @@ export function DataTable<T>({
                     className={cn(HEADER_CELL, c.align === "right" && "text-right", c.className)}
                   >
                     {c.sortable ? (
-                      <button
+                      <Button
                         type="button"
+                        variant="ghost"
+                        size="xs"
                         aria-label={`Sort by ${c.header}`}
                         onClick={() => toggleSort(c)}
                         className={cn(
-                          "inline-flex items-center gap-1.5 transition-colors hover:text-table-header-active",
+                          "h-auto gap-1.5 rounded-none px-0 py-0 text-[0.8125rem] text-table-header transition-colors [&_svg]:size-3.5",
+                          "hover:bg-transparent hover:text-table-header-active hover:shadow-none",
+                          "active:scale-100 active:bg-transparent active:shadow-none",
                           sort?.id === c.id && "text-table-header-active",
                         )}
                       >
@@ -440,7 +604,7 @@ export function DataTable<T>({
                         ) : (
                           <CaretUpDown className="size-3.5 opacity-50" />
                         )}
-                      </button>
+                      </Button>
                     ) : (
                       c.header
                     )}

package/src/input.tsx

@@ -1,4 +1,5 @@
-import { useId, forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { X } from "@phosphor-icons/react";
+import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from "react";
 
 import { cn } from "./utils";
 
@@ -47,6 +48,8 @@ export interface InputProps
   leadingIcon?: ReactNode;
   /** Optional icon rendered inside the field, after the text. */
   trailingIcon?: ReactNode;
+  /** Shows a real clear button when the field has a value. */
+  onClear?: () => void;
   /** Error styling; also pairs with `helperText` for the message. */
   error?: boolean;
   /** Helper or error message shown below the field (wired to aria-describedby). */
@@ -64,6 +67,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       size = "md",
       leadingIcon,
       trailingIcon,
+      onClear,
+      value,
+      defaultValue,
       error = false,
       helperText,
       id,
@@ -77,6 +83,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const autoId = useId();
     const inputId = id ?? autoId;
     const hasMessage = Boolean(helperText);
+    const showClear = Boolean(onClear && (value !== undefined ? String(value).length > 0 : defaultValue !== undefined ? String(defaultValue).length > 0 : false));
     const messageId = hasMessage ? `${inputId}-description` : undefined;
     const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || undefined;
 
@@ -90,14 +97,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         aria-invalid={error || undefined}
         aria-describedby={describedBy}
         style={
-          leadingIcon || trailingIcon
+          leadingIcon || trailingIcon || showClear
             ? {
                 paddingInlineStart: leadingIcon
                   ? `calc(var(--control-pad-x-${size}) + var(--control-icon-${size}) + var(--control-gap))`
                   : undefined,
-                paddingInlineEnd: trailingIcon
-                  ? `calc(var(--control-pad-x-${size}) + var(--control-icon-${size}) + var(--control-gap))`
-                  : undefined,
+                paddingInlineEnd:
+                  trailingIcon || showClear
+                    ? `calc(var(--control-pad-x-${size}) + var(--control-icon-${size}) + var(--control-gap))`
+                    : undefined,
               }
             : undefined
         }
@@ -116,12 +124,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           readOnly && "cursor-default focus-visible:ring-0",
           className,
         )}
+        value={value}
+        defaultValue={defaultValue}
         {...props}
       />
     );
 
     // Bare input keeps the historical API when no compositional features are used.
-    if (!leadingIcon && !trailingIcon && !hasMessage) {
+    if (!leadingIcon && !trailingIcon && !showClear && !hasMessage) {
       return field;
     }
 
@@ -142,10 +152,24 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             </span>
           ) : null}
           {field}
-          {trailingIcon ? (
+          {showClear ? (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={onClear}
+              className={cn(
+                "absolute inset-y-0 flex items-center text-[var(--input-placeholder)] transition-colors hover:text-[var(--input-fg)]",
+                TRAIL_INSET[size],
+              )}
+            >
+              <span className={cn("inline-flex items-center justify-center", ICON[size])}>
+                <X />
+              </span>
+            </button>
+          ) : trailingIcon ? (
             <span
               className={cn(
-                "absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
+                "pointer-events-none absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
                 TRAIL_INSET[size],
               )}
               aria-hidden