@segmentify/ui 0.0.23 → 0.0.24

package/dist/ui.css

@@ -20,6 +20,9 @@
     --ui-color-gray-400: #9fa6b2;
     --ui-color-gray-500: #6b7280;
     --ui-color-gray-600: #4b5563;
+    --ui-color-zinc-700: oklch(37% 0.013 285.805);
+    --ui-color-neutral-200: oklch(92.2% 0 0);
+    --ui-color-neutral-300: oklch(87% 0 0);
     --ui-color-neutral-500: oklch(55.6% 0 0);
     --ui-color-neutral-700: oklch(37.1% 0 0);
     --ui-color-neutral-800: oklch(26.9% 0 0);
@@ -32,8 +35,6 @@
     --ui-container-lg: 32rem;
     --ui-container-2xl: 42rem;
     --ui-container-3xl: 48rem;
-    --ui-container-5xl: 64rem;
-    --ui-container-6xl: 72rem;
     --ui-text-xs: 0.75rem;
     --ui-text-xs--line-height: calc(1 / 0.75);
     --ui-text-sm: 0.875rem;
@@ -50,6 +51,7 @@
     --ui-text-4xl--line-height: calc(2.5 / 2.25);
     --ui-text-7xl: 4.5rem;
     --ui-text-7xl--line-height: 1;
+    --ui-font-weight-light: 300;
     --ui-font-weight-normal: 400;
     --ui-font-weight-medium: 500;
     --ui-font-weight-semibold: 600;
@@ -285,9 +287,6 @@
   .ui\:relative {
     position: relative;
   }
-  .ui\:sticky {
-    position: sticky;
-  }
   .ui\:inset-0 {
     inset: calc(var(--ui-spacing) * 0);
   }
@@ -390,9 +389,6 @@
   .ui\:-mx-1 {
     margin-inline: calc(var(--ui-spacing) * -1);
   }
-  .ui\:-mx-4 {
-    margin-inline: calc(var(--ui-spacing) * -4);
-  }
   .ui\:mx-2 {
     margin-inline: calc(var(--ui-spacing) * 2);
   }
@@ -453,21 +449,12 @@
   .ui\:mr-2 {
     margin-right: calc(var(--ui-spacing) * 2);
   }
-  .ui\:mb-0 {
-    margin-bottom: calc(var(--ui-spacing) * 0);
-  }
-  .ui\:mb-1 {
-    margin-bottom: calc(var(--ui-spacing) * 1);
-  }
   .ui\:mb-2 {
     margin-bottom: calc(var(--ui-spacing) * 2);
   }
   .ui\:mb-4 {
     margin-bottom: calc(var(--ui-spacing) * 4);
   }
-  .ui\:mb-6 {
-    margin-bottom: calc(var(--ui-spacing) * 6);
-  }
   .ui\:-ml-4 {
     margin-left: calc(var(--ui-spacing) * -4);
   }
@@ -508,10 +495,6 @@
     width: var(--cell-size);
     height: var(--cell-size);
   }
-  .ui\:size-1\.5 {
-    width: calc(var(--ui-spacing) * 1.5);
-    height: calc(var(--ui-spacing) * 1.5);
-  }
   .ui\:size-2 {
     width: calc(var(--ui-spacing) * 2);
     height: calc(var(--ui-spacing) * 2);
@@ -626,8 +609,8 @@
   .ui\:max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-  .ui\:max-h-10 {
-    max-height: calc(var(--ui-spacing) * 10);
+  .ui\:max-h-9 {
+    max-height: calc(var(--ui-spacing) * 9);
   }
   .ui\:max-h-24 {
     max-height: calc(var(--ui-spacing) * 24);
@@ -638,9 +621,6 @@
   .ui\:max-h-96 {
     max-height: calc(var(--ui-spacing) * 96);
   }
-  .ui\:max-h-\[50vh\] {
-    max-height: 50vh;
-  }
   .ui\:max-h-\[80vh\] {
     max-height: 80vh;
   }
@@ -704,12 +684,6 @@
   .ui\:w-10 {
     width: calc(var(--ui-spacing) * 10);
   }
-  .ui\:w-20 {
-    width: calc(var(--ui-spacing) * 20);
-  }
-  .ui\:w-32 {
-    width: calc(var(--ui-spacing) * 32);
-  }
   .ui\:w-48 {
     width: calc(var(--ui-spacing) * 48);
   }
@@ -764,24 +738,12 @@
   .ui\:max-w-3xl {
     max-width: var(--ui-container-3xl);
   }
-  .ui\:max-w-5xl {
-    max-width: var(--ui-container-5xl);
-  }
-  .ui\:max-w-6xl {
-    max-width: var(--ui-container-6xl);
-  }
-  .ui\:max-w-40 {
-    max-width: calc(var(--ui-spacing) * 40);
-  }
   .ui\:max-w-80 {
     max-width: calc(var(--ui-spacing) * 80);
   }
   .ui\:max-w-96 {
     max-width: calc(var(--ui-spacing) * 96);
   }
-  .ui\:max-w-\[200px\] {
-    max-width: 200px;
-  }
   .ui\:max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -818,6 +780,9 @@
   .ui\:min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .ui\:min-w-full {
+    min-width: 100%;
+  }
   .ui\:flex-1 {
     flex: 1;
   }
@@ -833,9 +798,6 @@
   .ui\:basis-full {
     flex-basis: 100%;
   }
-  .ui\:caption-bottom {
-    caption-side: bottom;
-  }
   .ui\:border-collapse {
     border-collapse: collapse;
   }
@@ -876,7 +838,7 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .ui\:translate-y-\[calc\(-50\%-2px\)\] {
+  .ui\:translate-y-\[calc\(-50\%_-_2px\)\] {
     --tw-translate-y: calc(-50% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
@@ -979,9 +941,6 @@
   .ui\:justify-center {
     justify-content: center;
   }
-  .ui\:justify-end {
-    justify-content: flex-end;
-  }
   .ui\:justify-start {
     justify-content: flex-start;
   }
@@ -1027,13 +986,6 @@
       margin-block-end: calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .ui\:space-y-2\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--ui-spacing) * 2.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--ui-spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .ui\:space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1168,10 +1120,6 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
-  .ui\:border-4 {
-    border-style: var(--tw-border-style);
-    border-width: 4px;
-  }
   .ui\:border-\[1\.5px\] {
     border-style: var(--tw-border-style);
     border-width: 1.5px;
@@ -1236,15 +1184,15 @@
   .ui\:border-input {
     border-color: var(--ui-color-input);
   }
+  .ui\:border-neutral-200 {
+    border-color: var(--ui-color-neutral-200);
+  }
   .ui\:border-primary {
     border-color: var(--ui-color-primary);
   }
   .ui\:border-primary\! {
     border-color: var(--ui-color-primary) !important;
   }
-  .ui\:border-segmentify-200 {
-    border-color: var(--ui-color-segmentify-200);
-  }
   .ui\:border-sidebar-border {
     border-color: var(--ui-sidebar-border);
   }
@@ -1311,12 +1259,6 @@
   .ui\:bg-muted {
     background-color: var(--ui-color-muted);
   }
-  .ui\:bg-muted-foreground\/50 {
-    background-color: var(--ui-color-muted-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--ui-color-muted-foreground) 50%, transparent);
-    }
-  }
   .ui\:bg-muted\/30 {
     background-color: var(--ui-color-muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1389,6 +1331,9 @@
   .ui\:bg-yellow-500 {
     background-color: var(--ui-color-yellow-500);
   }
+  .ui\:bg-zinc-700 {
+    background-color: var(--ui-color-zinc-700);
+  }
   .ui\:fill-current {
     fill: currentcolor;
   }
@@ -1476,9 +1421,6 @@
   .ui\:py-6 {
     padding-block: calc(var(--ui-spacing) * 6);
   }
-  .ui\:py-8 {
-    padding-block: calc(var(--ui-spacing) * 8);
-  }
   .ui\:pt-0 {
     padding-top: calc(var(--ui-spacing) * 0);
   }
@@ -1524,9 +1466,6 @@
   .ui\:pl-4 {
     padding-left: calc(var(--ui-spacing) * 4);
   }
-  .ui\:pl-6 {
-    padding-left: calc(var(--ui-spacing) * 6);
-  }
   .ui\:pl-8 {
     padding-left: calc(var(--ui-spacing) * 8);
   }
@@ -1539,9 +1478,6 @@
   .ui\:text-right {
     text-align: right;
   }
-  .ui\:align-middle {
-    vertical-align: middle;
-  }
   .ui\:font-mono {
     font-family: var(--ui-font-mono);
   }
@@ -1602,6 +1538,10 @@
     --tw-font-weight: var(--ui-font-weight-bold);
     font-weight: var(--ui-font-weight-bold);
   }
+  .ui\:font-light {
+    --tw-font-weight: var(--ui-font-weight-light);
+    font-weight: var(--ui-font-weight-light);
+  }
   .ui\:font-medium {
     --tw-font-weight: var(--ui-font-weight-medium);
     font-weight: var(--ui-font-weight-medium);
@@ -1638,9 +1578,6 @@
   .ui\:text-accent-foreground {
     color: var(--ui-color-accent-foreground);
   }
-  .ui\:text-background {
-    color: var(--ui-color-background);
-  }
   .ui\:text-black-250 {
     color: var(--ui-color-black-250);
   }
@@ -2219,42 +2156,6 @@
       color: var(--ui-color-muted-foreground);
     }
   }
-  .ui\:before\:absolute {
-    &::before {
-      content: var(--tw-content);
-      position: absolute;
-    }
-  }
-  .ui\:before\:top-0 {
-    &::before {
-      content: var(--tw-content);
-      top: calc(var(--ui-spacing) * 0);
-    }
-  }
-  .ui\:before\:left-0 {
-    &::before {
-      content: var(--tw-content);
-      left: calc(var(--ui-spacing) * 0);
-    }
-  }
-  .ui\:before\:h-full {
-    &::before {
-      content: var(--tw-content);
-      height: 100%;
-    }
-  }
-  .ui\:before\:w-px {
-    &::before {
-      content: var(--tw-content);
-      width: 1px;
-    }
-  }
-  .ui\:before\:bg-border {
-    &::before {
-      content: var(--tw-content);
-      background-color: var(--ui-color-border);
-    }
-  }
   .ui\:after\:absolute {
     &::after {
       content: var(--tw-content);
@@ -2273,48 +2174,18 @@
       inset-block: calc(var(--ui-spacing) * 0);
     }
   }
-  .ui\:after\:top-0 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(var(--ui-spacing) * 0);
-    }
-  }
-  .ui\:after\:right-0 {
-    &::after {
-      content: var(--tw-content);
-      right: calc(var(--ui-spacing) * 0);
-    }
-  }
   .ui\:after\:left-1\/2 {
     &::after {
       content: var(--tw-content);
       left: calc(1/2 * 100%);
     }
   }
-  .ui\:after\:h-full {
-    &::after {
-      content: var(--tw-content);
-      height: 100%;
-    }
-  }
   .ui\:after\:w-\[2px\] {
     &::after {
       content: var(--tw-content);
       width: 2px;
     }
   }
-  .ui\:after\:w-px {
-    &::after {
-      content: var(--tw-content);
-      width: 1px;
-    }
-  }
-  .ui\:after\:bg-border {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--ui-color-border);
-    }
-  }
   .ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full {
     &:is(:where(.ui\:group)[data-collapsible="offcanvas"] *) {
       &::after {
@@ -2435,6 +2306,13 @@
       }
     }
   }
+  .ui\:hover\:bg-neutral-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ui-color-neutral-300);
+      }
+    }
+  }
   .ui\:hover\:bg-neutral-800 {
     &:hover {
       @media (hover: hover) {
@@ -2483,6 +2361,13 @@
       }
     }
   }
+  .ui\:hover\:bg-zinc-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ui-color-zinc-700);
+      }
+    }
+  }
   .ui\:hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -3281,11 +3166,6 @@
       }
     }
   }
-  .ui\:data-\[state\=selected\]\:bg-muted {
-    &[data-state="selected"] {
-      background-color: var(--ui-color-muted);
-    }
-  }
   .ui\:data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
       --tw-translate-x: calc(var(--ui-spacing) * 0);
@@ -3620,6 +3500,11 @@
       color: var(--ui-color-muted-foreground);
     }
   }
+  .ui\:dark\:text-white {
+    &:is(.dark *) {
+      color: var(--ui-color-white);
+    }
+  }
   .ui\:dark\:hover\:bg-input\/50 {
     &:is(.dark *) {
       &:hover {
@@ -3901,12 +3786,6 @@
       color: var(--ui-color-muted-foreground);
     }
   }
-  .ui\:\[\&_tr\]\:border-b {
-    & tr {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
   .ui\:\[\&_tr\:last-child\]\:border-0 {
     & tr:last-child {
       border-style: var(--tw-border-style);
@@ -3947,14 +3826,6 @@
       }
     }
   }
-  .ui\:\*\:\[\[role\=checkbox\]\]\:translate-y-\[2px\] {
-    :is(& > *) {
-      &:is([role=checkbox]) {
-        --tw-translate-y: 2px;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
   .ui\:\*\:\[span\]\:last\:flex {
     :is(& > *) {
       &:is(span) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentify/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "A collection of reusable React UI components built with Tailwind CSS and Radix UI",
   "repository": {
     "type": "git",

package/dist/components/organisms/data-table/column-visibility.d.ts

@@ -1,7 +0,0 @@
-interface ColumnVisibilityProps {
-    inputPlaceholder?: string;
-    emptyMessage?: string;
-    allOptionLabel?: string;
-}
-export declare function ColumnVisibility({ inputPlaceholder, emptyMessage, allOptionLabel, }: ColumnVisibilityProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-interface ContentProps {
-    className?: string;
-    loadingContent?: ReactNode;
-    emptyContent?: ReactNode;
-}
-export declare function Content({ className, loadingContent, emptyContent, }: ContentProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-import { type Table as TanstackTable } from '@tanstack/react-table';
-export interface DataTableContextValue<TData> {
-    table: TanstackTable<TData>;
-    isLoading: boolean;
-    globalFilter: string;
-    onGlobalFilterChange: (value: string) => void;
-}
-export declare const DataTableContext: import("react").Context<DataTableContextValue<unknown> | null>;
-export declare function useDataTableContext<TData>(): DataTableContextValue<TData>;

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

@@ -1,13 +0,0 @@
-import { Root } from './root';
-import { Toolbar } from './toolbar';
-import { Search } from './search';
-import { ColumnVisibility } from './column-visibility';
-import { Content } from './content';
-export declare const DataTable: {
-    Root: typeof Root;
-    Toolbar: typeof Toolbar;
-    Search: typeof Search;
-    ColumnVisibility: typeof ColumnVisibility;
-    Content: typeof Content;
-    Pagination: ({ showSelectedCount, previousLabel, nextLabel, className, }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
-};

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

@@ -1,7 +0,0 @@
-export interface PaginationProps {
-    showSelectedCount?: boolean;
-    previousLabel?: string;
-    nextLabel?: string;
-    className?: string;
-}
-export declare const Pagination: ({ showSelectedCount, previousLabel, nextLabel, className, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import { type Table as TanstackTable } from '@tanstack/react-table';
-interface RootProps<TData> {
-    table: TanstackTable<TData>;
-    children: ReactNode;
-    isLoading?: boolean;
-    globalFilter?: string;
-    onGlobalFilterChange?: (value: string) => void;
-    className?: string;
-}
-export declare function Root<TData>({ table, children, isLoading, globalFilter, onGlobalFilterChange, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,7 +0,0 @@
-interface SearchProps {
-    placeholder?: string;
-    filterColumn?: string;
-    className?: string;
-}
-export declare function Search({ placeholder, filterColumn, className }: SearchProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface ToolbarProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare function Toolbar({ children, className }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/hooks/use-data-table.d.ts

@@ -1,133 +0,0 @@
-import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type PaginationState, type RowSelectionState, type Table } from '@tanstack/react-table';
-import { type UseQueryOptions } from '@tanstack/react-query';
-export interface FetcherParams {
-    pageIndex: number;
-    pageSize: number;
-    sorting: SortingState;
-    columnFilters: ColumnFiltersState;
-    globalFilter: string;
-}
-export interface FetcherResponse<TData> {
-    data: TData[];
-    totalCount?: number;
-}
-export interface UseDataTableOptions<TData> {
-    /**
-     * Unique key for the query cache
-     * @required
-     */
-    queryKey: string;
-    /**
-     * Column definitions for the table
-     */
-    columns: ColumnDef<TData>[];
-    /**
-     * Fetcher function to load data
-     * Receives fetch params and should return data + optional totalCount
-     */
-    fetcher: (params: FetcherParams) => Promise<FetcherResponse<TData>>;
-    /**
-     * Initial page size
-     * @default 10
-     */
-    initialPageSize?: number;
-    /**
-     * Initial sorting state
-     */
-    initialSorting?: SortingState;
-    /**
-     * Initial column visibility
-     */
-    initialColumnVisibility?: VisibilityState;
-    /**
-     * Whether pagination is handled manually (server-side)
-     * @default false
-     */
-    manualPagination?: boolean;
-    /**
-     * Whether sorting is handled manually (server-side)
-     * @default false
-     */
-    manualSorting?: boolean;
-    /**
-     * Whether filtering is handled manually (server-side)
-     * @default false
-     */
-    manualFiltering?: boolean;
-    /**
-     * Additional react-query options
-     * Allows customizing staleTime, gcTime, refetchInterval, etc.
-     */
-    queryOptions?: Omit<UseQueryOptions<FetcherResponse<TData>, Error>, 'queryKey' | 'queryFn'>;
-}
-export interface UseDataTableReturn<TData> {
-    /**
-     * The table instance from @tanstack/react-table
-     */
-    table: Table<TData>;
-    /**
-     * The current data array
-     */
-    data: TData[];
-    /**
-     * Whether the initial data is loading (no data yet)
-     */
-    isLoading: boolean;
-    /**
-     * Whether data is being fetched (including background refetches)
-     */
-    isFetching: boolean;
-    /**
-     * Whether a refetch is in progress
-     */
-    isRefetching: boolean;
-    /**
-     * Error if the fetch failed
-     */
-    error: Error | null;
-    /**
-     * Total count of items (for pagination)
-     */
-    totalCount: number;
-    /**
-     * Refetch the data
-     */
-    refetch: () => void;
-    /**
-     * Current global filter value
-     */
-    globalFilter: string;
-    /**
-     * Set the global filter
-     */
-    setGlobalFilter: (value: string) => void;
-    /**
-     * Current sorting state
-     */
-    sorting: SortingState;
-    /**
-     * Current pagination state
-     */
-    pagination: PaginationState;
-    /**
-     * Current column filters
-     */
-    columnFilters: ColumnFiltersState;
-    /**
-     * Current column visibility
-     */
-    columnVisibility: VisibilityState;
-    /**
-     * Current row selection
-     */
-    rowSelection: RowSelectionState;
-    /**
-     * Whether the query is in success state
-     */
-    isSuccess: boolean;
-    /**
-     * Whether the query is in error state
-     */
-    isError: boolean;
-}
-export declare function useDataTable<TData>({ queryKey, columns, fetcher, initialPageSize, initialSorting, initialColumnVisibility, manualPagination, manualSorting, manualFiltering, queryOptions, }: UseDataTableOptions<TData>): UseDataTableReturn<TData>;

package/dist/mock.d.ts

@@ -1,3 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Product } from './app';
-export declare const columns: ColumnDef<Product>[];