@yuva-devlab/ui 1.4.2 → 1.4.4

package/dist/styles/components.css

@@ -416,21 +416,21 @@
 
   /* Sizes */
   .dl-btn--sm {
-    height: 2rem;
+    height: var(--control-height-sm, 2rem);
     padding: 0 0.75rem;
     font-size: 0.75rem;
   }
   .dl-btn--md {
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     padding: 0 1rem;
   }
   .dl-btn--lg {
-    height: 2.5rem;
+    height: var(--control-height-lg, 2.5rem);
     padding: 0 2rem;
   }
   .dl-btn--icon {
-    width: 2.25rem;
-    height: 2.25rem;
+    width: var(--control-height-md, 2.25rem);
+    height: var(--control-height-md, 2.25rem);
     padding: 0;
   }
 
@@ -486,6 +486,246 @@
     text-decoration: underline;
   }
 
+  /* ── calendar ── */
+  .dl-calendar {
+    --cell-size: 2rem;
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
+    padding: 0.75rem;
+    box-sizing: border-box;
+    color: var(--foreground);
+  }
+
+  .dl-calendar .rdp-root {
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  .dl-calendar .rdp-months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: calc(var(--cell-size, 2rem) * 7);
+    box-sizing: border-box;
+  }
+
+  .dl-calendar .rdp-month {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .dl-calendar .rdp-month_caption {
+    position: relative;
+    display: flex;
+    height: var(--cell-size, 2rem);
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--cell-size, 2rem);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+    box-sizing: border-box;
+  }
+
+  .dl-calendar .rdp-caption_label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+    line-height: 1;
+  }
+
+  /* Navigation prev / next arrows */
+  .dl-calendar .rdp-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: var(--cell-size, 2rem);
+    pointer-events: none;
+  }
+
+  .dl-calendar .rdp-button_previous,
+  .dl-calendar .rdp-button_next {
+    pointer-events: auto;
+    width: var(--cell-size, 2rem) !important;
+    height: var(--cell-size, 2rem) !important;
+    min-width: var(--cell-size, 2rem) !important;
+    padding: 0 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .dl-calendar .rdp-button_previous:hover,
+  .dl-calendar .rdp-button_next:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .dl-calendar .rdp-button_previous svg,
+  .dl-calendar .rdp-button_next svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  /* Grid Table */
+  .dl-calendar table.rdp-month_grid,
+  .dl-calendar table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+  }
+
+  /* Weekday header cells */
+  .dl-calendar th.rdp-weekday,
+  .dl-calendar th {
+    width: calc(100% / 7);
+    height: var(--cell-size, 2rem);
+    text-align: center;
+    vertical-align: middle;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  /* Day table cells */
+  .dl-calendar td.rdp-day,
+  .dl-calendar td {
+    width: calc(100% / 7);
+    height: var(--cell-size, 2rem);
+    padding: 2px !important;
+    margin: 0;
+    text-align: center;
+    vertical-align: middle;
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-sizing: border-box;
+  }
+
+  /* Day Button inside td */
+  .dl-calendar button.rdp-day_button,
+  .dl-calendar .dl-calendar__day-button {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    border: none !important;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--foreground);
+    background: transparent;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: all 0.15s ease;
+  }
+
+  .dl-calendar button.rdp-day_button:hover:not(:disabled) {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* Selected Date Highlight */
+  .dl-calendar td[aria-selected="true"] button.rdp-day_button,
+  .dl-calendar td.rdp-selected button.rdp-day_button,
+  .dl-calendar button.rdp-day_button[data-selected="true"],
+  .dl-calendar button.rdp-day_button[data-selected-single="true"] {
+    background-color: var(--primary) !important;
+    color: var(--primary-foreground) !important;
+    border-radius: var(--radius-md, 0.375rem) !important;
+    font-weight: 600;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+  }
+
+  .dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
+  .dl-calendar td.rdp-selected button.rdp-day_button:hover,
+  .dl-calendar button.rdp-day_button[data-selected="true"]:hover,
+  .dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
+    background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
+    color: var(--primary-foreground) !important;
+  }
+
+  /* Today indicator (when not selected) */
+  .dl-calendar
+    td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
+    button.rdp-day_button {
+    background-color: color-mix(
+      in oklch,
+      var(--secondary) 60%,
+      transparent
+    ) !important;
+    color: var(--foreground) !important;
+    font-weight: 600;
+    border: 1px solid var(--border) !important;
+  }
+
+  /* Range selection styles */
+  .dl-calendar td.rdp-range_start {
+    background-color: var(--accent) !important;
+    border-top-left-radius: var(--radius-md, 0.375rem) !important;
+    border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
+  }
+
+  .dl-calendar td.rdp-range_middle {
+    background-color: var(--accent) !important;
+    border-radius: 0 !important;
+  }
+
+  .dl-calendar td.rdp-range_middle button.rdp-day_button {
+    background: transparent !important;
+    color: var(--accent-foreground) !important;
+    border-radius: 0 !important;
+  }
+
+  .dl-calendar td.rdp-range_end {
+    background-color: var(--accent) !important;
+    border-top-right-radius: var(--radius-md, 0.375rem) !important;
+    border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
+  }
+
+  .dl-calendar td.rdp-outside button.rdp-day_button {
+    color: var(--muted-foreground) !important;
+    opacity: 0.35;
+  }
+
+  .dl-calendar button.rdp-day_button:disabled {
+    color: var(--muted-foreground) !important;
+    opacity: 0.25;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .dl-calendar td.rdp-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   /* ── card ── */
   .dl-card {
     border-radius: var(--radius-lg, 0.5rem);
@@ -820,6 +1060,8 @@
     cursor: pointer;
     transition: all 0.15s ease;
     user-select: none;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .dl-copy-button:hover {
@@ -865,9 +1107,15 @@
     flex-shrink: 0;
   }
 
-  .dl-date-picker-content {
-    width: auto;
-    padding: 0;
+  .dl-date-picker-content,
+  .dl-popover.dl-date-picker-content {
+    width: fit-content !important;
+    max-width: fit-content !important;
+    padding: 0 !important;
+    box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover);
   }
 
   /* ── dialog ── */
@@ -1247,7 +1495,7 @@
   .dl-input {
     display: block;
     width: 100%;
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--input);
     background-color: transparent;
@@ -1332,8 +1580,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
+    width: var(--control-height-md, 2.25rem);
+    height: var(--control-height-md, 2.25rem);
     border-top: 1px solid var(--input);
     border-bottom: 1px solid var(--input);
     border-right: 1px solid var(--input);
@@ -1755,6 +2003,11 @@
     animation: dl-fade-out 150ms ease;
   }
 
+  .dl-popover.dl-date-picker-content {
+    width: auto;
+    padding: 0;
+  }
+
   /* ── progress ── */
   .dl-progress {
     position: relative;
@@ -2073,6 +2326,7 @@
     border: 1px solid var(--border);
     border-radius: calc(var(--radius, 0.5rem) - 2px);
     padding: 0.5rem 0.75rem;
+    flex-wrap: nowrap;
   }
 
   .dl-secret-reveal__code {
@@ -2081,25 +2335,33 @@
     color: var(--primary);
     word-break: break-all;
     user-select: all;
+    min-width: 0;
+    flex: 1;
   }
 
   /* ── select ── */
   .dl-select-trigger {
     display: inline-flex;
     width: 100%;
-    min-height: 1.75rem;
+    height: var(--control-height-md, 2.25rem);
+    min-height: var(--control-height-md, 2.25rem);
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--input);
     background-color: transparent;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
+    padding: 0 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
     font-family: inherit;
+    font-weight: 400;
     cursor: pointer;
     color: var(--foreground);
     box-shadow: 0 1px 2px rgb(0 0 0/0.05);
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
   }
   .dl-select-trigger[data-placeholder] {
     color: var(--muted-foreground);
@@ -2114,11 +2376,25 @@
   }
   .dl-select-trigger > svg {
     opacity: 0.5;
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 1rem;
+    height: 1rem;
     flex-shrink: 0;
   }
 
+  /* Sizes */
+  .dl-select-trigger--sm {
+    height: var(--control-height-sm, 2rem);
+    min-height: var(--control-height-sm, 2rem);
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+  }
+  .dl-select-trigger--lg {
+    height: var(--control-height-lg, 2.5rem);
+    min-height: var(--control-height-lg, 2.5rem);
+    padding: 0 1rem;
+    font-size: 1rem;
+  }
+
   .dl-select-content {
     position: relative;
     z-index: 50;
@@ -2152,10 +2428,13 @@
     cursor: pointer;
     align-items: center;
     border-radius: var(--radius-sm, 0.25rem);
-    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
-    font-size: 0.75rem;
+    padding: 0.375rem 0.625rem 0.375rem 2rem;
+    font-size: 0.875rem;
     outline: none;
     user-select: none;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
   }
   .dl-select-item:focus,
   .dl-select-item[data-highlighted] {
@@ -2168,12 +2447,12 @@
   }
   .dl-select-item__indicator {
     position: absolute;
-    left: 0.5rem;
+    left: 0.625rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 0.875rem;
+    height: 0.875rem;
   }
   .dl-select-label {
     padding: 0.25rem 0.5rem;

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@yuva-devlab/ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
+  "description": "Production-ready, accessible React 19 component library built on Radix UI and Tailwind CSS 4 design tokens for Yuva DevLab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuvadevlab/devlab-shared.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/yuvadevlab/devlab-shared/issues"
+  },
+  "keywords": [
+    "react",
+    "react-19",
+    "ui",
+    "components",
+    "radix-ui",
+    "tailwindcss",
+    "design-system",
+    "devlab"
+  ],
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -72,7 +91,7 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^3.25.76",
-    "@yuva-devlab/tokens": "1.3.0"
+    "@yuva-devlab/tokens": "1.3.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",