@dinofront/design_system 1.9.0 → 1.11.0

package/dist/styles.css

@@ -456,9 +456,6 @@
   .z-10 {
     z-index: 10;
   }
-  .z-20 {
-    z-index: 20;
-  }
   .z-50 {
     z-index: 50;
   }
@@ -570,12 +567,6 @@
   .ml-0 {
     margin-left: 0px;
   }
-  .ml-0\.5 {
-    margin-left: calc(var(--spacing) * 0.5);
-  }
-  .ml-1 {
-    margin-left: var(--spacing);
-  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -735,9 +726,6 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
-  .h-48 {
-    height: calc(var(--spacing) * 48);
-  }
   .h-\[1em\] {
     height: 1em;
   }
@@ -762,9 +750,15 @@
   .h-\[480px\] {
     height: 480px;
   }
+  .h-\[500px\] {
+    height: 500px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
+  .h-\[calc\(100vh-64px\)\] {
+    height: calc(100vh - 64px);
+  }
   .h-auto {
     height: auto;
   }
@@ -780,9 +774,6 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
-  .max-h-80 {
-    max-height: calc(var(--spacing) * 80);
-  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -990,15 +981,6 @@
   .min-w-\[18px\] {
     min-width: 18px;
   }
-  .min-w-\[100px\] {
-    min-width: 100px;
-  }
-  .min-w-\[120px\] {
-    min-width: 120px;
-  }
-  .min-w-\[140px\] {
-    min-width: 140px;
-  }
   .min-w-\[200px\] {
     min-width: 200px;
   }
@@ -1107,9 +1089,6 @@
   .cursor-text {
     cursor: text;
   }
-  .cursor-wait {
-    cursor: wait;
-  }
   .touch-none {
     touch-action: none;
   }
@@ -1746,15 +1725,9 @@
   .pr-1 {
     padding-right: var(--spacing);
   }
-  .pr-1\.5 {
-    padding-right: calc(var(--spacing) * 1.5);
-  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
-  .pr-2\.5 {
-    padding-right: calc(var(--spacing) * 2.5);
-  }
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -1776,12 +1749,6 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pl-0\.5 {
-    padding-left: calc(var(--spacing) * 0.5);
-  }
-  .pl-1 {
-    padding-left: var(--spacing);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1809,9 +1776,6 @@
   .text-right {
     text-align: right;
   }
-  .align-middle {
-    vertical-align: middle;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -2099,9 +2063,6 @@
   .opacity-60 {
     opacity: 60%;
   }
-  .opacity-70 {
-    opacity: 70%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2443,9 +2404,6 @@
   .focus-within\:border-brand-500:focus-within {
     border-color: var(--color-brand-500);
   }
-  .focus-within\:border-fg-tertiary:focus-within {
-    border-color: var(--color-fg-tertiary);
-  }
   .focus-within\:border-red-600:focus-within {
     border-color: var(--color-red-600);
   }
@@ -2463,10 +2421,6 @@
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
-  .focus-within\:ring-offset-1:focus-within {
-    --tw-ring-offset-width: 1px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
   @media (hover: hover) {
     .hover\:border-border-strong:hover {
       border-color: var(--color-border-strong);
@@ -2678,9 +2632,21 @@
     .md\:block {
       display: block;
     }
+    .md\:flex {
+      display: flex;
+    }
     .md\:hidden {
       display: none;
     }
+    .md\:min-h-0 {
+      min-height: 0px;
+    }
+    .md\:flex-1 {
+      flex: 1;
+    }
+    .md\:flex-col {
+      flex-direction: column;
+    }
   }
   .dark\:bg-brand-500\/10:where(.dark, .dark *) {
     background-color: color-mix(in srgb, #72bf44 10%, transparent);
@@ -2792,21 +2758,6 @@
   .peer-checked\:\[\&_svg\]\:opacity-100:is(:where(.peer):checked ~ *) svg {
     opacity: 100%;
   }
-  .\[\&_td\]\:py-2 td {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .\[\&_td\]\:py-3 td {
-    padding-block: calc(var(--spacing) * 3);
-  }
-  .\[\&_th\]\:py-2 th {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .\[\&_th\]\:py-3 th {
-    padding-block: calc(var(--spacing) * 3);
-  }
-  .\[\&_thead\]\:bg-brand-20 thead {
-    background-color: var(--color-brand-20);
-  }
   .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
     appearance: none;
   }
@@ -2870,28 +2821,6 @@
   .peer-checked\:\[\&\>span\]\:opacity-100:is(:where(.peer):checked ~ *) > span {
     opacity: 100%;
   }
-  .\[\&\>tr\]\:border-t > tr {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-  .\[\&\>tr\]\:border-border-default > tr {
-    border-color: var(--color-border-default);
-  }
-  [data-hoverable] .\[\[data-hoverable\]_\&\>tr\:hover\]\:bg-bg-container > tr:hover {
-    background-color: var(--color-bg-container);
-  }
-  [data-sticky] .\[\[data-sticky\]_\&\]\:sticky {
-    position: sticky;
-  }
-  [data-sticky] .\[\[data-sticky\]_\&\]\:top-0 {
-    top: 0px;
-  }
-  [data-sticky] .\[\[data-sticky\]_\&\]\:z-10 {
-    z-index: 10;
-  }
-  [data-striped] .\[\[data-striped\]_\&\>tr\:nth-child\(even\)\]\:bg-bg-container > tr:nth-child(even) {
-    background-color: var(--color-bg-container);
-  }
 }
 .dark {
   --color-bg-default: #0b1120;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinofront/design_system",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Enterprise React component library and design system built on Tailwind CSS.",
   "type": "module",
   "license": "MIT",

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,2 +0,0 @@
-import { MultiSelectProps } from './MultiSelect.types';
-export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -1,62 +0,0 @@
-import { ReactNode } from 'react';
-import { BaseProps, OptionValue } from '../../types';
-export type MultiSelectSize = 'sm' | 'md' | 'lg';
-export interface MultiSelectOption {
-    value: OptionValue;
-    label: ReactNode;
-    /** Text used for search matching when `label` isn't a plain string. Options where neither this nor a string `label` is available are excluded from `searchable` matching. */
-    searchText?: string;
-    /** Optional second line under the label in the dropdown. */
-    description?: string;
-    /** Group heading this option belongs under. Options sharing a group MUST be
-     *  contiguous in the (filtered) list — the heading is emitted whenever this
-     *  value changes between consecutive visible options, so a non-contiguous
-     *  group renders its heading more than once. */
-    group?: string;
-    /** Optional avatar image — shown on the chip and the dropdown row. */
-    avatarSrc?: string;
-    /** Non-selectable option (shown dimmed in the list). */
-    disabled?: boolean;
-    /** Small tag rendered on the chip, e.g. "You". */
-    badge?: ReactNode;
-}
-export interface MultiSelectProps extends BaseProps {
-    options: MultiSelectOption[];
-    /** Selected option values (controlled). */
-    value: OptionValue[];
-    onChange: (values: OptionValue[]) => void;
-    /** Called with the option that was just added, alongside `onChange` (never instead of it). */
-    onAdd?: (option: MultiSelectOption) => void;
-    /** Called with the value that was just removed, alongside `onChange` (never instead of it). */
-    onRemove?: (value: OptionValue) => void;
-    size?: MultiSelectSize;
-    placeholder?: string;
-    /** Placeholder once at least one chip exists. Defaults to "Add another…". */
-    addMorePlaceholder?: string;
-    disabled?: boolean;
-    error?: boolean;
-    label?: ReactNode;
-    /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the field. */
-    labelAddons?: ReactNode;
-    helperText?: ReactNode;
-    errorText?: ReactNode;
-    required?: boolean;
-    /** Values whose chips can't be removed. */
-    lockedValues?: OptionValue[];
-    /** Cap on how many can be selected (default: unlimited). */
-    max?: number;
-    /** Renders an Avatar on every chip and dropdown row, falling back to initials derived from the option's `label` when it has no `avatarSrc`. Default `false` — avatars still render for options that already set `avatarSrc` regardless. */
-    showAvatars?: boolean;
-    /** Set false for a click-to-open picker with no text filter. */
-    searchable?: boolean;
-    /** Dropdown header shown when the query is empty. */
-    suggestionsLabel?: string;
-    /** Message shown when nothing matches. */
-    emptyText?: string;
-    id?: string;
-    className?: string;
-    wrapperClassName?: string;
-    /** Shows a spinner in the trailing edge of the chip row and blocks opening the dropdown. Does not set the native `disabled` attribute. */
-    loading?: boolean;
-    language?: string;
-}

package/dist/components/MultiSelect/index.d.ts

@@ -1,2 +0,0 @@
-export { MultiSelect } from './MultiSelect';
-export type { MultiSelectOption, MultiSelectProps, MultiSelectSize } from './MultiSelect.types';

package/dist/components/Table/Table.d.ts

@@ -1,8 +0,0 @@
-import { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, DataTableProps } from './Table.types';
-export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
-export declare const THead: import('react').ForwardRefExoticComponent<THeadProps & import('react').RefAttributes<HTMLTableSectionElement>>;
-export declare const TBody: import('react').ForwardRefExoticComponent<TBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;
-export declare const TR: import('react').ForwardRefExoticComponent<TRProps & import('react').RefAttributes<HTMLTableRowElement>>;
-export declare const TH: import('react').ForwardRefExoticComponent<THProps & import('react').RefAttributes<HTMLTableCellElement>>;
-export declare const TD: import('react').ForwardRefExoticComponent<TDProps & import('react').RefAttributes<HTMLTableCellElement>>;
-export declare function DataTable<T>({ columns, rows, rowKey, empty, density, striped, hoverable, sortKey, sortDir, onSortChange, onRowClick, className, dataTestId, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/Table/Table.types.d.ts

@@ -1,55 +0,0 @@
-import { HTMLAttributes, ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
-import { BaseProps } from '../../types';
-export type TableDensity = 'comfortable' | 'compact';
-export type SortDir = 'asc' | 'desc' | null;
-/** Horizontal alignment shared by `TH`, `TD`, and `TableColumn`. */
-export type TableAlign = 'left' | 'center' | 'right';
-export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps {
-    density?: TableDensity;
-    striped?: boolean;
-    hoverable?: boolean;
-    stickyHeader?: boolean;
-    /**
-     * Applied to the outer scroll container (border/background/rounding) —
-     * `className` is applied to the `<table>` element itself, matching where
-     * `ref` and the rest of `HTMLAttributes<HTMLTableElement>` land.
-     */
-    wrapperClassName?: string;
-}
-export interface THeadProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
-}
-export interface TBodyProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
-}
-export interface TRProps extends HTMLAttributes<HTMLTableRowElement>, BaseProps {
-}
-export interface THProps extends ThHTMLAttributes<HTMLTableCellElement>, BaseProps {
-    sortable?: boolean;
-    sortDir?: SortDir;
-    onSortChange?: (dir: SortDir) => void;
-    align?: TableAlign;
-}
-export interface TDProps extends TdHTMLAttributes<HTMLTableCellElement>, BaseProps {
-    align?: TableAlign;
-}
-export interface TableColumn<T> {
-    key: string;
-    header: ReactNode;
-    render?: (row: T) => ReactNode;
-    accessor?: (row: T) => ReactNode;
-    align?: TableAlign;
-    sortable?: boolean;
-}
-export interface DataTableProps<T> extends BaseProps {
-    columns: TableColumn<T>[];
-    rows: T[];
-    rowKey: (row: T, i: number) => string;
-    empty?: ReactNode;
-    density?: TableDensity;
-    striped?: boolean;
-    hoverable?: boolean;
-    sortKey?: string;
-    sortDir?: SortDir;
-    onSortChange?: (key: string, dir: SortDir) => void;
-    onRowClick?: (row: T) => void;
-    className?: string;
-}

package/dist/components/Table/index.d.ts

@@ -1,2 +0,0 @@
-export { Table, THead, TBody, TR, TH, TD, DataTable } from './Table';
-export type { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, TableAlign, TableColumn, DataTableProps, TableDensity, SortDir, } from './Table.types';