@sableui/react 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # What's new
 
+## 0.3.1
+
+### Charts
+
+- **Smoother hover.** The tooltip is anchored to the data instead of chasing
+  the pointer, and glides between positions; the cursor and the active dots
+  glide too. Moving within one data position no longer re-renders the chart.
+  Hover feedback has its own quick timing — dimming the other bars no longer
+  waits out the arrival stagger.
+- Active dots on stacked areas draw above every series, so a later fill no
+  longer covers the dot below it.
+
+### Presets
+
+- Presets may carry the chart palette (`chart-1` … `chart-8`). Optional — a
+  preset without them inherits Base's validated set. On sableui.com,
+  Customize now generates a chart palette from the brand and the Palette
+  setting, held to the same colour-blind and normal-vision separation checks.
+
+### iOS
+
+- Layers portalled out of an iOS prototype (a toast stack, a menu) read the
+  prototype's safe-area geometry, so a toast placed under the status bar shows
+  there instead of below the screen.
+
 ## 0.3.0
 
 Blocks, charts, and the components they needed.

package/dist/blocks/index.js

@@ -1,4 +1,4 @@
-import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-K6LII3OE.js';
+import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-WCFLQVK5.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardAction, Button, CardList, Entity, OverflowMenu, MenuItem, MenuSeparator, Code, CardContent, Message, Bubble, CardFooter, DestructiveActionModal, Badge, AvatarGroup, Avatar, Textarea, CodeBlock, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StatusDot, Switch, Form, Field, Select, SelectTrigger, SelectContent, SelectItem, Separator, Label, Attachment } from '../chunk-CKNM7KSB.js';
 import { Region, Stack, Row, Grid } from '../chunk-3IWZYBGH.js';
 import { cn } from '../chunk-SRQWQUTW.js';

package/dist/{chunk-K6LII3OE.js → chunk-WCFLQVK5.js}

@@ -705,7 +705,6 @@ function ChartFrame({
   const [size, setSize] = useState(null);
   const [shown, setShown] = useState(!animate);
   const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
-  const [pointer, setPointer] = useState(null);
   const [viaKeyboard, setViaKeyboard] = useState(false);
   const appeared = useRef(true);
   const tableId = useId();
@@ -753,8 +752,7 @@ function ChartFrame({
   const onPointer = (event) => {
     if (!interactive || !size || !hitTest) return;
     const p = local(event);
-    setPointer(p);
-    setViaKeyboard(false);
+    if (viaKeyboard) setViaKeyboard(false);
     setActive(hitTest(p.x, p.y, size));
   };
   const onKeyDown = (event) => {
@@ -767,11 +765,10 @@ function ChartFrame({
     else if (event.key === "Escape") next = null;
     if (next === void 0) return;
     event.preventDefault();
-    setPointer(null);
     setViaKeyboard(true);
     setActive(next);
   };
-  const placement = size && active != null && tooltip ? tooltip(active, size, pointer) : null;
+  const placement = size && active != null && tooltip ? tooltip(active, size) : null;
   const flip = placement && size ? placement.x > size.width / 2 : false;
   return /* @__PURE__ */ jsxs(
     "figure",
@@ -792,7 +789,6 @@ function ChartFrame({
             onPointerMove: onPointer,
             onPointerDown: onPointer,
             onPointerLeave: () => {
-              setPointer(null);
               if (!viaKeyboard) setActive(null);
             },
             onKeyDown,
@@ -816,10 +812,11 @@ function ChartFrame({
                   "aria-hidden": true,
                   className: cn(
                     "pointer-events-none absolute start-0 top-0 z-10",
+                    // Glides between positions; appears in place the first time.
                     !appeared.current && "transition-transform duration-(--motion-duration-fast) ease-standard"
                   ),
                   style: { transform: `translate(${Math.round(placement.x)}px, ${Math.round(placement.y)}px)` },
-                  children: /* @__PURE__ */ jsx("div", { className: cn("w-max -translate-y-1/2", flip ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), children: placement.content })
+                  children: /* @__PURE__ */ jsx("div", { className: cn("w-max -translate-y-1/2 transition-transform duration-(--motion-duration-fast) ease-standard", flip ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), children: placement.content })
                 }
               ) : null
             ]
@@ -1002,17 +999,22 @@ function strokeArcPath(cx, cy, r, a0, a1) {
 var DRAW_DURATION = "calc(var(--motion-duration-slower) * 1.8)";
 var RISE = "var(--motion-duration-slower) var(--motion-ease-emphasized)";
 var MORPH = "var(--motion-duration-slow) var(--motion-ease-standard)";
+var HOVER = "var(--motion-duration-fast) var(--motion-ease-standard)";
+var GLIDE = `transform ${HOVER}, opacity ${HOVER}, cx ${HOVER}, cy ${HOVER}`;
+function barTransition(delay = "0ms") {
+  return `scale ${RISE} ${delay}, opacity ${HOVER}, d ${MORPH}`;
+}
 function stagger(index, stepMs = 35) {
   return `calc(${Math.min(index, 24) * stepMs}ms * var(--motion-scale, 1))`;
 }
 function drawTransition(delay = "0ms") {
-  return `stroke-dashoffset ${DRAW_DURATION} var(--motion-ease-decelerate) ${delay}, d ${MORPH}`;
+  return `stroke-dashoffset ${DRAW_DURATION} var(--motion-ease-decelerate) ${delay}, d ${MORPH}, opacity ${HOVER}`;
 }
 function riseTransition(delay = "0ms") {
   return `scale ${RISE} ${delay}, opacity ${RISE} ${delay}, d ${MORPH}`;
 }
 function morphTransition() {
-  return `d ${MORPH}, opacity ${MORPH}, cx ${MORPH}, cy ${MORPH}`;
+  return `d ${MORPH}, opacity ${HOVER}, cx ${MORPH}, cy ${MORPH}`;
 }
 function pathStyle(d) {
   return { d: `path("${d}")` };
@@ -1186,7 +1188,7 @@ function CartesianChart(props) {
     return best;
   };
   const describe = (i) => `${categories[i]}: ${series.map((s, k) => `${s.label} ${fullValue(k, i)}`).join(", ")}`;
-  const tooltipFor = (i, size, pointer) => {
+  const tooltipFor = (i, size) => {
     const L = layoutFor(size);
     const total = values.reduce((sum, s) => sum + s[i], 0);
     const content = /* @__PURE__ */ jsx(
@@ -1198,8 +1200,11 @@ function CartesianChart(props) {
         total: tooltipOptions.showTotal ? fmt.full(total) : void 0
       }
     );
-    if (horizontal) return { content, x: pointer?.x ?? (L.x0 + L.x1) / 2, y: L.center(i) };
-    return { content, x: L.center(i), y: pointer?.y ?? (L.y0 + L.y1) / 2 };
+    if (horizontal) {
+      const end = Math.max(0, ...series.map((_, k) => stacks ? stacks[k][i][1] : values[k][i]));
+      return { content, x: Math.min(L.value(end), L.x1), y: L.center(i) };
+    }
+    return { content, x: L.center(i), y: (L.y0 + L.y1) / 2 };
   };
   const table = {
     headers: [index.charAt(0).toUpperCase() + index.slice(1), ...series.map((s) => s.label)],
@@ -1224,6 +1229,7 @@ function CartesianChart(props) {
       children: ({ size, activeIndex: active }) => {
         const L = layoutFor(size);
         const marks = [];
+        const activeDots = [];
         const widths = categories.map((_, i) => approxTextWidth(tickText(i)));
         const slot = (horizontal ? L.y1 - L.y0 : L.x1 - L.x0) / Math.max(1, n) || 1;
         const every = Math.max(1, Math.ceil((horizontal ? 18 : Math.max(0, ...widths) + 12) / slot));
@@ -1247,15 +1253,13 @@ function CartesianChart(props) {
         });
         let cursor = null;
         if (active != null && active < n) {
+          const c = L.center(active);
+          const move = { transform: horizontal ? `translate(0px, ${c}px)` : `translate(${c}px, 0px)`, transition: GLIDE };
           if (L.band) {
-            const c = L.center(active);
-            const half = Math.min(L.band.step, Math.max(L.band.bandwidth, barWidth * 2)) / 2;
-            const a = Math.max(horizontal ? L.y0 : L.x0, c - half);
-            const b = Math.min(horizontal ? L.y1 : L.x1, c + half);
-            cursor = horizontal ? /* @__PURE__ */ jsx("rect", { x: L.x0, y: a, width: L.x1 - L.x0, height: b - a, rx: 6, className: "fill-foreground/5" }) : /* @__PURE__ */ jsx("rect", { x: a, y: L.y0, width: b - a, height: L.y1 - L.y0, rx: 6, className: "fill-foreground/5" });
+            const w = L.band.bandwidth;
+            cursor = /* @__PURE__ */ jsx("g", { style: move, children: horizontal ? /* @__PURE__ */ jsx("rect", { x: L.x0, y: -w / 2, width: L.x1 - L.x0, height: w, rx: 6, className: "fill-foreground/5" }) : /* @__PURE__ */ jsx("rect", { x: -w / 2, y: L.y0, width: w, height: L.y1 - L.y0, rx: 6, className: "fill-foreground/5" }) });
           } else {
-            const p = L.center(active);
-            cursor = /* @__PURE__ */ jsx("line", { x1: p, x2: p, y1: L.y0, y2: L.y1, className: "stroke-foreground/25" });
+            cursor = /* @__PURE__ */ jsx("g", { style: move, children: /* @__PURE__ */ jsx("line", { x1: 0, x2: 0, y1: L.y0, y2: L.y1, className: "stroke-foreground/25" }) });
           }
         }
         if (kind === "bar" && L.band) {
@@ -1297,14 +1301,13 @@ function CartesianChart(props) {
                     d,
                     className: cn(
                       horizontal ? "[[data-reveal=out]_&]:scale-x-0" : "[[data-reveal=out]_&]:scale-y-0",
-                      "transition-opacity",
                       dim && "opacity-40"
                     ),
                     style: {
                       ...pathStyle(d),
                       fill: colorAt(k, i),
                       transformOrigin: origin,
-                      transition: riseTransition(stagger(i))
+                      transition: barTransition(stagger(i))
                     }
                   },
                   `b${k}-${i}`
@@ -1406,7 +1409,7 @@ function CartesianChart(props) {
             }
             if (active != null && active < n) {
               const [x, y] = top[active];
-              marks.push(/* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, strokeWidth: 2, className: SURFACE, style: { fill: s.colorValue } }, `ap${k}`));
+              activeDots.push(/* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, strokeWidth: 2, className: SURFACE, style: { fill: s.colorValue, cx: x, cy: y, transition: GLIDE } }, `ap${k}`));
             }
           }
         }
@@ -1415,6 +1418,7 @@ function CartesianChart(props) {
           grid ? /* @__PURE__ */ jsx("g", { children: gridLines }) : null,
           cursor,
           /* @__PURE__ */ jsx("g", { children: marks }),
+          /* @__PURE__ */ jsx("g", { children: activeDots }),
           zero ? horizontal ? /* @__PURE__ */ jsx("line", { x1: L.base, x2: L.base, y1: L.y0, y2: L.y1, className: "stroke-foreground/20" }) : /* @__PURE__ */ jsx("line", { x1: L.x0, x2: L.x1, y1: L.base, y2: L.base, className: "stroke-foreground/20" }) : null,
           (horizontal ? xAxis : yAxis) ? /* @__PURE__ */ jsx("g", { children: valueAxis }) : null,
           (horizontal ? yAxis : xAxis) ? /* @__PURE__ */ jsx("g", { children: categoryAxis }) : null

package/dist/index.d.ts

@@ -7499,6 +7499,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.3.0";
+declare const SABLE_UI_VERSION: "0.3.1";
 
 export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formMeta, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useInView, useMotion, usePanelWidth, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -2,8 +2,8 @@ export { DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVE
 export { Phone, phoneMeta } from './chunk-KFZ43RKU.js';
 import './chunk-NEQNXI2G.js';
 export { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-6LCIBMMG.js';
-import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-K6LII3OE.js';
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-K6LII3OE.js';
+import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-WCFLQVK5.js';
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-WCFLQVK5.js';
 import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-CKNM7KSB.js';
 export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-CKNM7KSB.js';
 export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack } from './chunk-3IWZYBGH.js';
@@ -11260,6 +11260,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.3.0";
+var SABLE_UI_VERSION = "0.3.1";
 
 export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };

package/dist/ios/styles.css

@@ -30,6 +30,14 @@
   --ios-safe-top: env(safe-area-inset-top, 0px); --ios-header-height: calc(92px + var(--ios-safe-top));
   --ios-tabbar-bottom: max(12px, env(safe-area-inset-bottom, 0px)); --ios-content-bottom: calc(82px + var(--ios-tabbar-bottom));
 }
+/* Portalled layers — a toast stack, a menu — render at <body>, outside
+   .ios-prototype, so they could not see its geometry: a toast placed at
+   top: var(--ios-safe-top) fell back to top: auto and landed below the screen.
+   A prototype owns its whole document (the framed page, or a real phone's
+   screen), so the root carries the same values whenever one is present.
+   Keep these in step with the .ios-prototype rules above. */
+:root:has(.ios-prototype) { --ios-inset: 16px; --ios-safe-top: 62px; --ios-tabbar-bottom: 28px; }
+:root:has(.ios-prototype.ios-bare) { --ios-safe-top: env(safe-area-inset-top, 0px); --ios-tabbar-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
 .ios-prototype.dark {
   --ios-canvas: var(--background, #000); --ios-ink: var(--foreground, #f2f2f7); --ios-secondary: var(--muted-foreground, #aeaeb2);
   --ios-panel: var(--card, #1c1c1e); --ios-primary-ink: var(--primary-foreground, #fff);

package/dist/presets/index.js

@@ -23,7 +23,16 @@ var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   "theme-shadow",
   "theme-shadow-md",
   "theme-shadow-lg",
-  "theme-shadow-xl"
+  "theme-shadow-xl",
+  // Chart series colours: optional — a preset without them inherits Base's validated set.
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "chart-6",
+  "chart-7",
+  "chart-8"
 ])];
 var tokenNames = new Set(PRESET_TOKEN_NAMES);
 var record = (value) => !!value && typeof value === "object" && !Array.isArray(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Base.",
   "engine": {
     "behavior": "@base-ui/react",