@diwauhris/ui 1.7.4 → 1.7.7

package/README.md

@@ -1,75 +1,35 @@
-# React + TypeScript + Vite
+# UHRIS Component Gallery
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Developer toolkit for the `@diwauhris/ui` component library.
 
-Currently, two official plugins are available:
+> **This gallery is a developer reference, not a visual acceptance standard.**
+> It documents component APIs, interaction behaviour, and default visual states.
+> Application screens are expected to customise tone, content, labels, icon choice, and size
+> for each feature context. Acceptance criteria should be evaluated against the feature
+> specification — not pixel-for-pixel visual match with this gallery.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Running the gallery
 
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+```bash
+npm install
+npm run dev     # starts at http://localhost:5174
+```
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## What this gallery contains
 
-```
+- **Component pages** — API reference, live playground, and implementation examples for every `@diwauhris/ui` component.
+- **Foundations** — Design tokens: colors, typography, spacing, elevation, and motion.
+- **Patterns** — Real HRIS composition patterns (approval actions, modal footers, page headers).
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Package test
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+Navigate to `/ui-library/package-test` to verify the installed `@diwauhris/ui` build exposes
+all expected exports without import errors.
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Publishing a new version
 
+```bash
+cd DIWA-UHRIS-UI-GUIDELINES
+npm run build:lib
+npm publish
 ```

package/lib/assets/ui.css

@@ -492,11 +492,6 @@
   margin-right: 0.25rem;
 }
 
-.mx-1\.5 {
-  margin-left: 0.375rem;
-  margin-right: 0.375rem;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1559,6 +1554,14 @@
   grid-template-columns: minmax(8rem,14rem) 1fr;
 }
 
+.grid-rows-\[0fr\] {
+  grid-template-rows: 0fr;
+}
+
+.grid-rows-\[1fr\] {
+  grid-template-rows: 1fr;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -2092,6 +2095,11 @@
   border-color: rgb(0 0 0 / 0.5);
 }
 
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
@@ -2324,6 +2332,10 @@
   border-color: rgb(255 255 255 / 0.2);
 }
 
+.border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
 .border-white\/50 {
   border-color: rgb(255 255 255 / 0.5);
 }
@@ -2366,6 +2378,10 @@
   background-color: rgb(45 138 202 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#2D8ACA\]\/50 {
+  background-color: rgb(45 138 202 / 0.5);
+}
+
 .bg-\[\#B91C1C\] {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
@@ -2871,6 +2887,10 @@
   background-color: rgb(255 255 255 / 0.3);
 }
 
+.bg-white\/5 {
+  background-color: rgb(255 255 255 / 0.05);
+}
+
 .bg-white\/60 {
   background-color: rgb(255 255 255 / 0.6);
 }
@@ -2959,6 +2979,11 @@
   padding: 2rem;
 }
 
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -3159,6 +3184,10 @@
   padding-left: 0.5rem;
 }
 
+.pl-2\.5 {
+  padding-left: 0.625rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -3315,6 +3344,10 @@
   line-height: 1;
 }
 
+.text-\[0\.8125rem\] {
+  font-size: 0.8125rem;
+}
+
 .text-\[100px\] {
   font-size: 100px;
 }
@@ -3586,6 +3619,16 @@
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
+}
+
 .text-brand-blue {
   --tw-text-opacity: 1;
   color: rgb(3 78 162 / var(--tw-text-opacity, 1));
@@ -3775,6 +3818,10 @@
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-white\/20 {
+  color: rgb(255 255 255 / 0.2);
+}
+
 .text-white\/30 {
   color: rgb(255 255 255 / 0.3);
 }
@@ -3928,6 +3975,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-black\/20 {
+  --tw-shadow-color: rgb(0 0 0 / 0.2);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-brand-blue\/15 {
   --tw-shadow-color: rgb(3 78 162 / 0.15);
   --tw-shadow: var(--tw-shadow-colored);
@@ -4094,6 +4146,12 @@
   transition-duration: 150ms;
 }
 
+.transition-\[grid-template-rows\] {
+  transition-property: grid-template-rows;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-\[width\] {
   transition-property: width;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4152,6 +4210,52 @@
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+.duration-100 {
+  animation-duration: 100ms;
+}
+
+.duration-150 {
+  animation-duration: 150ms;
+}
+
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+.duration-300 {
+  animation-duration: 300ms;
+}
+
+.duration-500 {
+  animation-duration: 500ms;
+}
+
+.ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.running {
+  animation-play-state: running;
+}
+
 .\[background-image\:linear-gradient\(rgba\(148\2c 163\2c 184\2c 0\.15\)_1px\2c transparent_1px\)\2c linear-gradient\(90deg\2c rgba\(148\2c 163\2c 184\2c 0\.15\)_1px\2c transparent_1px\)\] {
   background-image: linear-gradient(rgba(148,163,184,0.15) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.15) 1px,transparent 1px);
 }
@@ -4228,6 +4332,29 @@ body {
 @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
 .skeleton-bar { display: inline-block; border-radius: 4px; background: #dde3ec; animation: skeleton-pulse 1.4s ease-in-out infinite; }
 
+@keyframes skeleton-shimmer {
+  from { background-position: -200% center; }
+  to   { background-position:  200% center; }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    #dde3ec 25%,
+    #eef1f6 50%,
+    #dde3ec 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.6s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-shimmer {
+    animation: none;
+    background: #dde3ec;
+  }
+}
+
 /* ── Field shake ─────────────────────────────────────────────────────────── */
 @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
 .shake { animation: shake 0.4s ease-in-out; }
@@ -4447,6 +4574,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
 }
+.focus-within\:bg-white:focus-within {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .focus-within\:outline-none:focus-within {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4604,8 +4735,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
 }
-.hover\:bg-slate-100\/40:hover {
-  background-color: rgb(241 245 249 / 0.4);
+.hover\:bg-slate-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
@@ -4734,6 +4866,9 @@ body {
   --tw-shadow-color: rgb(3 78 162 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
 }
+.focus\:w-64:focus {
+  width: 16rem;
+}
 .focus\:border-\[\#00377B\]:focus {
   --tw-border-opacity: 1;
   border-color: rgb(0 55 123 / var(--tw-border-opacity, 1));
@@ -4756,6 +4891,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
 }
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4793,6 +4932,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(238 242 248 / var(--tw-bg-opacity, 1));
 }
+.focus-visible\:bg-blue-50:focus-visible {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
 .focus-visible\:opacity-100:focus-visible {
   opacity: 1;
 }
@@ -5029,6 +5172,36 @@ body {
 .peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
+.data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  --tw-exit-opacity: 0;
+}
+.data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  --tw-enter-opacity: 0;
+}
+.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+  --tw-exit-scale: .95;
+}
+.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+  --tw-enter-scale: .95;
+}
 @media (prefers-reduced-motion: no-preference) {
   @keyframes pulse {
     50% {
@@ -5054,6 +5227,9 @@ body {
   .sm\:inline {
     display: inline;
   }
+  .sm\:flex {
+    display: flex;
+  }
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5223,6 +5399,12 @@ body {
     grid-template-columns: 340px minmax(0,1fr);
   }
 }
+.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
+  display: none;
+}
+.\[\&\:\:-webkit-search-decoration\]\:hidden::-webkit-search-decoration {
+  display: none;
+}
 .\[\&\>svg\]\:h-24>svg {
   height: 6rem;
 }