@sableui/react 0.1.1 → 0.3.0

package/targets/ios.json

@@ -93,6 +93,15 @@
       ],
       "guidance": "NativeApp is the app frame (status bar, safe areas, home indicator); each screen is an IosPage; each tab keeps one NavigationStack. Screen content is Sable."
     },
+    "AreaChart": {
+      "source": "AreaChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "AreaChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Attachment": {
       "source": "Attachment",
       "strategy": "preserve",
@@ -129,6 +138,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "BarChart": {
+      "source": "BarChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "BarChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "BottomNav": {
       "source": "BottomNav",
       "strategy": "replace",
@@ -324,10 +342,9 @@
       "components": [
         "Card",
         "CardList",
-        "Entity",
-        "Description"
+        "Entity"
       ],
-      "guidance": "On a phone a table becomes rows: Entity per record in a CardList, with the detail on a pushed screen (Description for its fields). Keep sorting and filtering the task needs."
+      "guidance": "On a phone a table becomes rows: Entity per record in a CardList, with the detail on a pushed screen (a `<dl className=\"sable-list-dl\">` for its fields). Keep sorting and filtering the task needs."
     },
     "DatePicker": {
       "source": "DatePicker",
@@ -338,12 +355,12 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
-    "Description": {
-      "source": "Description",
+    "DateTile": {
+      "source": "DateTile",
       "strategy": "preserve",
       "importFrom": "@sableui/react",
       "components": [
-        "Description"
+        "DateTile"
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
@@ -365,15 +382,6 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
-    "DotsMenu": {
-      "source": "DotsMenu",
-      "strategy": "preserve",
-      "importFrom": "@sableui/react",
-      "components": [
-        "DotsMenu"
-      ],
-      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
-    },
     "EmptyState": {
       "source": "EmptyState",
       "strategy": "preserve",
@@ -474,6 +482,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "LineChart": {
+      "source": "LineChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "LineChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Marker": {
       "source": "Marker",
       "strategy": "preserve",
@@ -573,6 +590,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "OverflowMenu": {
+      "source": "OverflowMenu",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "OverflowMenu"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "PageHeader": {
       "source": "PageHeader",
       "strategy": "contextual",
@@ -639,6 +665,15 @@
       "components": [],
       "guidance": "Frame a prototype with PhoneFrame from @sableui/react/ios/preview on a host page. Never draw device or browser chrome inside the app."
     },
+    "PieChart": {
+      "source": "PieChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "PieChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Pill": {
       "source": "Pill",
       "strategy": "preserve",
@@ -666,6 +701,24 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "RadarChart": {
+      "source": "RadarChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "RadarChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
+    "RadialChart": {
+      "source": "RadialChart",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "RadialChart"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Radio": {
       "source": "Radio",
       "strategy": "preserve",
@@ -718,6 +771,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "SegmentedBar": {
+      "source": "SegmentedBar",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "SegmentedBar"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Select": {
       "source": "Select",
       "strategy": "preserve",
@@ -803,6 +865,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "Sparkline": {
+      "source": "Sparkline",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "Sparkline"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Spinner": {
       "source": "Spinner",
       "strategy": "preserve",
@@ -864,10 +935,9 @@
       "components": [
         "Card",
         "CardList",
-        "Entity",
-        "Description"
+        "Entity"
       ],
-      "guidance": "On a phone a table becomes rows: Entity per record in a CardList, with the detail on a pushed screen (Description for its fields). Keep sorting and filtering the task needs."
+      "guidance": "On a phone a table becomes rows: Entity per record in a CardList, with the detail on a pushed screen (a `<dl className=\"sable-list-dl\">` for its fields). Keep sorting and filtering the task needs."
     },
     "Tabs": {
       "source": "Tabs",

package/llms/components/description.md

@@ -1,96 +0,0 @@
-# Description
-
-**Status:** stable
-
-A labeled key/value list (definition list). Compose with DescriptionTerm + DescriptionDetail, or the ergonomic DescriptionItem shorthand. Aligns terms and details into a grid; cols="2" packs pairs two-wide.
-
-**Keywords:** description list, metadata, details, key value
-
-## Usage
-
-Use Description to present label-value details where each term needs a clear corresponding value.
-
-### Best practices
-
-- Do: Use it for object metadata, settings summaries, and read-only record details.
-- Do: Keep terms brief and values scannable so the list works as reference material.
-- Don't: Do not use Description for editable forms; pair Label and form controls instead.
-- Don't: Do not use it for a single key/value. A definition list of one is a labelled value — use a Label and the value, and keep the list semantics for actual lists.
-
-### Anatomy
-
-| Part | Required | Description |
-| --- | --- | --- |
-| DescriptionItem | yes | One term and detail pair. |
-| DescriptionTerm | yes | The label for the value. |
-| DescriptionDetail | yes | The value or explanatory detail. |
-
-## Subcomponents
-
-| Name | Type | Description |
-| --- | --- | --- |
-| DescriptionTerm | <dt> props + className | The key. Muted label tier; sits in the first grid column. |
-| DescriptionDetail | <dd> props + tone?: "default" \| "muted" \| "success" \| "warning" \| "destructive" + className | The value. Body tier on the foreground; sits in the second grid column. tone colors the value to encode a status (e.g. Ended → muted, Active → success), replacing inline conditional color classes; defaults to "default". |
-| DescriptionItem | { term: ReactNode; detail?: ReactNode; tone?: "default" \| "muted" \| "success" \| "warning" \| "destructive"; children? } | Ergonomic shorthand for one term/detail pair — renders a DescriptionTerm followed by a DescriptionDetail. Pass the value via detail or children; tone (defaults to "default") colors the detail value the same way it does on DescriptionDetail. |
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| cols | "1" \| "2" | "1" | Column density. One term/detail column, or two pairs per row once the list's container is at least @md (28rem) wide; narrower, it stays one column. A container query, not a viewport breakpoint, so a narrow card on a wide screen stays one column. With cols="2" the <dl> is wrapped in an @container div. |
-
-## Variants
-
-- **cols**: 1, 2
-- **tone**: default, muted, success, warning, destructive
-
-## Tokens used
-
-`muted-foreground`, `foreground`, `success`, `tone-warning`, `destructive`
-
-## Accessibility
-
-- Renders semantic <dl>/<dt>/<dd> elements so assistive tech announces the term/detail relationship.
-- tone is a visual emphasis only — keep the value text itself meaningful (e.g. "Ended"), never color alone.
-
-## Related
-
-- Components: Fieldset, Entity
-
-## Examples
-
-### Metadata list
-
-```tsx
-import { Description, DescriptionItem } from "@sableui/react"
-
-<Description>
-	<DescriptionItem term="Network" detail="Solana" />
-	<DescriptionItem term="Supply" detail="100" />
-	<DescriptionItem term="Royalty" detail="5%" />
-</Description>
-```
-
-### Composed term/detail
-
-```tsx
-import { Description, DescriptionDetail, DescriptionTerm } from "@sableui/react"
-
-<Description>
-	<DescriptionTerm>Network</DescriptionTerm>
-	<DescriptionDetail>Solana</DescriptionDetail>
-	<DescriptionTerm>Contract</DescriptionTerm>
-	<DescriptionDetail className="text-mono-sm">7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU</DescriptionDetail>
-</Description>
-```
-
-### Toned status value
-
-```tsx
-import { Description, DescriptionItem } from "@sableui/react"
-
-<Description>
-	<DescriptionItem term="Edition" detail="Midnight Archive" />
-	<DescriptionItem term="Status" detail={isEnded ? "Ended" : "Active"} tone={isEnded ? "muted" : "success"} />
-</Description>
-```

package/dist/{chunk-L6Y46C62.js → chunk-MXJX3NZI.js}

@@ -1,10 +1,10 @@
+import { prismTheme } from './chunk-7MG4SHYX.js';
 import { verdantTheme } from './chunk-KO3NAEBF.js';
 import { emberTheme } from './chunk-L4IEIQQA.js';
 import { baseTheme } from './chunk-EP55KSYA.js';
 import { poppyTheme } from './chunk-ADLLDWLW.js';
 import { meridianTheme } from './chunk-K7RUHUGC.js';
 import { atelierTheme } from './chunk-YXBOYWBN.js';
-import { prismTheme } from './chunk-7MG4SHYX.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';