@mindtris/ui 0.1.0 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +3 -69
  2. package/dist/index.d.mts +17 -35
  3. package/dist/index.mjs +3395 -2595
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +4 -4
  6. package/tokens/themes/simplifi.css +9 -2
package/README.md CHANGED
@@ -3,74 +3,8 @@
3
3
  Published as **@mindtris/ui** on [npm](https://www.npmjs.com/package/@mindtris/ui).
4
4
 
5
5
  ```bash
6
- # -----------------------------------------------------------------------------
7
- # install (npm)
8
- # -----------------------------------------------------------------------------
9
6
  pnpm add @mindtris/ui
10
-
11
- # -----------------------------------------------------------------------------
12
- # publish to npm (from pkg/design)
13
- # -----------------------------------------------------------------------------
14
- cd pkg/design
15
- pnpm run build # build dist/ (runs automatically on publish via prepublishOnly)
16
- npm login # one-time: log in to npmjs.com
17
- npm publish --access public # first publish; use npm version patch && npm publish for releases
18
-
19
- # -----------------------------------------------------------------------------
20
- # install via file link (local dev, e.g. dash)
21
- # -----------------------------------------------------------------------------
22
- # In the app: pnpm add file:../mindtris-ui/pkg/design
23
- # Run `pnpm run build` in pkg/design first so dist/ exists; then the app consumes the built output.
24
-
25
- # -----------------------------------------------------------------------------
26
- # tokens (CSS) — MUST import once in app root CSS
27
- # -----------------------------------------------------------------------------
28
- # app/globals.css (or app/css/style.css):
29
- # @import '@mindtris/ui/tokens';
30
- #
31
- # then use semantic token classes:
32
- # bg-background text-foreground border-border bg-card text-muted-foreground
33
- # bg-primary text-primary-foreground bg-destructive text-destructive-foreground
34
-
35
-
36
- # -----------------------------------------------------------------------------
37
- # react usage (UI + theme engine)
38
- # -----------------------------------------------------------------------------
39
- # import what you need:
40
- # import { Button, Input, Label, DatePicker, Container, Page, Section, Toaster, useThemeManager } from '@mindtris/ui'
41
- #
42
- # theme apply (runtime; sets CSS vars on <html>):
43
- # const { applyTheme, applyImportedTheme, applyRadius, isDarkMode } = useThemeManager()
44
- # applyThemePreset('mindtris-ui', isDarkMode)
45
-
46
-
47
- # -----------------------------------------------------------------------------
48
- # package rules (CONTRIBUTING.md summary)
49
- # -----------------------------------------------------------------------------
50
- # scope:
51
- # - UI-only primitives + tokens + theme engine
52
- # - MUST be usable in >= 2 apps without renaming meaning
53
- #
54
- # must NOT exist in pkg/design:
55
- # - API calls / data fetching
56
- # - domain terms (Invoice, User, KYC, Transaction, ...)
57
- # - app routing/nav/permissions/workflows
58
- #
59
- # styling:
60
- # - token-only colors (NO tailwind palette like bg-gray-900, NO hex in components)
61
- # - prefer semantic classes: bg-card, text-foreground, border-border, ...
62
- #
63
- # labels and copy:
64
- # - sentence case: capitalize only the first letter (e.g. "Full name", not "Full Name")
65
- # - exception: proper nouns, acronyms (e.g. "API key", "URL")
66
- #
67
- # layouts:
68
- # - components like Sidebar/Header are chrome/slots only; apps provide routes + items
69
-
70
-
71
- # -----------------------------------------------------------------------------
72
- # dev checks (in this repo)
73
- # -----------------------------------------------------------------------------
74
- cd pkg/design
75
- pnpm tsc --noEmit -p tsconfig.json
76
7
  ```
8
+
9
+ In app root CSS: `@import '@mindtris/ui/tokens';`
10
+ In code: `import { Button, Container, Page, Section, Toaster } from '@mindtris/ui'`
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ClassValue } from 'clsx';
2
2
  import * as React$1 from 'react';
3
- import React__default, { ReactNode, Dispatch, SetStateAction, RefObject, ComponentType } from 'react';
3
+ import React__default, { ReactNode, Dispatch, SetStateAction, RefObject, ButtonHTMLAttributes, ReactElement, HTMLAttributes, ComponentType } from 'react';
4
4
  import * as AvatarPrimitive from '@radix-ui/react-avatar';
5
5
  import { OTPInput } from 'input-otp';
6
6
  import * as SwitchPrimitive from '@radix-ui/react-switch';
@@ -521,7 +521,7 @@ interface AppContextProps {
521
521
  setSidebarExpanded: Dispatch<SetStateAction<boolean>>;
522
522
  }
523
523
  declare function AppProvider({ children, }: {
524
- children: React.ReactNode;
524
+ children: ReactNode;
525
525
  }): React$1.JSX.Element;
526
526
  declare const useAppProvider: () => AppContextProps;
527
527
 
@@ -1097,10 +1097,10 @@ declare function handleColorChange(cssVar: string, value: string): void;
1097
1097
 
1098
1098
  declare function useThemeManager(): {
1099
1099
  theme: string;
1100
- setTheme: React__default.Dispatch<React__default.SetStateAction<string>>;
1100
+ setTheme: React$1.Dispatch<React$1.SetStateAction<string>>;
1101
1101
  isDarkMode: boolean;
1102
1102
  brandColorsValues: Record<string, string>;
1103
- setBrandColorsValues: React__default.Dispatch<React__default.SetStateAction<Record<string, string>>>;
1103
+ setBrandColorsValues: React$1.Dispatch<React$1.SetStateAction<Record<string, string>>>;
1104
1104
  currentThemeValue: string;
1105
1105
  customThemeValue: string;
1106
1106
  customThemeName: string;
@@ -1257,26 +1257,6 @@ interface OtherPanelProps {
1257
1257
  }
1258
1258
  declare function OtherPanel({ selectedRadius, setSelectedRadius, onImportClick, hideModeSection, hideLayoutSection, sidebarConfig, onSidebarConfigChange, }: OtherPanelProps): React__default.JSX.Element;
1259
1259
 
1260
- /**
1261
- * Button: Displays a button or a component that looks like a button.
1262
- *
1263
- * Design-system contract
1264
- * - Scope: UI-only primitive (2-app rule). No domain terms, no API calls.
1265
- * - Tokens-only: no Tailwind palette colors; use semantic token classes only.
1266
- * - One source of truth: variants/sizes via `createVariants(...)`.
1267
- * - A11y: icon-only requires `aria-label`; `isLoading` => `aria-busy` + disabled.
1268
- * - Disabled: native `disabled` for `<button>`; emulate for `render` targets (`aria-disabled`, `tabIndex=-1`, prevent click).
1269
- * - API: `size` supports text (`default|xs|sm|md|lg|xl`) + icon (`icon|icon-...`) sizes; `render` enables Link-as-button.
1270
- * - Motion: spinner respects `prefers-reduced-motion`.
1271
- *
1272
- * @author: @mindtris-team
1273
- * @version: 1.0.0
1274
- * @since: 2026-01-31
1275
- *
1276
- * @example
1277
- * <Button variant="primary" size="md" isLoading={true} fullWidth={true} leadingIcon={<Icon name="plus" />} trailingIcon={<Icon name="minus" />} iconOnly={true} tooltip="Add item" render={<Link href="/items">Items</Link>} />
1278
- */
1279
-
1280
1260
  type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline' | 'outline-strong' | 'ghost' | 'link' | 'menu' | 'icon' | 'icon-ghost' | 'danger' | 'danger-outline' | 'destructive' | 'destructive-outline';
1281
1261
  type ButtonTextSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
1282
1262
  type ButtonIconSize = 'icon' | 'icon-xs' | 'icon-sm' | 'icon-md' | 'icon-lg' | 'icon-xl';
@@ -1285,7 +1265,7 @@ type ButtonWeight = 'default' | 'strong';
1285
1265
  type ButtonAlign = 'left' | 'center' | 'right' | 'between';
1286
1266
  type ButtonMotion = 'none' | 'lift';
1287
1267
  type ButtonShape = 'rounded' | 'pill';
1288
- interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
1268
+ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
1289
1269
  variant?: ButtonVariant;
1290
1270
  size?: ButtonSize;
1291
1271
  weight?: ButtonWeight;
@@ -1299,8 +1279,8 @@ interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElem
1299
1279
  fullWidth?: boolean;
1300
1280
  /** Adds a chevron and animates it on hover (like “Learn more →”). */
1301
1281
  arrowIcon?: boolean;
1302
- leadingIcon?: React__default.ReactNode;
1303
- trailingIcon?: React__default.ReactNode;
1282
+ leadingIcon?: ReactNode;
1283
+ trailingIcon?: ReactNode;
1304
1284
  /** Forces icon-only layout (square button). Also implied by `variant="icon"`. */
1305
1285
  iconOnly?: boolean;
1306
1286
  tooltip?: string;
@@ -1309,9 +1289,9 @@ interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElem
1309
1289
  *
1310
1290
  * Similar intent to coss's `render` prop.
1311
1291
  */
1312
- render?: React__default.ReactElement<any>;
1292
+ render?: ReactElement<any>;
1313
1293
  }
1314
- declare function Button({ className, variant, size, weight, align, shape, motion, isLoading, fullWidth, arrowIcon, leadingIcon, trailingIcon, iconOnly, disabled, tooltip, render, children, title: titleProp, ...props }: ButtonProps): React__default.JSX.Element;
1294
+ declare function Button({ className, variant, size, weight, align, shape, motion, isLoading, fullWidth, arrowIcon, leadingIcon, trailingIcon, iconOnly, disabled, tooltip, render, children, title: titleProp, ...props }: ButtonProps): React$1.JSX.Element;
1315
1295
 
1316
1296
  /**
1317
1297
  * ButtonGroup: Visually groups buttons into a segmented control.
@@ -2940,8 +2920,10 @@ interface DatePickerRangeProps {
2940
2920
  */
2941
2921
  declare function DatePickerRange({ value, onSelect, placeholder, disabled, className, calendarProps, }: DatePickerRangeProps): React$1.JSX.Element;
2942
2922
 
2943
- declare function Header({ variant, rightSlot, }: {
2923
+ declare function Header({ variant, leftSlot, rightSlot, }: {
2944
2924
  variant?: 'default' | 'v2' | 'v3';
2925
+ /** App-specific header content for the left side (logo, menu, etc.). */
2926
+ leftSlot?: ReactNode;
2945
2927
  /** App-specific header actions (search, notifications, theme toggle, profile). Pass from app. */
2946
2928
  rightSlot?: ReactNode;
2947
2929
  }): React$1.JSX.Element;
@@ -3753,34 +3735,34 @@ declare function TooltipContent({ className, sideOffset, variant, children, ...p
3753
3735
  * Layout primitives (root-level so consuming bundlers can resolve without ./components/ paths).
3754
3736
  * Canonical source for Container, Page, Section, Grid, Stack.
3755
3737
  */
3756
- interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
3738
+ interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
3757
3739
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'none';
3758
3740
  padding?: 'none' | 'sm' | 'md' | 'lg';
3759
3741
  center?: boolean;
3760
3742
  }
3761
3743
  declare function Container({ children, maxWidth, padding, center, className, ...props }: ContainerProps): React$1.JSX.Element;
3762
- interface PageProps extends React$1.HTMLAttributes<HTMLDivElement> {
3744
+ interface PageProps extends HTMLAttributes<HTMLDivElement> {
3763
3745
  title?: string;
3764
3746
  description?: string;
3765
3747
  maxWidth?: ContainerProps['maxWidth'];
3766
3748
  padding?: ContainerProps['padding'];
3767
3749
  }
3768
3750
  declare function Page({ children, title, description, maxWidth, padding, className, ...props }: PageProps): React$1.JSX.Element;
3769
- interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
3751
+ interface SectionProps extends HTMLAttributes<HTMLElement> {
3770
3752
  title?: string;
3771
3753
  description?: string;
3772
3754
  maxWidth?: ContainerProps['maxWidth'];
3773
3755
  padding?: ContainerProps['padding'];
3774
3756
  }
3775
3757
  declare function Section({ children, title, description, maxWidth, padding, className, ...props }: SectionProps): React$1.JSX.Element;
3776
- interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
3758
+ interface GridProps extends HTMLAttributes<HTMLDivElement> {
3777
3759
  cols?: 1 | 2 | 3 | 4;
3778
3760
  colsSm?: 1 | 2 | 3 | 4 | 5 | 6;
3779
3761
  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
3780
3762
  gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
3781
3763
  }
3782
3764
  declare function Grid({ children, cols, colsSm, colsMd, gap, className, ...props }: GridProps): React$1.JSX.Element;
3783
- interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
3765
+ interface StackProps extends HTMLAttributes<HTMLDivElement> {
3784
3766
  direction?: 'row' | 'col';
3785
3767
  align?: 'start' | 'center' | 'end' | 'stretch';
3786
3768
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';