@a4ui/core 0.25.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -188,12 +188,12 @@ full list):
188
188
 
189
189
  | Category | Representative components |
190
190
  | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
191
- | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect` |
192
- | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
193
- | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CalendarHeatmap` |
194
- | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
191
+ | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch` |
192
+ | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu` |
193
+ | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `CalendarHeatmap` |
194
+ | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip` |
195
195
  | Feedback | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
196
- | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel` |
196
+ | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail` |
197
197
  | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale` |
198
198
  | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
199
199
  | 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 CHANGED
@@ -1355,6 +1355,9 @@ video {
1355
1355
  max-width: 1536px;
1356
1356
  }
1357
1357
  }
1358
+ .pressed {
1359
+ box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
1360
+ }
1358
1361
  .card {
1359
1362
  position: relative;
1360
1363
  background: hsl(var(--card) / 0.55);
@@ -1505,6 +1508,9 @@ html.calm .tile-glass {
1505
1508
  .sticky {
1506
1509
  position: sticky;
1507
1510
  }
1511
+ .-inset-\[15\%\] {
1512
+ inset: -15%;
1513
+ }
1508
1514
  .inset-0 {
1509
1515
  inset: 0px;
1510
1516
  }
@@ -1872,6 +1878,9 @@ html.calm .tile-glass {
1872
1878
  .max-h-64 {
1873
1879
  max-height: 16rem;
1874
1880
  }
1881
+ .max-h-72 {
1882
+ max-height: 18rem;
1883
+ }
1875
1884
  .max-h-80 {
1876
1885
  max-height: 20rem;
1877
1886
  }
@@ -2028,6 +2037,9 @@ html.calm .tile-glass {
2028
2037
  .min-w-56 {
2029
2038
  min-width: 14rem;
2030
2039
  }
2040
+ .min-w-64 {
2041
+ min-width: 16rem;
2042
+ }
2031
2043
  .min-w-\[1\.1em\] {
2032
2044
  min-width: 1.1em;
2033
2045
  }
@@ -2043,6 +2055,9 @@ html.calm .tile-glass {
2043
2055
  .min-w-\[4rem\] {
2044
2056
  min-width: 4rem;
2045
2057
  }
2058
+ .min-w-\[6\.5rem\] {
2059
+ min-width: 6.5rem;
2060
+ }
2046
2061
  .min-w-\[8rem\] {
2047
2062
  min-width: 8rem;
2048
2063
  }
@@ -2409,6 +2424,10 @@ html.calm .tile-glass {
2409
2424
  .rounded-xl {
2410
2425
  border-radius: 1rem;
2411
2426
  }
2427
+ .rounded-l-full {
2428
+ border-top-left-radius: 9999px;
2429
+ border-bottom-left-radius: 9999px;
2430
+ }
2412
2431
  .rounded-l-md {
2413
2432
  border-top-left-radius: 0.375rem;
2414
2433
  border-bottom-left-radius: 0.375rem;
@@ -2437,6 +2456,9 @@ html.calm .tile-glass {
2437
2456
  .border-b {
2438
2457
  border-bottom-width: 1px;
2439
2458
  }
2459
+ .border-b-2 {
2460
+ border-bottom-width: 2px;
2461
+ }
2440
2462
  .border-l {
2441
2463
  border-left-width: 1px;
2442
2464
  }
@@ -2472,6 +2494,10 @@ html.calm .tile-glass {
2472
2494
  .border-emerald-500\/30 {
2473
2495
  border-color: rgb(16 185 129 / 0.3);
2474
2496
  }
2497
+ .border-foreground {
2498
+ --tw-border-opacity: 1;
2499
+ border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
2500
+ }
2475
2501
  .border-input {
2476
2502
  --tw-border-opacity: 1;
2477
2503
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
@@ -2499,6 +2525,9 @@ html.calm .tile-glass {
2499
2525
  .border-sky-500\/30 {
2500
2526
  border-color: rgb(14 165 233 / 0.3);
2501
2527
  }
2528
+ .border-transparent {
2529
+ border-color: transparent;
2530
+ }
2502
2531
  .bg-accent {
2503
2532
  --tw-bg-opacity: 1;
2504
2533
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
@@ -2780,6 +2809,9 @@ html.calm .tile-glass {
2780
2809
  .pb-1 {
2781
2810
  padding-bottom: 0.25rem;
2782
2811
  }
2812
+ .pb-2 {
2813
+ padding-bottom: 0.5rem;
2814
+ }
2783
2815
  .pb-3 {
2784
2816
  padding-bottom: 0.75rem;
2785
2817
  }
@@ -2798,9 +2830,15 @@ html.calm .tile-glass {
2798
2830
  .pr-1 {
2799
2831
  padding-right: 0.25rem;
2800
2832
  }
2833
+ .pr-1\.5 {
2834
+ padding-right: 0.375rem;
2835
+ }
2801
2836
  .pr-10 {
2802
2837
  padding-right: 2.5rem;
2803
2838
  }
2839
+ .pr-2 {
2840
+ padding-right: 0.5rem;
2841
+ }
2804
2842
  .pt-0 {
2805
2843
  padding-top: 0px;
2806
2844
  }
@@ -3154,6 +3192,10 @@ html.calm .tile-glass {
3154
3192
  --tw-blur: blur(8px);
3155
3193
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3156
3194
  }
3195
+ .blur-2xl {
3196
+ --tw-blur: blur(40px);
3197
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3198
+ }
3157
3199
  .blur-3xl {
3158
3200
  --tw-blur: blur(64px);
3159
3201
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3287,6 +3329,9 @@ html.calm .tile-glass {
3287
3329
  .duration-500 {
3288
3330
  transition-duration: 500ms;
3289
3331
  }
3332
+ .ease-\[\2026\] {
3333
+ transition-timing-function: …;
3334
+ }
3290
3335
  .ease-in-out {
3291
3336
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3292
3337
  }
@@ -3296,6 +3341,9 @@ html.calm .tile-glass {
3296
3341
  .will-change-transform {
3297
3342
  will-change: transform;
3298
3343
  }
3344
+ .\[scrollbar-width\:none\] {
3345
+ scrollbar-width: none;
3346
+ }
3299
3347
  .placeholder\:text-muted-foreground::placeholder {
3300
3348
  --tw-text-opacity: 1;
3301
3349
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -3380,6 +3428,9 @@ html.calm .tile-glass {
3380
3428
  .hover\:bg-muted\/40:hover {
3381
3429
  background-color: hsl(var(--muted) / 0.4);
3382
3430
  }
3431
+ .hover\:bg-muted\/60:hover {
3432
+ background-color: hsl(var(--muted) / 0.6);
3433
+ }
3383
3434
  .hover\:bg-muted\/70:hover {
3384
3435
  background-color: hsl(var(--muted) / 0.7);
3385
3436
  }
@@ -3597,6 +3648,10 @@ html.calm .tile-glass {
3597
3648
  display: block;
3598
3649
  }
3599
3650
 
3651
+ .sm\:max-h-\[28rem\] {
3652
+ max-height: 28rem;
3653
+ }
3654
+
3600
3655
  .sm\:grid-cols-2 {
3601
3656
  grid-template-columns: repeat(2, minmax(0, 1fr));
3602
3657
  }
@@ -3605,6 +3660,10 @@ html.calm .tile-glass {
3605
3660
  grid-template-columns: repeat(3, minmax(0, 1fr));
3606
3661
  }
3607
3662
 
3663
+ .sm\:grid-cols-\[16rem_1fr\] {
3664
+ grid-template-columns: 16rem 1fr;
3665
+ }
3666
+
3608
3667
  .sm\:flex-row {
3609
3668
  flex-direction: row;
3610
3669
  }
@@ -3696,6 +3755,9 @@ html.calm .tile-glass {
3696
3755
  .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
3697
3756
  display: none;
3698
3757
  }
3758
+ .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
3759
+ display: none;
3760
+ }
3699
3761
  .\[\&\[data-expanded\]\>svg\]\:rotate-90[data-expanded]>svg {
3700
3762
  --tw-rotate: 90deg;
3701
3763
  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 CHANGED
@@ -1355,6 +1355,9 @@ video {
1355
1355
  max-width: 1536px;
1356
1356
  }
1357
1357
  }
1358
+ .pressed {
1359
+ box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
1360
+ }
1358
1361
  .card {
1359
1362
  position: relative;
1360
1363
  background: hsl(var(--card) / 0.55);
@@ -1505,6 +1508,9 @@ html.calm .tile-glass {
1505
1508
  .sticky {
1506
1509
  position: sticky;
1507
1510
  }
1511
+ .-inset-\[15\%\] {
1512
+ inset: -15%;
1513
+ }
1508
1514
  .inset-0 {
1509
1515
  inset: 0px;
1510
1516
  }
@@ -1872,6 +1878,9 @@ html.calm .tile-glass {
1872
1878
  .max-h-64 {
1873
1879
  max-height: 16rem;
1874
1880
  }
1881
+ .max-h-72 {
1882
+ max-height: 18rem;
1883
+ }
1875
1884
  .max-h-80 {
1876
1885
  max-height: 20rem;
1877
1886
  }
@@ -2028,6 +2037,9 @@ html.calm .tile-glass {
2028
2037
  .min-w-56 {
2029
2038
  min-width: 14rem;
2030
2039
  }
2040
+ .min-w-64 {
2041
+ min-width: 16rem;
2042
+ }
2031
2043
  .min-w-\[1\.1em\] {
2032
2044
  min-width: 1.1em;
2033
2045
  }
@@ -2043,6 +2055,9 @@ html.calm .tile-glass {
2043
2055
  .min-w-\[4rem\] {
2044
2056
  min-width: 4rem;
2045
2057
  }
2058
+ .min-w-\[6\.5rem\] {
2059
+ min-width: 6.5rem;
2060
+ }
2046
2061
  .min-w-\[8rem\] {
2047
2062
  min-width: 8rem;
2048
2063
  }
@@ -2409,6 +2424,10 @@ html.calm .tile-glass {
2409
2424
  .rounded-xl {
2410
2425
  border-radius: 1rem;
2411
2426
  }
2427
+ .rounded-l-full {
2428
+ border-top-left-radius: 9999px;
2429
+ border-bottom-left-radius: 9999px;
2430
+ }
2412
2431
  .rounded-l-md {
2413
2432
  border-top-left-radius: 0.375rem;
2414
2433
  border-bottom-left-radius: 0.375rem;
@@ -2437,6 +2456,9 @@ html.calm .tile-glass {
2437
2456
  .border-b {
2438
2457
  border-bottom-width: 1px;
2439
2458
  }
2459
+ .border-b-2 {
2460
+ border-bottom-width: 2px;
2461
+ }
2440
2462
  .border-l {
2441
2463
  border-left-width: 1px;
2442
2464
  }
@@ -2472,6 +2494,10 @@ html.calm .tile-glass {
2472
2494
  .border-emerald-500\/30 {
2473
2495
  border-color: rgb(16 185 129 / 0.3);
2474
2496
  }
2497
+ .border-foreground {
2498
+ --tw-border-opacity: 1;
2499
+ border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
2500
+ }
2475
2501
  .border-input {
2476
2502
  --tw-border-opacity: 1;
2477
2503
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
@@ -2499,6 +2525,9 @@ html.calm .tile-glass {
2499
2525
  .border-sky-500\/30 {
2500
2526
  border-color: rgb(14 165 233 / 0.3);
2501
2527
  }
2528
+ .border-transparent {
2529
+ border-color: transparent;
2530
+ }
2502
2531
  .bg-accent {
2503
2532
  --tw-bg-opacity: 1;
2504
2533
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
@@ -2780,6 +2809,9 @@ html.calm .tile-glass {
2780
2809
  .pb-1 {
2781
2810
  padding-bottom: 0.25rem;
2782
2811
  }
2812
+ .pb-2 {
2813
+ padding-bottom: 0.5rem;
2814
+ }
2783
2815
  .pb-3 {
2784
2816
  padding-bottom: 0.75rem;
2785
2817
  }
@@ -2798,9 +2830,15 @@ html.calm .tile-glass {
2798
2830
  .pr-1 {
2799
2831
  padding-right: 0.25rem;
2800
2832
  }
2833
+ .pr-1\.5 {
2834
+ padding-right: 0.375rem;
2835
+ }
2801
2836
  .pr-10 {
2802
2837
  padding-right: 2.5rem;
2803
2838
  }
2839
+ .pr-2 {
2840
+ padding-right: 0.5rem;
2841
+ }
2804
2842
  .pt-0 {
2805
2843
  padding-top: 0px;
2806
2844
  }
@@ -3154,6 +3192,10 @@ html.calm .tile-glass {
3154
3192
  --tw-blur: blur(8px);
3155
3193
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3156
3194
  }
3195
+ .blur-2xl {
3196
+ --tw-blur: blur(40px);
3197
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3198
+ }
3157
3199
  .blur-3xl {
3158
3200
  --tw-blur: blur(64px);
3159
3201
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3287,6 +3329,9 @@ html.calm .tile-glass {
3287
3329
  .duration-500 {
3288
3330
  transition-duration: 500ms;
3289
3331
  }
3332
+ .ease-\[\2026\] {
3333
+ transition-timing-function: …;
3334
+ }
3290
3335
  .ease-in-out {
3291
3336
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3292
3337
  }
@@ -3296,6 +3341,9 @@ html.calm .tile-glass {
3296
3341
  .will-change-transform {
3297
3342
  will-change: transform;
3298
3343
  }
3344
+ .\[scrollbar-width\:none\] {
3345
+ scrollbar-width: none;
3346
+ }
3299
3347
  .placeholder\:text-muted-foreground::placeholder {
3300
3348
  --tw-text-opacity: 1;
3301
3349
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -3380,6 +3428,9 @@ html.calm .tile-glass {
3380
3428
  .hover\:bg-muted\/40:hover {
3381
3429
  background-color: hsl(var(--muted) / 0.4);
3382
3430
  }
3431
+ .hover\:bg-muted\/60:hover {
3432
+ background-color: hsl(var(--muted) / 0.6);
3433
+ }
3383
3434
  .hover\:bg-muted\/70:hover {
3384
3435
  background-color: hsl(var(--muted) / 0.7);
3385
3436
  }
@@ -3597,6 +3648,10 @@ html.calm .tile-glass {
3597
3648
  display: block;
3598
3649
  }
3599
3650
 
3651
+ .sm\:max-h-\[28rem\] {
3652
+ max-height: 28rem;
3653
+ }
3654
+
3600
3655
  .sm\:grid-cols-2 {
3601
3656
  grid-template-columns: repeat(2, minmax(0, 1fr));
3602
3657
  }
@@ -3605,6 +3660,10 @@ html.calm .tile-glass {
3605
3660
  grid-template-columns: repeat(3, minmax(0, 1fr));
3606
3661
  }
3607
3662
 
3663
+ .sm\:grid-cols-\[16rem_1fr\] {
3664
+ grid-template-columns: 16rem 1fr;
3665
+ }
3666
+
3608
3667
  .sm\:flex-row {
3609
3668
  flex-direction: row;
3610
3669
  }
@@ -3696,6 +3755,9 @@ html.calm .tile-glass {
3696
3755
  .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
3697
3756
  display: none;
3698
3757
  }
3758
+ .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
3759
+ display: none;
3760
+ }
3699
3761
  .\[\&\[data-expanded\]\>svg\]\:rotate-90[data-expanded]>svg {
3700
3762
  --tw-rotate: 90deg;
3701
3763
  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 CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.25.0";
1
+ export declare const A4UI_VERSION = "0.27.0";
2
2
  export { cn } from './lib/cn';
3
3
  export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
4
4
  export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -7,6 +7,8 @@ export { useMediaQuery } from './lib/media';
7
7
  export { remeasureAfterLayout } from './lib/virtual';
8
8
  export { createOptimistic } from './lib/createOptimistic';
9
9
  export { startViewTransition } from './lib/viewTransition';
10
+ export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing';
11
+ export { createLinkedSelection, type LinkedSelection } from './lib/createLinkedSelection';
10
12
  export { Accordion, type AccordionItem } from './ui/Accordion';
11
13
  export { Badge, type BadgeTone } from './ui/Badge';
12
14
  export { Button, type ButtonVariant } from './ui/Button';
@@ -110,6 +112,12 @@ export { ArtifactPanel, type ArtifactPanelProps } from './ui/ArtifactPanel';
110
112
  export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar';
111
113
  export { PageTransition, type PageTransitionProps } from './ui/PageTransition';
112
114
  export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect';
115
+ export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs';
116
+ export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch';
117
+ export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip';
118
+ export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail';
119
+ export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu';
120
+ export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView';
113
121
  export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
114
122
  export { TextReveal, type TextRevealProps } from './ui/TextReveal';
115
123
  export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';