@dimaan/ui 0.0.22 → 0.0.24

package/dist/preset.css

@@ -8,30 +8,113 @@
  * generates `bg-primary`, `text-primary`, `border-primary`, etc.).
  */
 
+/*
+ * IBM Plex Sans Arabic — the library's default font, loaded from the Fontsource
+ * CDN (jsDelivr) so AR (and Latin) text renders correctly out of the box with
+ * zero consumer setup. Latin glyphs come from the same family for a consistent
+ * look across AR/EN. `unicode-range` lets the browser download only the subset a
+ * page actually uses; `font-display: swap` avoids invisible text while loading.
+ *
+ * Weights: 400/500/600 are used by components; 700 is included for headings in
+ * consumer apps. The CDN version is pinned — bump it deliberately.
+ *
+ * To self-host instead (offline / behind a firewall), replace these `src` URLs
+ * with `@fontsource/ibm-plex-sans-arabic` files served from your own origin.
+ */
+
+/* — Arabic — */
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+
+/* — Latin — */
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5.2.9/files/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 @theme {
-  /* Surface */
+  /* Surface — neutrals carry a faint cool tint (hue 264) so the whole UI
+     reads as "designed" rather than flat default gray. */
   --color-background: oklch(1 0 0);
-  --color-foreground: oklch(0.145 0 0);
+  --color-foreground: oklch(0.16 0.018 264);
 
   /* Card / elevated surfaces */
   --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.145 0 0);
+  --color-card-foreground: oklch(0.16 0.018 264);
 
   /* Popover / floating surfaces (dropdowns, menus, tooltips) */
   --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.145 0 0);
+  --color-popover-foreground: oklch(0.16 0.018 264);
 
   /* Brand */
   --color-primary: oklch(0.55 0.22 264);
-  --color-primary-foreground: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.985 0.002 264);
 
   /* Accent (hover / subtle highlight) */
-  --color-accent: oklch(0.96 0.01 264);
-  --color-accent-foreground: oklch(0.205 0 0);
+  --color-accent: oklch(0.96 0.012 264);
+  --color-accent-foreground: oklch(0.22 0.02 264);
 
   /* Neutral / muted */
-  --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.556 0 0);
+  --color-muted: oklch(0.97 0.005 264);
+  --color-muted-foreground: oklch(0.55 0.025 264);
 
   /* Feedback */
   --color-destructive: oklch(0.577 0.245 27.325);
@@ -42,21 +125,21 @@
   --color-warning-foreground: oklch(0.205 0 0);
 
   /* Borders & inputs */
-  --color-border: oklch(0.922 0 0);
-  --color-input: oklch(0.922 0 0);
+  --color-border: oklch(0.92 0.006 264);
+  --color-input: oklch(0.92 0.006 264);
   --color-ring: oklch(0.55 0.22 264);
 
   /* Sidebar surface (slightly tinted off the main background) */
-  --color-sidebar: oklch(0.985 0 0);
-  --color-sidebar-foreground: oklch(0.205 0 0);
-  --color-sidebar-border: oklch(0.92 0 0);
-  --color-sidebar-accent: oklch(0.95 0.01 264);
-  --color-sidebar-accent-foreground: oklch(0.205 0 0);
+  --color-sidebar: oklch(0.985 0.004 264);
+  --color-sidebar-foreground: oklch(0.22 0.02 264);
+  --color-sidebar-border: oklch(0.91 0.006 264);
+  --color-sidebar-accent: oklch(0.95 0.012 264);
+  --color-sidebar-accent-foreground: oklch(0.22 0.02 264);
 
   /* Header surface */
   --color-header: oklch(1 0 0);
-  --color-header-foreground: oklch(0.145 0 0);
-  --color-header-border: oklch(0.922 0 0);
+  --color-header-foreground: oklch(0.16 0.018 264);
+  --color-header-border: oklch(0.92 0.006 264);
 
   /* Radii */
   --radius: 0.5rem;
@@ -65,14 +148,193 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
+  /* Elevation — soft, layered, faintly cool-tinted shadows (hue 264). Two
+     layers (ambient + direct) give realistic depth instead of one hard drop.
+     These override Tailwind's defaults, so every `shadow-sm/md/lg` upgrades.
+     Dark mode restyles these via `.dark .shadow-*` below (see note there). */
+  --shadow-2xs: 0 1px 2px 0 oklch(0.18 0.04 264 / 0.04);
+  --shadow-xs: 0 1px 2px 0 oklch(0.18 0.04 264 / 0.05), 0 1px 1px -1px oklch(0.18 0.04 264 / 0.04);
+  --shadow-sm: 0 2px 4px -1px oklch(0.18 0.04 264 / 0.06), 0 1px 2px -1px oklch(0.18 0.04 264 / 0.05);
+  --shadow-md: 0 4px 10px -2px oklch(0.18 0.04 264 / 0.08), 0 2px 4px -2px oklch(0.18 0.04 264 / 0.06);
+  --shadow-lg: 0 12px 24px -4px oklch(0.18 0.04 264 / 0.1), 0 4px 8px -4px oklch(0.18 0.04 264 / 0.06);
+  --shadow-xl: 0 24px 40px -8px oklch(0.18 0.04 264 / 0.12), 0 8px 14px -6px oklch(0.18 0.04 264 / 0.07);
+  --shadow-2xl: 0 32px 64px -12px oklch(0.18 0.04 264 / 0.2);
+
   /* Layout sizing */
   --sidebar-width: 16rem;
   --sidebar-width-collapsed: 4rem;
   --header-height: 3.5rem;
 
-  /* Typography — Arabic-friendly stack so AR text renders without extra setup */
+  /* Typography — IBM Plex Sans Arabic first (loaded via @font-face above);
+     the rest are fallbacks if the CDN font fails to load. */
   --font-sans:
-    "Inter", "IBM Plex Sans Arabic", "Geist", "system-ui", "Segoe UI", "Tahoma",
+    "IBM Plex Sans Arabic", "Inter", "Geist", "system-ui", "Segoe UI", "Tahoma",
     "sans-serif";
   --font-mono: "JetBrains Mono", "ui-monospace", "monospace";
+
+  /* Type scale — refine display/heading sizes: tighter line-height + gentle
+     negative tracking for crisper titles. Font sizes match Tailwind's defaults
+     (only line-height/tracking change). Body sizes (xs/sm/base/lg) are left
+     alone to preserve density. Tracking stays gentle so Arabic — a connected
+     script — keeps its legibility. */
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.4;
+  --text-xl--letter-spacing: -0.01em;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.25;
+  --text-2xl--letter-spacing: -0.014em;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 1.2;
+  --text-3xl--letter-spacing: -0.018em;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 1.1;
+  --text-4xl--letter-spacing: -0.02em;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-5xl--letter-spacing: -0.022em;
+}
+
+/*
+ * Built-in dark mode. Components are token-based (they read CSS variables, not
+ * `dark:` utilities), so dark mode is just a re-binding of the same tokens.
+ * Add `class="dark"` to <html> (or any ancestor) to switch — wire it to a
+ * toggle or `prefers-color-scheme` in your app. No extra setup in the library.
+ */
+.dark {
+  /* Surface */
+  --color-background: oklch(0.17 0.012 264);
+  --color-foreground: oklch(0.96 0.004 264);
+
+  /* Card / elevated surfaces (lifted slightly off the background) */
+  --color-card: oklch(0.205 0.014 264);
+  --color-card-foreground: oklch(0.96 0.004 264);
+
+  /* Popover / floating surfaces */
+  --color-popover: oklch(0.205 0.014 264);
+  --color-popover-foreground: oklch(0.96 0.004 264);
+
+  /* Brand — a touch brighter so it pops against dark surfaces */
+  --color-primary: oklch(0.62 0.2 264);
+  --color-primary-foreground: oklch(0.985 0.004 264);
+
+  /* Accent */
+  --color-accent: oklch(0.27 0.022 264);
+  --color-accent-foreground: oklch(0.96 0.004 264);
+
+  /* Neutral / muted */
+  --color-muted: oklch(0.25 0.016 264);
+  --color-muted-foreground: oklch(0.7 0.018 264);
+
+  /* Feedback */
+  --color-destructive: oklch(0.62 0.2 27);
+  --color-destructive-foreground: oklch(0.98 0 0);
+  --color-success: oklch(0.68 0.16 145);
+  --color-success-foreground: oklch(0.18 0.01 145);
+  --color-warning: oklch(0.8 0.15 80);
+  --color-warning-foreground: oklch(0.2 0.01 80);
+
+  /* Borders & inputs */
+  --color-border: oklch(0.27 0.016 264);
+  --color-input: oklch(0.3 0.016 264);
+  --color-ring: oklch(0.62 0.2 264);
+
+  /* Sidebar surface */
+  --color-sidebar: oklch(0.205 0.014 264);
+  --color-sidebar-foreground: oklch(0.92 0.006 264);
+  --color-sidebar-border: oklch(0.27 0.016 264);
+  --color-sidebar-accent: oklch(0.3 0.03 264);
+  --color-sidebar-accent-foreground: oklch(0.96 0.004 264);
+
+  /* Header surface */
+  --color-header: oklch(0.19 0.013 264);
+  --color-header-foreground: oklch(0.96 0.004 264);
+  --color-header-border: oklch(0.27 0.016 264);
+
+}
+
+/*
+ * Dark elevation — near-black and deeper so shadows read on dark surfaces (the
+ * faint tinted light shadows would otherwise vanish). Tailwind freezes @theme
+ * shadow values into utilities at build time, so dark mode can't re-bind them
+ * via a token. We override `box-shadow` directly, re-including Tailwind's ring
+ * composition vars first so focus rings still render. These rules are unlayered,
+ * so they win over the (layered) utility regardless of source order.
+ */
+.dark .shadow-2xs {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 oklch(0 0 0 / 0.3);
+}
+.dark .shadow-xs {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 oklch(0 0 0 / 0.35), 0 1px 1px -1px oklch(0 0 0 / 0.3);
+}
+.dark .shadow-sm {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 2px 4px -1px oklch(0 0 0 / 0.4), 0 1px 2px -1px oklch(0 0 0 / 0.34);
+}
+.dark .shadow-md {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 10px -2px oklch(0 0 0 / 0.45), 0 2px 4px -2px oklch(0 0 0 / 0.36);
+}
+.dark .shadow-lg {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 12px 24px -4px oklch(0 0 0 / 0.5), 0 4px 8px -4px oklch(0 0 0 / 0.38);
+}
+.dark .shadow-xl {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 24px 40px -8px oklch(0 0 0 / 0.55), 0 8px 14px -6px oklch(0 0 0 / 0.4);
+}
+.dark .shadow-2xl {
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 32px 64px -12px oklch(0 0 0 / 0.65);
+}
+
+/*
+ * Motion — enter/exit animations for overlays (dialog, popover, dropdown,
+ * select, tooltip, date-picker). The components already reference
+ * `data-[state=open]:animate-in … fade-in-0 zoom-in-95` etc.; these definitions
+ * make them real (a minimal, self-contained port of tailwindcss-animate, only
+ * the utilities we use). Duration is tunable via --tw-animate-duration.
+ */
+@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), 1);
+  }
+}
+@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), 1);
+  }
+}
+
+@utility animate-in {
+  animation: enter var(--tw-animate-duration, 0.18s) var(--tw-animate-easing, cubic-bezier(0.16, 1, 0.3, 1));
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+@utility animate-out {
+  animation: exit var(--tw-animate-duration, 0.14s) var(--tw-animate-easing, cubic-bezier(0.4, 0, 1, 1));
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+@utility fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+@utility fade-out-0 {
+  --tw-exit-opacity: 0;
+}
+@utility zoom-in-95 {
+  --tw-enter-scale: 0.95;
+}
+@utility zoom-out-95 {
+  --tw-exit-scale: 0.95;
+}
+
+/* Respect users who ask for less motion. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-in,
+  .animate-out {
+    animation: none;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimaan/ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Shared React UI component library for Diman company projects.",
   "license": "UNLICENSED",
   "private": false,