@a4ui/core 0.25.0 → 0.26.0

package/README.md

@@ -188,12 +188,12 @@ full list):
 
 | Category       | Representative components                                                                                                                                                                                                                                                                                          |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`                                                                                                                                                                                      |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`                                                                                                                                                                        |
 | Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                                                                 |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CalendarHeatmap`                                                                                                                                     |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                                                             |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `CalendarHeatmap`                                                                                                                         |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`                                                                                                                                                                                                            |
 | Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                               |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`                                                                                                                                                                                        |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`                                                                                                                                                                        |
 | Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                              |
 | Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                   |
 | Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `flyToCart` |

package/dist/elements.css

@@ -1355,6 +1355,9 @@ video {
     max-width: 1536px;
   }
 }
+.pressed {
+  box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
+}
 .card {
   position: relative;
   background: hsl(var(--card) / 0.55);
@@ -2043,6 +2046,9 @@ html.calm .tile-glass {
 .min-w-\[4rem\] {
   min-width: 4rem;
 }
+.min-w-\[6\.5rem\] {
+  min-width: 6.5rem;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -2409,6 +2415,10 @@ html.calm .tile-glass {
 .rounded-xl {
   border-radius: 1rem;
 }
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -2437,6 +2447,9 @@ html.calm .tile-glass {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-b-2 {
+  border-bottom-width: 2px;
+}
 .border-l {
   border-left-width: 1px;
 }
@@ -2472,6 +2485,10 @@ html.calm .tile-glass {
 .border-emerald-500\/30 {
   border-color: rgb(16 185 129 / 0.3);
 }
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
+}
 .border-input {
   --tw-border-opacity: 1;
   border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
@@ -2499,6 +2516,9 @@ html.calm .tile-glass {
 .border-sky-500\/30 {
   border-color: rgb(14 165 233 / 0.3);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .bg-accent {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
@@ -2780,6 +2800,9 @@ html.calm .tile-glass {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2798,9 +2821,15 @@ html.calm .tile-glass {
 .pr-1 {
   padding-right: 0.25rem;
 }
+.pr-1\.5 {
+  padding-right: 0.375rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -3287,6 +3316,9 @@ html.calm .tile-glass {
 .duration-500 {
   transition-duration: 500ms;
 }
+.ease-\[\2026\] {
+  transition-timing-function: …;
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3296,6 +3328,9 @@ html.calm .tile-glass {
 .will-change-transform {
   will-change: transform;
 }
+.\[scrollbar-width\:none\] {
+  scrollbar-width: none;
+}
 .placeholder\:text-muted-foreground::placeholder {
   --tw-text-opacity: 1;
   color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -3380,6 +3415,9 @@ html.calm .tile-glass {
 .hover\:bg-muted\/40:hover {
   background-color: hsl(var(--muted) / 0.4);
 }
+.hover\:bg-muted\/60:hover {
+  background-color: hsl(var(--muted) / 0.6);
+}
 .hover\:bg-muted\/70:hover {
   background-color: hsl(var(--muted) / 0.7);
 }
@@ -3597,6 +3635,10 @@ html.calm .tile-glass {
     display: block;
   }
 
+  .sm\:max-h-\[28rem\] {
+    max-height: 28rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3605,6 +3647,10 @@ html.calm .tile-glass {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-\[16rem_1fr\] {
+    grid-template-columns: 16rem 1fr;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3696,6 +3742,9 @@ html.calm .tile-glass {
 .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
   display: none;
 }
+.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+  display: none;
+}
 .\[\&\[data-expanded\]\>svg\]\:rotate-90[data-expanded]>svg {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/full.css

@@ -1355,6 +1355,9 @@ video {
     max-width: 1536px;
   }
 }
+.pressed {
+  box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
+}
 .card {
   position: relative;
   background: hsl(var(--card) / 0.55);
@@ -2043,6 +2046,9 @@ html.calm .tile-glass {
 .min-w-\[4rem\] {
   min-width: 4rem;
 }
+.min-w-\[6\.5rem\] {
+  min-width: 6.5rem;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -2409,6 +2415,10 @@ html.calm .tile-glass {
 .rounded-xl {
   border-radius: 1rem;
 }
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -2437,6 +2447,9 @@ html.calm .tile-glass {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-b-2 {
+  border-bottom-width: 2px;
+}
 .border-l {
   border-left-width: 1px;
 }
@@ -2472,6 +2485,10 @@ html.calm .tile-glass {
 .border-emerald-500\/30 {
   border-color: rgb(16 185 129 / 0.3);
 }
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
+}
 .border-input {
   --tw-border-opacity: 1;
   border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
@@ -2499,6 +2516,9 @@ html.calm .tile-glass {
 .border-sky-500\/30 {
   border-color: rgb(14 165 233 / 0.3);
 }
+.border-transparent {
+  border-color: transparent;
+}
 .bg-accent {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
@@ -2780,6 +2800,9 @@ html.calm .tile-glass {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2798,9 +2821,15 @@ html.calm .tile-glass {
 .pr-1 {
   padding-right: 0.25rem;
 }
+.pr-1\.5 {
+  padding-right: 0.375rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -3287,6 +3316,9 @@ html.calm .tile-glass {
 .duration-500 {
   transition-duration: 500ms;
 }
+.ease-\[\2026\] {
+  transition-timing-function: …;
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3296,6 +3328,9 @@ html.calm .tile-glass {
 .will-change-transform {
   will-change: transform;
 }
+.\[scrollbar-width\:none\] {
+  scrollbar-width: none;
+}
 .placeholder\:text-muted-foreground::placeholder {
   --tw-text-opacity: 1;
   color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -3380,6 +3415,9 @@ html.calm .tile-glass {
 .hover\:bg-muted\/40:hover {
   background-color: hsl(var(--muted) / 0.4);
 }
+.hover\:bg-muted\/60:hover {
+  background-color: hsl(var(--muted) / 0.6);
+}
 .hover\:bg-muted\/70:hover {
   background-color: hsl(var(--muted) / 0.7);
 }
@@ -3597,6 +3635,10 @@ html.calm .tile-glass {
     display: block;
   }
 
+  .sm\:max-h-\[28rem\] {
+    max-height: 28rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3605,6 +3647,10 @@ html.calm .tile-glass {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-\[16rem_1fr\] {
+    grid-template-columns: 16rem 1fr;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3696,6 +3742,9 @@ html.calm .tile-glass {
 .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
   display: none;
 }
+.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+  display: none;
+}
 .\[\&\[data-expanded\]\>svg\]\:rotate-90[data-expanded]>svg {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.25.0";
+export declare const A4UI_VERSION = "0.26.0";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -7,6 +7,7 @@ export { useMediaQuery } from './lib/media';
 export { remeasureAfterLayout } from './lib/virtual';
 export { createOptimistic } from './lib/createOptimistic';
 export { startViewTransition } from './lib/viewTransition';
+export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing';
 export { Accordion, type AccordionItem } from './ui/Accordion';
 export { Badge, type BadgeTone } from './ui/Badge';
 export { Button, type ButtonVariant } from './ui/Button';
@@ -110,6 +111,10 @@ export { ArtifactPanel, type ArtifactPanelProps } from './ui/ArtifactPanel';
 export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar';
 export { PageTransition, type PageTransitionProps } from './ui/PageTransition';
 export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect';
+export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs';
+export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch';
+export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip';
+export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail';
 export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
 export { TextReveal, type TextRevealProps } from './ui/TextReveal';
 export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';