@shipfox/react-ui 0.17.0 → 0.19.0

package/dist/components/index.js

@@ -9,10 +9,12 @@ export * from './checkbox/index.js';
 export * from './code-block/index.js';
 export * from './command/index.js';
 export * from './confetti/index.js';
+export * from './count-up/index.js';
 export * from './dashboard/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
+export * from './dropdown-input/index.js';
 export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
 export * from './empty-state/index.js';

package/dist/components/input/input.d.ts

@@ -1,10 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export declare const inputVariants: (props?: ({
     variant?: "base" | "component" | null | undefined;
     size?: "base" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
-export declare function Input({ className, type, variant, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants> & {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 export const inputVariants = cva('', {
     variants: {
@@ -17,16 +18,31 @@ export const inputVariants = cva('', {
         size: 'base'
     }
 });
-export function Input({ className, type, variant, size, ...props }) {
-    return /*#__PURE__*/ _jsx("input", {
-        type: type,
-        "data-slot": "input",
-        className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', inputVariants({
-            variant,
-            size
-        }), className),
-        ...props
+export const Input = /*#__PURE__*/ forwardRef(({ className, type, variant, size, iconLeft, iconRight, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative flex items-center w-full",
+        children: [
+            iconLeft && /*#__PURE__*/ _jsx("div", {
+                className: "absolute left-8 top-1/2 -translate-y-1/2 flex items-center justify-center shrink-0 pointer-events-none z-10",
+                children: iconLeft
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                ref: ref,
+                type: type,
+                "data-slot": "input",
+                className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', iconLeft ? 'pl-32' : 'pl-8', iconRight ? 'pr-32' : 'pr-8', inputVariants({
+                    variant,
+                    size
+                }), className),
+                ...props
+            }),
+            iconRight && /*#__PURE__*/ _jsx("div", {
+                className: "absolute right-8 top-1/2 -translate-y-1/2 flex items-center justify-center shrink-0 pointer-events-none z-10",
+                children: iconRight
+            })
+        ]
     });
-}
+});
+Input.displayName = 'Input';
 
 //# sourceMappingURL=input.js.map

package/dist/components/input/input.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
 import { Code, Header } from '../../components/typography/index.js';
 import { Input } from './input.js';
 const typeOptions = [
@@ -195,5 +196,70 @@ export const Types = {
                 }, t))
         })
 };
+export const WithIcons = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-24 w-full max-w-400",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Left Icon"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Search...",
+                            iconLeft: /*#__PURE__*/ _jsx(Icon, {
+                                name: "searchLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Right Icon"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Enter email",
+                            iconRight: /*#__PURE__*/ _jsx(Icon, {
+                                name: "mailLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Both Icons"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Search users...",
+                            iconLeft: /*#__PURE__*/ _jsx(Icon, {
+                                name: "searchLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            }),
+                            iconRight: /*#__PURE__*/ _jsx(Icon, {
+                                name: "userLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=input.stories.js.map

package/dist/components/item/item.stories.js

@@ -3,6 +3,7 @@ import { Button } from '../../components/button/button.js';
 import { DatePicker } from '../../components/date-picker/index.js';
 import { Icon } from '../../components/icon/icon.js';
 import { Input } from '../../components/input/input.js';
+import { Kbd } from '../../components/kbd/index.js';
 import { Label } from '../../components/label/label.js';
 import { useState } from 'react';
 import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemSeparator, ItemTitle } from './item.js';
@@ -139,9 +140,8 @@ export const ImportPastJobsModal = {
                             /*#__PURE__*/ _jsxs("div", {
                                 className: "flex items-center gap-8",
                                 children: [
-                                    /*#__PURE__*/ _jsx("kbd", {
-                                        className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
-                                        children: "esc"
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        children: "Esc"
                                     }),
                                     /*#__PURE__*/ _jsx(Button, {
                                         variant: "transparent",

package/dist/components/table/data-table.d.ts

@@ -81,7 +81,14 @@ interface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'chi
      * When `true`, displays a loading skeleton instead of the table.
      */
     isLoading?: boolean;
+    /**
+     * Optional scoped container element for dropdown portals.
+     *
+     * When provided, dropdowns (like pagination select) will be rendered inside this container
+     * instead of the document body. This is useful for scoped CSS styling.
+     */
+    scopedContainer?: HTMLElement | null;
 }
-export declare function DataTable<TData, TValue>({ columns, data, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, className, ...props }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, scopedContainer, className, ...props }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=data-table.d.ts.map

package/dist/components/table/data-table.js

@@ -8,7 +8,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
 import { TablePagination } from './table-pagination.js';
-export function DataTable({ columns, data, pagination = true, pageSize = 10, pageSizeOptions, showSelectedCount = false, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, className, ...props }) {
+export function DataTable({ columns, data, pagination = true, pageSize = 10, pageSizeOptions, showSelectedCount = false, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, scopedContainer, className, ...props }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [internalColumnVisibility, setInternalColumnVisibility] = useState({});
@@ -91,7 +91,7 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             className: cn('p-0 gap-0', className),
             ...props,
             children: /*#__PURE__*/ _jsx(CardContent, {
-                className: "rounded-8 overflow-hidden p-0",
+                className: "overflow-hidden p-0",
                 children: /*#__PURE__*/ _jsxs(Table, {
                     children: [
                         /*#__PURE__*/ _jsx(TableHeader, {
@@ -125,7 +125,7 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
         className: cn('p-0 gap-0', className),
         ...props,
         children: /*#__PURE__*/ _jsx(CardContent, {
-            className: "rounded-b-8 overflow-hidden p-0",
+            className: "overflow-hidden p-0",
             children: /*#__PURE__*/ _jsxs(Table, {
                 children: [
                     table.getRowModel().rows.length > 0 ? /*#__PURE__*/ _jsx(TableHeader, {
@@ -165,7 +165,8 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
                     pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
                         table: table,
                         pageSizeOptions: pageSizeOptions,
-                        showSelectedCount: showSelectedCount
+                        showSelectedCount: showSelectedCount,
+                        scopedContainer: scopedContainer
                     })
                 ]
             })

package/dist/components/table/table-column-header.d.ts

@@ -39,6 +39,19 @@ export interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HT
      * ```
      */
     title: string;
+    /**
+     * Optional scoped container element for dropdown portal.
+     *
+     * When provided, the dropdown menu will be rendered inside this container
+     * instead of the document body. This is useful for scoped CSS styling.
+     *
+     * @example
+     * ```tsx
+     * const {scopedContainer} = useScopedContainer();
+     * <TableColumnHeader column={column} title="Name" scopedContainer={scopedContainer} />
+     * ```
+     */
+    scopedContainer?: HTMLElement | null;
 }
 /**
  * Renders a table column header with optional sorting functionality.
@@ -75,5 +88,5 @@ export interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HT
  * ];
  * ```
  */
-export declare function TableColumnHeader<TData, TValue>({ column, title, className, }: TableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function TableColumnHeader<TData, TValue>({ column, title, className, scopedContainer, }: TableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-column-header.d.ts.map

package/dist/components/table/table-column-header.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '../../components/icon/index.js';
+import { useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../button/index.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../dropdown-menu/index.js';
+import { Text } from '../typography/index.js';
 /**
  * Renders a table column header with optional sorting functionality.
  *
@@ -37,15 +39,18 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
  *   },
  * ];
  * ```
- */ export function TableColumnHeader({ column, title, className }) {
+ */ export function TableColumnHeader({ column, title, className, scopedContainer }) {
+    const headerRef = useRef(null);
     if (!column.getCanSort()) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn('text-xs font-medium', className),
+        return /*#__PURE__*/ _jsx(Text, {
+            size: "xs",
+            className: cn('font-medium', className),
             children: title
         });
     }
     const isSorted = column.getIsSorted();
     return /*#__PURE__*/ _jsx("div", {
+        ref: headerRef,
         className: cn('flex items-center space-x-2', className),
         children: /*#__PURE__*/ _jsxs(DropdownMenu, {
             children: [
@@ -56,8 +61,9 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
                         size: "xs",
                         className: "-ml-12 h-32 px-8 data-[state=open]:bg-background-components-hover gap-0",
                         children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-xs font-medium text-foreground-neutral-subtle",
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "font-medium text-foreground-neutral-subtle",
                                 children: title
                             }),
                             isSorted === 'desc' ? /*#__PURE__*/ _jsx(Icon, {
@@ -76,6 +82,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
                 /*#__PURE__*/ _jsxs(DropdownMenuContent, {
                     align: "start",
                     size: "sm",
+                    container: scopedContainer ?? undefined,
                     children: [
                         /*#__PURE__*/ _jsx(DropdownMenuItem, {
                             icon: "arrowUpLongLine",

package/dist/components/table/table-pagination.d.ts

@@ -47,7 +47,20 @@ interface TablePaginationProps<TData> extends ComponentProps<'tfoot'> {
      * ```
      */
     showSelectedCount?: boolean;
+    /**
+     * Optional scoped container element for select dropdown portal.
+     *
+     * When provided, the select dropdown will be rendered inside this container
+     * instead of the document body. This is useful for scoped CSS styling.
+     *
+     * @example
+     * ```tsx
+     * const {scopedContainer} = useScopedContainer();
+     * <TablePagination table={table} scopedContainer={scopedContainer} />
+     * ```
+     */
+    scopedContainer?: HTMLElement | null;
 }
-export declare function TablePagination<TData>({ table, className, pageSizeOptions, showSelectedCount, ...props }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function TablePagination<TData>({ table, className, pageSizeOptions, showSelectedCount, scopedContainer, ...props }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=table-pagination.d.ts.map

package/dist/components/table/table-pagination.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '../../components/typography/index.js';
+import { useRef } from 'react';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select/select.js';
@@ -9,17 +10,19 @@ export function TablePagination({ table, className, pageSizeOptions = [
     20,
     50,
     100
-], showSelectedCount = false, ...props }) {
+], showSelectedCount = false, scopedContainer, ...props }) {
+    const paginationRef = useRef(null);
     const currentPage = table.getState().pagination.pageIndex + 1;
     const pageSize = table.getState().pagination.pageSize;
     const totalRows = table.getFilteredRowModel().rows.length;
     const startRow = totalRows === 0 ? 0 : currentPage === 1 ? 1 : (currentPage - 1) * pageSize + 1;
     const endRow = Math.min(currentPage * pageSize, totalRows);
     return /*#__PURE__*/ _jsx(TableFooter, {
+        ref: paginationRef,
         className: className,
         ...props,
         children: /*#__PURE__*/ _jsx(TableRow, {
-            className: "hover:bg-transparent",
+            className: "hover:bg-transparent border-b-0",
             children: /*#__PURE__*/ _jsx(TableCell, {
                 colSpan: table.getAllColumns().length,
                 className: "group-hover/row:bg-transparent",
@@ -71,6 +74,7 @@ export function TablePagination({ table, className, pageSizeOptions = [
                                                     children: /*#__PURE__*/ _jsx(SelectValue, {})
                                                 }),
                                                 /*#__PURE__*/ _jsx(SelectContent, {
+                                                    container: scopedContainer ?? undefined,
                                                     children: pageSizeOptions.map((size)=>/*#__PURE__*/ _jsx(SelectItem, {
                                                             value: String(size),
                                                             children: size

package/dist/components/table/table.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn.js';
 function Table({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
-        className: "relative w-full overflow-auto scrollbar",
+        className: "relative w-full overflow-auto scrollbar rounded-x-8 rounded-b-8",
         children: /*#__PURE__*/ _jsx("table", {
             "data-slot": "table",
             className: cn('w-full caption-bottom text-sm', className),
@@ -34,14 +34,14 @@ function TableFooter({ className, ...props }) {
 function TableRow({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tr", {
         "data-slot": "table-row",
-        className: cn('group/row border-b border-border-neutral-base transition-colors', 'last:border-b-0 last:rounded-b-8', 'hover:bg-background-neutral-hover', 'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed', className),
+        className: cn('group/row border-b border-border-neutral-base transition-colors', 'last:rounded-b-8 last:border-b-0', 'hover:bg-background-neutral-hover', 'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed', className),
         ...props
     });
 }
 function TableHead({ className, ...props }) {
     return /*#__PURE__*/ _jsx("th", {
         "data-slot": "table-head",
-        className: cn('h-40 px-16 text-left align-middle text-xs font-medium leading-20 text-foreground-neutral-subtle', 'bg-background-subtle-base', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:px-12 [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pt-6', className),
+        className: cn('h-40 px-16 text-left align-middle text-xs font-medium leading-20 text-foreground-neutral-subtle', 'bg-background-subtle-base border-b border-border-neutral-base', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:px-12 [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pt-6', className),
         ...props
     });
 }