@roy-ui/ui 0.0.9 → 0.0.11

package/README.md

@@ -9,7 +9,7 @@
 [![types](https://img.shields.io/npm/types/@roy-ui/ui?color=3178C6&logo=typescript&logoColor=white)](https://www.npmjs.com/package/@roy-ui/ui)
 [![license](https://img.shields.io/npm/l/@roy-ui/ui?color=22c55e)](https://github.com/DibbayajyotiRoy/RoyUI/blob/main/LICENSE)
 
-**[Open the live documentation →](https://royui.dev/components/data-table)**
+**[Open the live documentation →](https://roy-ui-docs.vercel.app/components/data-table)**
 
 <a href="https://github.com/DibbayajyotiRoy/RoyUI/blob/main/apps/docs/lib/demo/linkedin2.mp4">
   <img
@@ -114,7 +114,7 @@ export default function OrdersTable({ orders }: { orders: Order[] }) {
 
 | Component | What it does |
 | --- | --- |
-| **[`DataTable<T>`](https://royui.dev/components/data-table)** | Generic, fully-featured **React data table**. Search across columns, sort, paginate, **drag headers to reorder**, **drag the right edge to resize**, **Columns menu** to hide & restore, **CSV / JSON export & import**, **per-zone typography** for headers / row-headers / cells, optional `fitColumns` to disable horizontal scroll, optional `localStorage` persistence. |
+| **[`DataTable<T>`](https://roy-ui-docs.vercel.app/components/data-table)** | Generic, fully-featured **React data table**. Search across columns, sort, paginate, **drag headers to reorder**, **drag the right edge to resize**, **Columns menu** to hide & restore, **CSV / JSON export & import**, **per-zone typography** for headers / row-headers / cells, optional `fitColumns` to disable horizontal scroll, optional `localStorage` persistence. |
 | **`Table`** + parts | Standalone primitive — `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`. Scrollable rows (`visibleRows`, default 7), sticky header, density scale (compact / cozy / comfortable), inline `Spinner`. |
 | **`TableSearch`** | Debounced search input, clear button, controlled & uncontrolled modes. |
 | **`Pagination`** | Numbered pages with text Prev / Next, ellipsis, optional `Page X of Y` summary. |
@@ -325,7 +325,7 @@ Yes. `dataIO.export.enabled` adds an Export button; `dataIO.import.enabled` adds
 
 ## Links
 
-- **Live documentation:** <https://royui.dev>
+- **Live documentation:** <https://roy-ui-docs.vercel.app>
 - **Source code:** <https://github.com/DibbayajyotiRoy/RoyUI>
 - **Issues:** <https://github.com/DibbayajyotiRoy/RoyUI/issues>
 - **Releases:** <https://github.com/DibbayajyotiRoy/RoyUI/releases>

package/dist/Card-6L4M4GFX.css

@@ -0,0 +1,270 @@
+.royui-card {
+  /* Surfaces and ink — every one is a variable. The default is a premium
+     off-white (not pure white), which reads warmer and reads on a white page.
+     Opt into dark with theme="dark" (.royui-card--dark) or theme="auto". */
+  --royui-card-bg: #fafaf8;
+  --royui-card-fg: #1a1a1c;
+  --royui-card-muted: rgba(0, 0, 0, 0.52);
+  --royui-card-faint: rgba(0, 0, 0, 0.42);
+  --royui-card-line: rgba(0, 0, 0, 0.08);
+  --royui-card-radius: 24px;
+  /* A thin frame around the photo. Inner radius = radius − pad keeps the
+     corners concentric (24 − 8 = 16, the gallery's own radius). */
+  --royui-card-pad: 8px;
+  --royui-card-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  /* The price reads as premium when it's large and light, not bold. */
+  --royui-card-price-weight: 500;
+  /* Selection stays legible on the surface — a soft tint, not the browser blue. */
+  --royui-card-selection-bg: rgba(20, 20, 22, 0.12);
+  --royui-card-selection-fg: #1a1a1c;
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 360px;
+  /* The card is its own query container, so type scales to the card's width
+     (cqi units below) rather than the viewport — it fits in a sidebar, a
+     grid cell, or full-bleed without a media query. */
+  container-type: inline-size;
+  padding: var(--royui-card-pad);
+  background: var(--royui-card-bg);
+  color: var(--royui-card-fg);
+  border-radius: var(--royui-card-radius);
+  font-family: inherit;
+  /* A ring, a contact shadow, and a soft cast — the card rests, it doesn't
+     float. The ring is firm enough to hold the edge on a white background. */
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.07),
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 14px 34px -16px rgba(0, 0, 0, 0.22);
+  transition:
+    transform 300ms var(--royui-card-ease),
+    box-shadow 300ms var(--royui-card-ease);
+}
+
+.royui-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 4px rgba(0, 0, 0, 0.05),
+    0 22px 48px -18px rgba(0, 0, 0, 0.28);
+}
+/* The photo eases in a hair as the whole card lifts — barely there. */
+.royui-card--interactive:hover .royui-carousel__img {
+  transform: scale(1.045);
+}
+
+/* Force a legible selection — the browser default can wash text out on the
+   off-white surface. */
+.royui-card ::selection {
+  background: var(--royui-card-selection-bg);
+  color: var(--royui-card-selection-fg);
+}
+
+/* ── Badge ───────────────────────────────────────────────────────────── */
+.royui-card__badge {
+  position: absolute;
+  top: 11px;
+  left: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px 4px 7px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(10px) saturate(1.2);
+  backdrop-filter: blur(10px) saturate(1.2);
+  border-radius: 99px;
+  color: #1a1a1c;
+  font-size: 12px;
+  font-size: clamp(11px, 3.7cqi, 12px);
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1;
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.04),
+    0 1px 2px rgba(0, 0, 0, 0.1),
+    0 3px 10px -3px rgba(0, 0, 0, 0.22);
+}
+.royui-card__badge-icon {
+  display: inline-flex;
+  color: #f5b400;
+}
+
+/* ── Body ────────────────────────────────────────────────────────────── */
+/* Horizontal padding insets the text a touch past the photo edge; the photo
+   and button sit at the card padding so they share one clean vertical line. */
+.royui-card__body {
+  padding: 14px 6px 2px;
+}
+
+.royui-card__price-row {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  min-width: 0;
+}
+.royui-card__price {
+  font-size: 23px;
+  font-size: clamp(18px, 7.2cqi, 23px);
+  font-weight: var(--royui-card-price-weight);
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+}
+.royui-card__price-label {
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+  font-weight: 450;
+  color: var(--royui-card-muted);
+}
+
+.royui-card__subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  font-size: clamp(12.5px, 4.4cqi, 14px);
+  line-height: 1.4;
+  color: var(--royui-card-muted);
+}
+
+.royui-card__divider {
+  height: 1px;
+  margin: 14px 0;
+  background: var(--royui-card-line);
+}
+
+/* Stats stay on one row and sit flush to both content edges, so the left and
+   right margins from the card border match. The hairline divider rides the
+   middle. */
+.royui-card__stats {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  gap: clamp(8px, 3.2cqi, 10px);
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+  color: var(--royui-card-fg);
+}
+.royui-card__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  white-space: nowrap;
+}
+.royui-card__stat-sep {
+  flex: none;
+  width: 1px;
+  height: 15px;
+  background: var(--royui-card-line);
+}
+.royui-card__stat-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--royui-card-faint);
+}
+/* The figure carries weight; the descriptor is dimmed, like the reference. */
+.royui-card__stat-value {
+  color: var(--royui-card-fg);
+}
+.royui-card__stat-label {
+  color: var(--royui-card-muted);
+}
+
+.royui-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  margin-top: 14px;
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+}
+.royui-card__author {
+  color: var(--royui-card-muted);
+  min-width: 0;
+}
+.royui-card__author-link {
+  color: var(--royui-card-fg);
+  font-weight: 550;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--royui-card-line);
+  transition: text-decoration-color 180ms var(--royui-card-ease);
+}
+a.royui-card__author-link:hover {
+  text-decoration-color: currentColor;
+}
+.royui-card__meta {
+  color: var(--royui-card-faint);
+  white-space: nowrap;
+}
+
+.royui-card__action {
+  margin-top: 16px;
+}
+
+/* ── Dark theme ──────────────────────────────────────────────────────────
+   Opt in with theme="dark" (.royui-card--dark). theme="auto" (.royui-card--auto)
+   applies the same tokens only when the OS asks for dark — so the default light
+   card is never silently swapped out from under a dark page. */
+.royui-card--dark {
+  --royui-card-bg: #161617;
+  --royui-card-fg: #f5f5f7;
+  --royui-card-muted: rgba(255, 255, 255, 0.55);
+  --royui-card-faint: rgba(255, 255, 255, 0.4);
+  --royui-card-line: rgba(255, 255, 255, 0.1);
+  --royui-card-selection-bg: rgba(245, 245, 247, 0.2);
+  --royui-card-selection-fg: #f5f5f7;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 14px 34px -16px rgba(0, 0, 0, 0.6);
+}
+.royui-card--dark.royui-card--interactive:hover {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.12),
+    0 22px 48px -18px rgba(0, 0, 0, 0.7);
+}
+.royui-card--dark .royui-card__badge {
+  background: rgba(28, 28, 30, 0.82);
+  color: #f5f5f7;
+}
+
+@media (prefers-color-scheme: dark) {
+  .royui-card--auto {
+    --royui-card-bg: #161617;
+    --royui-card-fg: #f5f5f7;
+    --royui-card-muted: rgba(255, 255, 255, 0.55);
+    --royui-card-faint: rgba(255, 255, 255, 0.4);
+    --royui-card-line: rgba(255, 255, 255, 0.1);
+    --royui-card-selection-bg: rgba(245, 245, 247, 0.2);
+    --royui-card-selection-fg: #f5f5f7;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.1),
+      0 14px 34px -16px rgba(0, 0, 0, 0.6);
+  }
+  .royui-card--auto.royui-card--interactive:hover {
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.12),
+      0 22px 48px -18px rgba(0, 0, 0, 0.7);
+  }
+  .royui-card--auto .royui-card__badge {
+    background: rgba(28, 28, 30, 0.82);
+    color: #f5f5f7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-card,
+  .royui-card--interactive:hover {
+    transition: none;
+    transform: none;
+  }
+  .royui-card--interactive:hover .royui-carousel__img {
+    transform: none;
+  }
+}

package/dist/ImageCarousel-4L4MNUP2.css

@@ -0,0 +1,148 @@
+.royui-carousel {
+  /* Tunables — radius and ratio are the ones you'll reach for most. */
+  --royui-carousel-ratio: 4 / 3;
+  --royui-carousel-radius: 16px;
+  --royui-carousel-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --royui-carousel-dot: rgba(255, 255, 255, 0.55);
+  --royui-carousel-dot-active: #ffffff;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--royui-carousel-radius);
+  aspect-ratio: var(--royui-carousel-ratio);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.royui-carousel__viewport {
+  width: 100%;
+  height: 100%;
+  /* Let the browser own vertical scroll; we only claim the horizontal axis. */
+  touch-action: pan-y;
+  cursor: grab;
+  -webkit-tap-highlight-color: transparent;
+}
+.royui-carousel__viewport:active {
+  cursor: grabbing;
+}
+.royui-carousel__viewport:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.9);
+  outline-offset: -2px;
+}
+
+.royui-carousel__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  /* The signature slide — long, eased, with a touch of overshoot at the tail. */
+  transition: transform 520ms var(--royui-carousel-ease);
+  will-change: transform;
+}
+/* While the finger is down the track tracks the pointer 1:1, no easing. */
+.royui-carousel__track--dragging {
+  transition: none;
+}
+
+.royui-carousel__slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.royui-carousel__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  /* Hover-zoom is driven by the card; the transition lives here. */
+  transition: transform 700ms var(--royui-carousel-ease);
+}
+
+/* A faint floor of shade so white dots stay legible over any photo. */
+.royui-carousel__scrim {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 38%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 320ms var(--royui-carousel-ease);
+  pointer-events: none;
+}
+.royui-carousel--has-dots .royui-carousel__scrim {
+  opacity: 1;
+}
+
+.royui-carousel__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+/* Re-enable interaction for whatever the overlay actually contains. */
+.royui-carousel__overlay > * {
+  pointer-events: auto;
+}
+
+.royui-carousel__dots {
+  position: absolute;
+  inset: auto 0 12px 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.royui-carousel__dot {
+  width: 6px;
+  height: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 99px;
+  background: var(--royui-carousel-dot);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* The active dot doesn't pop — it stretches into a pill. */
+  transition:
+    width 380ms var(--royui-carousel-ease),
+    background 380ms var(--royui-carousel-ease),
+    opacity 380ms var(--royui-carousel-ease);
+}
+.royui-carousel__dot:hover {
+  background: rgba(255, 255, 255, 0.85);
+}
+.royui-carousel__dot--active {
+  width: 20px;
+  background: var(--royui-carousel-dot-active);
+}
+.royui-carousel__dot:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+/* Screen-reader-only live region. */
+.royui-carousel__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-carousel__track,
+  .royui-carousel__img,
+  .royui-carousel__dot,
+  .royui-carousel__scrim {
+    transition: none;
+  }
+}

package/dist/{TimePicker-44EKHQEJ.css → TimePicker-LNKWKRLX.css}

@@ -15,7 +15,9 @@
   --royui-tp-hand-quiet: rgba(20, 20, 20, 0.4);
   --royui-tp-hand-active: rgb(20, 20, 20);
   --royui-tp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --royui-tp-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
   --royui-tp-dur: 160ms;
+  --royui-tp-dur-lg: 320ms;
 
   position: relative;
   display: inline-block;
@@ -97,12 +99,31 @@
 }
 
 .royui-tp__variants {
+  position: relative;
   display: inline-flex;
   background: var(--royui-tp-hover-bg);
   border-radius: 7px;
   padding: 2px;
 }
+/* Sliding pill — tracks the active variant. */
+.royui-tp__variant-thumb {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 2px;
+  width: calc(50% - 2px);
+  background: var(--royui-tp-bg);
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: transform var(--royui-tp-dur-lg) var(--royui-tp-spring);
+  pointer-events: none;
+}
+.royui-tp__variants[data-active='digital'] .royui-tp__variant-thumb {
+  transform: translateX(100%);
+}
 .royui-tp__variant {
+  position: relative;
+  z-index: 1;
   background: transparent;
   border: 0;
   padding: 4px 10px;
@@ -111,17 +132,13 @@
   color: var(--royui-tp-muted);
   cursor: pointer;
   border-radius: 5px;
-  transition:
-    background var(--royui-tp-dur) var(--royui-tp-ease),
-    color var(--royui-tp-dur) var(--royui-tp-ease);
+  transition: color var(--royui-tp-dur) var(--royui-tp-ease);
 }
 .royui-tp__variant:hover {
   color: var(--royui-tp-fg);
 }
 .royui-tp__variant--on {
-  background: var(--royui-tp-bg);
   color: var(--royui-tp-fg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .royui-tp__body {
@@ -130,6 +147,38 @@
   padding: 4px 0 8px;
 }
 
+/* ── Analog ↔ Digital crossfade ─────────────────────────── */
+
+.royui-tp__switch {
+  position: relative;
+  width: 100%;
+  transition: height var(--royui-tp-dur-lg) var(--royui-tp-ease);
+  overflow: hidden;
+}
+.royui-tp__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.96);
+  filter: blur(4px);
+  pointer-events: none;
+  transition:
+    opacity var(--royui-tp-dur-lg) var(--royui-tp-ease),
+    transform var(--royui-tp-dur-lg) var(--royui-tp-ease),
+    filter var(--royui-tp-dur-lg) var(--royui-tp-ease);
+}
+.royui-tp__layer--active {
+  position: relative;
+  opacity: 1;
+  transform: none;
+  filter: none;
+  pointer-events: auto;
+}
+
 /* ── Analog ─────────────────────────────────────────────── */
 
 .royui-tp-analog {
@@ -373,6 +422,74 @@
   border: 1px solid var(--royui-tp-accent);
 }
 
+/* ── Range — Start / End legs ───────────────────────────── */
+
+.royui-trp__legs {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  background: var(--royui-tp-hover-bg);
+  border-radius: 9px;
+  padding: 3px;
+  margin-bottom: 12px;
+}
+.royui-trp__leg-thumb {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  width: calc(50% - 3px);
+  background: var(--royui-tp-bg);
+  border: 1px solid var(--royui-tp-border);
+  border-radius: 7px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
+  transition: transform var(--royui-tp-dur-lg) var(--royui-tp-spring);
+  pointer-events: none;
+}
+.royui-trp__legs[data-active='to'] .royui-trp__leg-thumb {
+  transform: translateX(100%);
+}
+.royui-trp__leg {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  background: transparent;
+  border: 0;
+  padding: 6px 11px;
+  border-radius: 7px;
+  cursor: pointer;
+  font: inherit;
+}
+.royui-trp__leg-label {
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--royui-tp-subtle);
+  transition: color var(--royui-tp-dur) var(--royui-tp-ease);
+}
+.royui-trp__leg-time {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--royui-tp-muted);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  transition: color var(--royui-tp-dur) var(--royui-tp-ease);
+}
+.royui-trp__leg[aria-selected='true'] .royui-trp__leg-label {
+  color: var(--royui-tp-muted);
+}
+.royui-trp__leg[aria-selected='true'] .royui-trp__leg-time {
+  color: var(--royui-tp-fg);
+}
+.royui-trp__leg:hover .royui-trp__leg-time {
+  color: var(--royui-tp-fg);
+}
+
 @keyframes royui-tp-in {
   from { opacity: 0; transform: translateY(-4px) scale(0.98); }
   to   { opacity: 1; transform: none; }
@@ -408,4 +525,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   .royui-tp__panel { animation: none; }
+  .royui-tp__switch,
+  .royui-tp__layer,
+  .royui-tp__variant-thumb,
+  .royui-trp__leg-thumb {
+    transition: none;
+  }
 }

package/dist/{TimePicker-BhRta4MK.d.ts → TimeRangePicker-CgkOBnk6.d.ts}

@@ -36,4 +36,28 @@ interface TimePickerProps {
 declare function formatTime(t: TimeValue | null | undefined, hourCycle?: 12 | 24): string;
 declare function TimePicker({ value, defaultValue, onChange, variant, switchable, hourCycle, minuteStep, placeholder, align, className, style, triggerLabel, disabled, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AnalogClock as A, TimePicker as T, type AnalogClockProps as a, type TimePickerProps as b, type TimePickerVariant as c, type TimeValue as d, formatTime as f };
+type TimeRangeValue = {
+    from: TimeValue | null;
+    to: TimeValue | null;
+};
+interface TimeRangePickerProps {
+    value?: TimeRangeValue | null;
+    defaultValue?: TimeRangeValue | null;
+    onChange?: (next: TimeRangeValue) => void;
+    /** Picker style. Default 'analog'. */
+    variant?: TimePickerVariant;
+    /** Allow the user to switch between variants. Default true. */
+    switchable?: boolean;
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    placeholder?: string;
+    align?: 'left' | 'right';
+    className?: string;
+    style?: CSSProperties;
+    triggerLabel?: ReactNode;
+    disabled?: boolean;
+}
+declare function formatTimeRange(range: TimeRangeValue | null | undefined, hourCycle?: 12 | 24): string;
+declare function TimeRangePicker({ value, defaultValue, onChange, variant, switchable, hourCycle, minuteStep, placeholder, align, className, style, triggerLabel, disabled, }: TimeRangePickerProps): react_jsx_runtime.JSX.Element;
+
+export { AnalogClock as A, TimePicker as T, type AnalogClockProps as a, type TimePickerProps as b, type TimePickerVariant as c, TimeRangePicker as d, type TimeRangePickerProps as e, type TimeRangeValue as f, type TimeValue as g, formatTime as h, formatTimeRange as i };