@umodeapporg/ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
@@ -8,7 +8,7 @@
   ],
   "files": [
     "dist",
-    "src/assets/styles/theme.css",
+    "src/assets/styles",
     "tailwind.preset.js",
     "tailwind-plugins"
   ],
@@ -19,11 +19,52 @@
     },
     "./styles.css": "./dist/assets/umode-ui.css",
     "./theme.css": "./src/assets/styles/theme.css",
+    "./base.css": "./src/assets/styles/base.css",
     "./tailwind-preset": "./tailwind.preset.js",
     "./locales": {
       "types": "./dist/locales/index.d.ts",
       "import": "./dist/locales/index.js"
     },
+    "./components/Form/ControlledForm": {
+      "types": "./dist/components/Form/ControlledForm/index.d.ts",
+      "import": "./dist/components/Form/ControlledForm/index.js"
+    },
+    "./components/Form/ControlledImage": {
+      "types": "./dist/components/Form/ControlledImage/index.d.ts",
+      "import": "./dist/components/Form/ControlledImage/index.js"
+    },
+    "./components/Search": {
+      "types": "./dist/components/Search/index.d.ts",
+      "import": "./dist/components/Search/index.js"
+    },
+    "./components/Search/filters": {
+      "types": "./dist/components/Search/filters/index.d.ts",
+      "import": "./dist/components/Search/filters/index.js"
+    },
+    "./components/UI/AlertInfo": {
+      "types": "./dist/components/UI/AlertInfo/index.d.ts",
+      "import": "./dist/components/UI/AlertInfo/index.js"
+    },
+    "./components/UI/DataTable": {
+      "types": "./dist/components/UI/DataTable/index.d.ts",
+      "import": "./dist/components/UI/DataTable/index.js"
+    },
+    "./components/UI/Kanban": {
+      "types": "./dist/components/UI/Kanban/index.d.ts",
+      "import": "./dist/components/UI/Kanban/index.js"
+    },
+    "./components/UI/MaterialSymbol": {
+      "types": "./dist/components/UI/MaterialSymbol/index.d.ts",
+      "import": "./dist/components/UI/MaterialSymbol/index.js"
+    },
+    "./components/UI/NoDataFound": {
+      "types": "./dist/components/UI/NoDataFound/index.d.ts",
+      "import": "./dist/components/UI/NoDataFound/index.js"
+    },
+    "./motion": {
+      "types": "./dist/motion/index.d.ts",
+      "import": "./dist/motion/index.js"
+    },
     "./package.json": "./package.json",
     "./*": {
       "types": "./dist/*.d.ts",
@@ -41,9 +82,7 @@
     "format": "prettier --write .",
     "lint:fix": "npm run format && npm run lint -- --fix",
     "audit:theme": "node scripts/theme-audit.mjs",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "release": "npm run build && changeset publish"
+    "release": "semantic-release"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
@@ -127,12 +166,14 @@
     }
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.9",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@eslint/js": "^9.34.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@tanstack/react-table": "^8.21.3",
+    "@types/node": "^24.13.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-window": "^1.8.8",
@@ -141,6 +182,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "apexcharts": "3.52.0",
     "autoprefixer": "^10.4.19",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
     "date-fns": "^4.0.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
@@ -166,9 +208,14 @@
     "react-toastify": "^10.0.6",
     "react-window": "^1.8.11",
     "remark-gfm": "^4.0.0",
+    "semantic-release": "^24.2.0",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.2.2",
     "vite": "^6.3.2",
     "vite-plugin-dts": "^4.5.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/UmodeApp/umode-ui.git"
   }
 }

package/src/assets/styles/base.css

@@ -0,0 +1,490 @@
+@import './theme.css';
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fluid interface density. Tailwind utilities are rem-based, so scaling the root
+   font-size scales typography, spacing, control heights and icons together as one
+   system. Full size (1rem = the user's default, 16px) on viewports >= 1368px (the
+   `desktop` breakpoint), so fullscreen notebooks stay pixel-identical; shrinks
+   linearly below that down to 94% at <= 1152px (compact windows, split screens).
+   The rem-based clamp keeps user font-size preferences and browser zoom working,
+   and breakpoints stay px-based so layout switches do not feed back into this
+   scale. */
+html {
+  font-size: clamp(0.94rem, 0.62rem + 0.4444vw, 1rem);
+  background-color: rgb(var(--color-canvas));
+}
+
+body {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+/* ---------------------------------------------------------------------------
+   Theme switch.
+
+   The swap itself is instant: every colour resolves from a CSS variable, so one
+   attribute write repaints the whole UI already correct.
+
+   This class exists because instant was NOT instant. Around 350 components carry
+   their own `transition-colors`, so on a theme change each of them animated on its
+   own clock (140ms here, 200ms there, 280ms on a collapse) while untransitioned
+   elements changed at once. The page arrived in waves and the borders landed last.
+   Cancelling those transitions for the duration of the swap is what makes it read
+   as ONE change.
+
+   Measured on a 5.4k-node page carrying the app's real transition classes:
+     instant, components still transitioning ...... 406ms of blocked main thread
+     instant + this suppression ...................  49ms
+     one uniform transition on `*` ................ 627ms
+     tokens typed with @property and morphed ......  13fps, main thread starved
+
+   The last two are why there is no animation here. Any smooth transition between
+   two full-page themes is either a BLEND of both (illegible at the midpoint: dark
+   text on light mixed with light text on dark is grey on grey) or a repaint of
+   every element on every frame. Neither is acceptable, so the swap is atomic and
+   the only motion left is the toggle's own knob.
+   --------------------------------------------------------------------------- */
+.theme-switching,
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+  transition: none !important;
+}
+
+/* ---------------------------------------------------------------------------
+   Motion.
+
+   One vocabulary so a dropdown, a drawer and a card hover do not each invent a
+   duration. Entering uses a decelerating curve (arrives and settles), leaving
+   uses an accelerating one (gets out of the way). Everything animates only
+   `opacity` and `transform`, which the compositor handles without layout.
+
+   Durations are deliberately short: this is a work tool, and animation that
+   delays a click is a tax, not a delight.
+   --------------------------------------------------------------------------- */
+@keyframes surface-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -0.375rem, 0) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Floating surfaces that Material Tailwind mounts on open. Targeting the roles
+   rather than the components means a new menu inherits the motion for free. */
+[role='menu'],
+[role='tooltip'],
+[data-popover='true'],
+.glass,
+.glass-elevated {
+  animation: surface-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-scrim {
+  animation: scrim-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* The interaction contract for anything clickable: colour and elevation move on
+   the same clock, so hover feels like one system instead of per-component taste. */
+.interactive {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: 140ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.interactive:active {
+  transform: scale(0.985);
+}
+
+/* Reduced motion: movement goes, feedback stays. Opacity-only transitions are
+   kept because removing them entirely makes state changes feel broken, and a
+   crossfade is not the motion this setting protects against. */
+@media (prefers-reduced-motion: reduce) {
+  [role='menu'],
+  [role='tooltip'],
+  [data-popover='true'],
+  .glass,
+  .glass-elevated,
+  .glass-scrim {
+    animation-name: scrim-in;
+    animation-duration: 100ms;
+  }
+
+  .interactive:active {
+    transform: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Forced theme islands.
+
+   `data-theme` re-declares the whole token set, so any subtree can pin itself to a
+   theme. This is how print previews stay truthful: what the user sees on screen is
+   what comes out of the printer, regardless of the app theme.
+   --------------------------------------------------------------------------- */
+[data-theme='light'],
+[data-theme='dark'] {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+@media print {
+  :root {
+    color-scheme: light;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Focus visibility (WCAG 2.4.7 / 1.4.11).
+
+   One ring for the whole app, driven by the `ring` token, so it has 3:1 against
+   both canvas and surface in either theme. `:focus-visible` (not `:focus`) keeps
+   it off mouse clicks. Components that draw their own ring opt out by setting
+   `outline: none` plus their own `focus-visible:` classes.
+   --------------------------------------------------------------------------- */
+:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* The MT primitives ship `focus:outline-none`, which would swallow the ring above;
+   these re-assert it for keyboard users only. */
+button:focus-visible,
+a:focus-visible,
+[role='button']:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* Editable text fields always match :focus-visible in Chromium, and this block sits
+   after the utilities layer, so their `outline-none` class loses the cascade. They
+   draw their own focus chrome (RichTextEditor border/ring, or the host's
+   focus-within ring around the bare variant), so the global rectangle would double
+   the indicator and ignore the rounded container. */
+[contenteditable]:focus-visible {
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--color-border-strong) / 0.55);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--color-border-strong) / 0.8);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+input:focus {
+  box-shadow: none !important;
+}
+
+/* Chrome paints its own autofill background, which ignores every theme token. The
+   giant inset shadow is the only way to repaint it, and it has to follow the theme
+   or autofilled fields turn into white blocks in dark mode. */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  -webkit-text-fill-color: rgb(var(--color-foreground)) !important;
+  caret-color: rgb(var(--color-foreground));
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* @tailwindcss/forms paints every form control from `colors.gray.500` and `colors.blue.600`,
+   and withMT replaced those with the Material palette. The result is a white fill, a 2.6:1
+   border and a blue focus ring frozen into the base layer of every input, select and
+   textarea, so a control that does not name its own background renders white in dark mode.
+   The selectors below mirror the plugin's at the same specificity, so a utility class still
+   wins and only the frozen colors change.
+
+   The control names its own `field` tokens rather than borrowing `surface` + `border-strong`,
+   because the two themes identify a control differently. In LIGHT nothing changed: a white
+   field with a 3.28:1 outline. In DARK the control is a FILLED field with a soft rim, which
+   is the trade recorded below. */
+input:where(
+  [type='text'],
+  :not([type]),
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week']
+),
+select,
+textarea {
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-field-border));
+}
+
+input:where(
+    [type='text'],
+    :not([type]),
+    [type='email'],
+    [type='url'],
+    [type='password'],
+    [type='number'],
+    [type='date'],
+    [type='datetime-local'],
+    [type='month'],
+    [type='search'],
+    [type='tel'],
+    [type='time'],
+    [type='week']
+  ):focus,
+select:focus,
+textarea:focus {
+  border-color: rgb(var(--color-ring));
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+/* Checkbox and radio keep `border-strong`: they are tiny, they have no fill to be
+   identified by, and their whole shape IS the outline. */
+input:where([type='checkbox'], [type='radio']) {
+  color: rgb(var(--color-primary));
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-border-strong));
+}
+
+input:where([type='checkbox'], [type='radio']):focus {
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* The plugin's own `input::placeholder` outranks the bare `::placeholder` above. */
+input::placeholder,
+textarea::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+   Text selection.
+
+   The band is an OPAQUE token, not the brand colour at low alpha. Alpha over a
+   dark canvas is what made the selection invisible: `primary / 0.24` composited
+   to 1.21:1 against the page in the dark theme, so a selected paragraph looked
+   identical to an unselected one. Opaque values land at 2.07:1 (light) and
+   2.16:1 (dark) against every surface, with the ink above 6:1 on the band.
+
+   Both channels are tokens, so a `data-theme` island (the print preview) selects
+   with its own theme instead of the app's.
+   --------------------------------------------------------------------------- */
+::selection {
+  background-color: rgb(var(--color-selection));
+  color: rgb(var(--color-selection-fg));
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled and read-only.
+
+   Two different facts, and they must not share a visual: disabled means "you
+   cannot use this", read-only means "this is real content you may read and copy
+   but not edit". Neither had any rule here, so a disabled field kept the enabled
+   fill and a read-only field was indistinguishable from an editable one.
+
+   The ink is `foreground-faint`, which is the token's documented job (the 3:1
+   non-textual tier), NOT an opacity. Opacity multiplies against the backdrop:
+   the same icon at `opacity-40` measures 1.82:1 in light and 2.03:1 in dark,
+   while the token holds 4.06:1 / 4.19:1. The fill drops to `muted-active` and
+   the border to `border-emphasis` so the control keeps its shape and still reads
+   as switched off.
+   --------------------------------------------------------------------------- */
+input:where(:disabled),
+select:where(:disabled),
+textarea:where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-subtle));
+  cursor: not-allowed;
+}
+
+input:where(:disabled)::placeholder,
+textarea:where(:disabled)::placeholder {
+  color: rgb(var(--color-foreground-faint));
+}
+
+input:where([type='checkbox'], [type='radio']):where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-faint));
+  cursor: not-allowed;
+}
+
+/* There is deliberately NO `[readonly]` rule here. In this codebase the attribute
+   does not mean "locked content": four of its six uses are combobox triggers
+   (`ControlledSelect`, `DatePicker`, `DateRangePicker`), where it only blocks
+   typing. Styling it as a distinct state would repaint every select in the app. */
+
+button:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.material-symbols {
+  user-select: none;
+  font-weight: normal;
+  font-style: normal;
+  font-size: inherit;
+  display: block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.wf-loading,
+.wf-materialicons-n4-inactive {
+  .material-icons {
+    display: none;
+  }
+}
+
+textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.Toastify__toast-container {
+  width: min(40rem, calc(100vw - 2rem)) !important;
+  z-index: 2147483647 !important;
+}
+
+[role='tooltip'] {
+  z-index: 9999 !important;
+  cursor: help !important;
+}
+
+[role='menu'] {
+  overflow: hidden !important;
+}
+
+.inter-font {
+  font-family: 'Inter', sans-serif !important;
+}
+
+.zIndexMax {
+  z-index: 9999 !important;
+}
+
+/* Rich text authored in RichTextEditor. Colour is stored as a role, never as a literal value,
+   so the same message stays legible after a theme switch. Both the editor and every surface
+   that renders the sanitized body share these rules. */
+.rt-color-brand {
+  color: rgb(var(--color-brand-emphasis));
+}
+
+.rt-color-secondary {
+  color: rgb(var(--color-secondary-emphasis));
+}
+
+.rt-color-accent {
+  color: rgb(var(--color-accent-emphasis));
+}
+
+.rt-color-success {
+  color: rgb(var(--color-success-emphasis));
+}
+
+.rt-color-warning {
+  color: rgb(var(--color-warning-emphasis));
+}
+
+.rt-color-danger {
+  color: rgb(var(--color-danger-emphasis));
+}
+
+.rt-color-info {
+  color: rgb(var(--color-info-emphasis));
+}
+
+.rt-color-muted {
+  color: rgb(var(--color-foreground-muted));
+}
+
+.rt-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+  border: 1px solid rgb(var(--color-border));
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-muted));
+  color: rgb(var(--color-foreground-muted));
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-decoration: none;
+  vertical-align: baseline;
+}
+
+.rt-file:hover {
+  background-color: rgb(var(--color-muted-hover));
+  color: rgb(var(--color-foreground));
+}
+
+.rt-file::before {
+  content: 'attach_file';
+  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: normal;
+  letter-spacing: normal;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+}

package/src/assets/styles/index.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import './base.css';