@yuva-devlab/ui 1.4.4 → 2.1.0

package/dist/components/calendar/calendar.css

@@ -1,9 +1,9 @@
 .dl-calendar {
-  --cell-size: 2rem;
+  --cell-size: var(--control-height-sm, 2rem);
   display: inline-block;
   width: fit-content;
   max-width: 100%;
-  padding: 0.75rem;
+  padding: var(--space-3, 0.75rem);
   box-sizing: border-box;
   color: var(--foreground);
 }
@@ -13,7 +13,8 @@
   margin: 0 auto;
 }
 
-.dl-calendar .rdp-months {
+.dl-calendar .rdp-months,
+.dl-calendar .dl-calendar__months {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -22,81 +23,23 @@
   box-sizing: border-box;
 }
 
-.dl-calendar .rdp-month {
+@media (min-width: 768px) {
+  .dl-calendar .rdp-months,
+  .dl-calendar .dl-calendar__months {
+    flex-direction: row;
+  }
+}
+
+.dl-calendar .rdp-month,
+.dl-calendar .dl-calendar__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.dl-calendar__table,
 .dl-calendar table {
   width: 100%;
   border-collapse: collapse;
@@ -104,7 +47,6 @@
   margin: 0;
 }
 
-/* Weekday header cells */
 .dl-calendar th.rdp-weekday,
 .dl-calendar th {
   width: calc(100% / 7);
@@ -119,7 +61,6 @@
   box-sizing: border-box;
 }
 
-/* Day table cells */
 .dl-calendar td.rdp-day,
 .dl-calendar td {
   width: calc(100% / 7);
@@ -129,12 +70,19 @@
   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 .dl-calendar__week-number {
+  display: flex;
+  width: var(--cell-size, 2rem);
+  height: var(--cell-size, 2rem);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
 .dl-calendar button.rdp-day_button,
 .dl-calendar .dl-calendar__day-button {
   width: 100% !important;
@@ -146,10 +94,12 @@
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
+  aspect-ratio: 1 / 1;
   border-radius: var(--radius-md, 0.375rem) !important;
   border: none !important;
   font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1;
   color: var(--foreground);
   background: transparent;
   cursor: pointer;
@@ -162,7 +112,6 @@
   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"],
@@ -182,7 +131,6 @@
   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 {
@@ -196,11 +144,9 @@
   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;
+  border-radius: var(--radius-md, 0.375rem) 0 0 var(--radius-md, 0.375rem) !important;
 }
 
 .dl-calendar td.rdp-range_middle {
@@ -216,8 +162,7 @@
 
 .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;
+  border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) !important;
 }
 
 .dl-calendar td.rdp-outside button.rdp-day_button {

package/dist/components/calendar/calendar.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CalendarStories from "./calendar.stories";
+
+<Meta of={CalendarStories} />
+
+<Title />
+
+# Calendar
+
+Interactive calendar date selection component supporting day, month, and year navigation.
+
+## Default
+
+<Canvas of={CalendarStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/card/card.css

@@ -1,5 +1,5 @@
 .dl-card {
-  border-radius: var(--radius-lg, 0.5rem);
+  border-radius: var(--radius, 0.75rem);
   border: 1px solid var(--border);
   background-color: var(--card);
   color: var(--card-foreground);
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }
 .dl-card__title {
   font-weight: 600;
@@ -21,10 +21,10 @@
   color: var(--muted-foreground);
 }
 .dl-card__content {
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }
 .dl-card__footer {
   display: flex;
   align-items: center;
-  padding: 1.5rem;
+  padding: var(--card-padding, 1.5rem);
 }

package/dist/components/carousel/carousel.css

@@ -27,18 +27,18 @@
 }
 
 .dl-carousel-item--horizontal {
-  padding-left: 1rem;
+  padding-left: var(--space-4, 1rem);
 }
 
 .dl-carousel-item--vertical {
-  padding-top: 1rem;
+  padding-top: var(--space-4, 1rem);
 }
 
 .dl-carousel-btn {
   position: absolute;
   border-radius: 9999px;
-  width: 2rem;
-  height: 2rem;
+  width: var(--control-height-sm, 2rem);
+  height: var(--control-height-sm, 2rem);
   padding: 0;
 }
 

package/dist/components/carousel/carousel.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CarouselStories from "./carousel.stories";
+
+<Meta of={CarouselStories} />
+
+<Title />
+
+# Carousel
+
+Motion-driven cyclic slideshow component for cycling through sequential media or card elements.
+
+## Default
+
+<Canvas of={CarouselStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/chain-of-thought/chain-of-thought.css

@@ -0,0 +1,72 @@
+.dl-cot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid var(--border);
+  background-color: var(--secondary, var(--card));
+  font-size: 0.8125rem;
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+
+.dl-cot:hover {
+  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
+}
+
+.dl-cot__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: var(--foreground);
+}
+
+.dl-cot__summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+
+.dl-cot__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--muted-foreground);
+  transition: transform 0.2s ease;
+}
+
+.dl-cot[data-state="open"] .dl-cot__chevron {
+  transform: rotate(180deg);
+}
+
+.dl-cot__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem 0.75rem;
+  border-top: 1px solid var(--border);
+  background-color: var(--background);
+}
+
+.dl-cot__step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.dl-cot__step--running {
+  color: var(--foreground);
+}
+
+.dl-cot__step--error {
+  color: var(--destructive);
+}

package/dist/components/chain-of-thought/chain-of-thought.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas } from "@storybook/blocks";
+import * as ChainOfThoughtStories from "./chain-of-thought.stories";
+
+<Meta of={ChainOfThoughtStories} />
+
+<Title />
+
+# Chain of Thought
+
+Visual presentation for AI model reasoning processes, featuring execution duration timers, live animated thinking states, and expandable step lists.
+
+## Default Completed Thought
+
+<Canvas of={ChainOfThoughtStories.Default} />
+
+## Live Streaming / Currently Thinking
+
+<Canvas of={ChainOfThoughtStories.CurrentlyThinking} />

package/dist/components/chart/chart.css

@@ -30,9 +30,95 @@
   box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
 }
 
+.dl-chart-tooltip__label {
+  font-weight: 500;
+}
+.dl-chart-tooltip__grid {
+  display: grid;
+  gap: 0.375rem;
+}
+.dl-chart-tooltip__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+.dl-chart-tooltip__item--center {
+  align-items: center;
+}
+.dl-chart-tooltip__item svg {
+  color: var(--muted-foreground);
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.dl-chart-tooltip__indicator {
+  flex-shrink: 0;
+  border-radius: var(--radius-xs, 0.125rem);
+  background-color: var(--color-bg);
+}
+.dl-chart-tooltip__indicator--dot {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.dl-chart-tooltip__indicator--line {
+  width: 0.25rem;
+}
+.dl-chart-tooltip__indicator--dashed {
+  width: 0;
+  border: 1.5px dashed var(--color-border);
+  background: transparent;
+}
+.dl-chart-tooltip__indicator--nested {
+  margin-block: 0.125rem;
+}
+
+.dl-chart-tooltip__row {
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+.dl-chart-tooltip__row--end {
+  align-items: flex-end;
+}
+.dl-chart-tooltip__item-label {
+  color: var(--muted-foreground);
+}
+.dl-chart-tooltip__item-value {
+  font-family: var(--font-mono, monospace);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
 .dl-chart-legend {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
 }
+.dl-chart-legend--top {
+  padding-bottom: 0.75rem;
+}
+.dl-chart-legend--bottom {
+  padding-top: 0.75rem;
+}
+
+.dl-chart-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.dl-chart-legend__item svg {
+  color: var(--muted-foreground);
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.dl-chart-legend__indicator {
+  flex-shrink: 0;
+  border-radius: var(--radius-xs, 0.125rem);
+  width: 0.5rem;
+  height: 0.5rem;
+}

package/dist/components/chart/chart.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as ChartStories from "./chart.stories";
+
+<Meta of={ChartStories} />
+
+<Title />
+
+# Chart
+
+Responsive data visualization charting components powered by Recharts with design system token integration.
+
+## Default
+
+<Canvas of={ChartStories.Default} />
+
+## Component Properties
+
+<Controls />

package/dist/components/checkbox/checkbox.css

@@ -25,3 +25,14 @@
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
+
+.dl-checkbox-indicator {
+  display: grid;
+  place-content: center;
+  color: currentColor;
+}
+
+.dl-checkbox-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}

package/dist/components/checkpoint/checkpoint.css

@@ -0,0 +1,54 @@
+.dl-checkpoint {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 1.25rem 0;
+}
+
+.dl-checkpoint::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  background-color: var(--border);
+  z-index: 1;
+}
+
+.dl-checkpoint__content {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+}
+
+.dl-checkpoint__restore-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-weight: 500;
+  font-size: 0.6875rem;
+  color: var(--primary);
+  cursor: pointer;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  transition: all 0.15s ease;
+}
+
+.dl-checkpoint__restore-btn:hover {
+  background-color: color-mix(in oklch, var(--primary) 10%, transparent);
+}

package/dist/components/checkpoint/checkpoint.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Description, Canvas } from "@storybook/blocks";
+import * as CheckpointStories from "./checkpoint.stories";
+
+<Meta of={CheckpointStories} />
+
+<Title />
+
+# Checkpoint
+
+Divider marker indicating a significant milestone in conversational history with optional one-click restore capabilities.
+
+## Default with Restore Action
+
+<Canvas of={CheckpointStories.Default} />
+
+## Informational Checkpoint
+
+<Canvas of={CheckpointStories.WithoutRestore} />

package/dist/components/code-block/code-block.css

@@ -0,0 +1,84 @@
+.dl-code-block {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid var(--border);
+  background-color: var(--secondary, #0d1117);
+  color: var(--foreground);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-size: 0.8125rem;
+  overflow: hidden;
+}
+
+.dl-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--background);
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.dl-code-block__filename {
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.dl-code-block__language {
+  text-transform: uppercase;
+  font-size: 0.6875rem;
+  letter-spacing: 0.05em;
+  opacity: 0.8;
+}
+
+.dl-code-block__copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dl-code-block__copy-btn:hover {
+  background-color: var(--accent);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.dl-code-block__content {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+  line-height: 1.5;
+  tab-size: 2;
+}
+
+.dl-code-block__content--wrap {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.dl-code-block__line {
+  display: flex;
+  min-height: 1.25rem;
+}
+
+.dl-code-block__line-num {
+  display: inline-block;
+  width: 2rem;
+  padding-right: 0.75rem;
+  text-align: right;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  user-select: none;
+}

package/dist/components/code-block/code-block.mdx

@@ -0,0 +1,26 @@
+import { Meta, Title, Description, Canvas, Controls } from "@storybook/blocks";
+import * as CodeBlockStories from "./code-block.stories";
+
+<Meta of={CodeBlockStories} />
+
+<Title />
+
+# Code Block
+
+Syntax code snippet presentation container with filename badge, language label, line numbers, and one-click copy button.
+
+## Default with Copy & Line Numbers
+
+<Canvas of={CodeBlockStories.Default} />
+
+## Minimal Code Block (Without Header)
+
+<Canvas of={CodeBlockStories.WithoutHeader} />
+
+## Multi-Line SQL Schema
+
+<Canvas of={CodeBlockStories.LineNumbers} />
+
+## Component Properties
+
+<Controls />