@xenosystem/components 0.9.2 → 0.9.3

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.
Files changed (4) hide show
  1. package/dist/catalog.json +64 -0
  2. package/dist/chrome/index.d.ts +32 -1
  3. package/dist/chrome/index.js +66 -0
  4. package/package.json +1 -1
package/dist/catalog.json CHANGED
@@ -895,6 +895,70 @@
895
895
  }
896
896
  ]
897
897
  },
898
+ {
899
+ "name": "Stack",
900
+ "file": "frame.tsx",
901
+ "doc": "A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that\nappeared in nine places in one block. As a unit its spacing is the family's, and a declaration can\nname it.",
902
+ "props": "StackProps",
903
+ "propList": [
904
+ {
905
+ "name": "children",
906
+ "type": "ReactNode",
907
+ "optional": true,
908
+ "doc": ""
909
+ },
910
+ {
911
+ "name": "direction",
912
+ "type": "'column' | 'row'",
913
+ "optional": true,
914
+ "doc": "`column` (default) or `row`."
915
+ },
916
+ {
917
+ "name": "gap",
918
+ "type": "number",
919
+ "optional": true,
920
+ "doc": "Gap between children, in px. Default 2 (column) / 6 (row)."
921
+ },
922
+ {
923
+ "name": "pad",
924
+ "type": "'none' | 'gutter' | 'inset'",
925
+ "optional": true,
926
+ "doc": "Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above)."
927
+ },
928
+ {
929
+ "name": "className",
930
+ "type": "string",
931
+ "optional": true,
932
+ "doc": ""
933
+ }
934
+ ]
935
+ },
936
+ {
937
+ "name": "Text",
938
+ "file": "frame.tsx",
939
+ "doc": "",
940
+ "props": "TextProps",
941
+ "propList": [
942
+ {
943
+ "name": "children",
944
+ "type": "ReactNode",
945
+ "optional": true,
946
+ "doc": ""
947
+ },
948
+ {
949
+ "name": "role",
950
+ "type": "'title' | 'body' | 'meta' | 'caption' | 'number'",
951
+ "optional": true,
952
+ "doc": "`title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);\n`caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.\nThe quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse)."
953
+ },
954
+ {
955
+ "name": "className",
956
+ "type": "string",
957
+ "optional": true,
958
+ "doc": ""
959
+ }
960
+ ]
961
+ },
898
962
  {
899
963
  "name": "Badge",
900
964
  "file": "indicators.tsx",
package/dist/chrome/index.d.ts CHANGED
@@ -105,6 +105,35 @@ interface ColumnProps {
105
105
  * a declaration can name.
106
106
  */
107
107
  declare function Column({ children, className }: ColumnProps): ReactNode;
108
+ /** Props for {@link Stack}. */
109
+ interface StackProps {
110
+ children?: ReactNode;
111
+ /** `column` (default) or `row`. */
112
+ direction?: 'column' | 'row';
113
+ /** Gap between children, in px. Default 2 (column) / 6 (row). */
114
+ gap?: number;
115
+ /** Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above). */
116
+ pad?: 'none' | 'gutter' | 'inset';
117
+ className?: string;
118
+ }
119
+ /**
120
+ * A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that
121
+ * appeared in nine places in one block. As a unit its spacing is the family's, and a declaration can
122
+ * name it.
123
+ */
124
+ declare function Stack({ children, direction, gap, pad, className }: StackProps): ReactNode;
125
+ /** Props for {@link Text}. */
126
+ interface TextProps {
127
+ children?: ReactNode;
128
+ /**
129
+ * `title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);
130
+ * `caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.
131
+ * The quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse).
132
+ */
133
+ role?: 'title' | 'body' | 'meta' | 'caption' | 'number';
134
+ className?: string;
135
+ }
136
+ declare function Text({ children, role, className }: TextProps): ReactNode;
108
137
 
109
138
  /**
110
139
  * `Section` — the collapsible titled group.
@@ -1183,6 +1212,8 @@ declare const COMPONENTS: {
1183
1212
  readonly 'chrome/Divider': typeof Divider;
1184
1213
  readonly 'chrome/ScrollArea': typeof ScrollArea;
1185
1214
  readonly 'chrome/Column': typeof Column;
1215
+ readonly 'chrome/Stack': typeof Stack;
1216
+ readonly 'chrome/Text': typeof Text;
1186
1217
  readonly 'chrome/Badge': typeof Badge;
1187
1218
  readonly 'chrome/StatusDot': typeof StatusDot;
1188
1219
  readonly 'chrome/StatusBadge': typeof StatusBadge;
@@ -1218,4 +1249,4 @@ interface GalleryEntry {
1218
1249
  /** The entries, one per unit × state. Adding a unit to {@link COMPONENTS} without an entry here fails the family's test. */
1219
1250
  declare function gallery(): GalleryEntry[];
1220
1251
 
1221
- export { Badge, type BadgeProps, CLS_BADGE, CLS_BAR, CLS_BAR_SEGMENT, CLS_DIVIDER, CLS_DOT, CLS_EMPTY, CLS_ERROR, CLS_FIELD, CLS_FIELD_CONTROL, CLS_FIELD_GROUP, CLS_FIELD_HINT, CLS_FIELD_LABEL, CLS_ICON_BUTTON, CLS_ICON_FRAME, CLS_LOADING, CLS_PANEL, CLS_PANEL_CONTENT, CLS_PANEL_CONTENT_NO_HEADER, CLS_PANEL_HEADER, CLS_PANEL_TITLE, CLS_ROW, CLS_ROWLIST, CLS_ROW_ICON, CLS_ROW_LABEL, CLS_ROW_META, CLS_ROW_TRAILING, CLS_SCROLL, CLS_SEARCH, CLS_SEARCH_INPUT, CLS_SECTION, CLS_SECTION_ACTIONS, CLS_SECTION_BODY, CLS_SECTION_CHEVRON, CLS_SECTION_HEADER, CLS_SECTION_TITLE, CLS_SECTION_TRIGGER, CLS_SEGMENT, CLS_SEGMENTED, CLS_STAT, CLS_STATE, CLS_STATE_HINT, CLS_STATE_ICON, CLS_STATE_PROGRESS, CLS_STATE_TITLE, CLS_STATUSBAR, CLS_STAT_LABEL, CLS_STAT_SUB, CLS_STAT_VALUE, CLS_TEXT_BUTTON, CLS_TOGGLE, CLS_TOGGLE_KNOB, CLS_TOOLBAR, CLS_TOOLBAR_GROUP, COMPONENTS, ChevronGlyph, ClearGlyph, Column, type ColumnProps, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Sparkline, type SparklineProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, TextButton, type TextButtonProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };
1252
+ export { Badge, type BadgeProps, CLS_BADGE, CLS_BAR, CLS_BAR_SEGMENT, CLS_DIVIDER, CLS_DOT, CLS_EMPTY, CLS_ERROR, CLS_FIELD, CLS_FIELD_CONTROL, CLS_FIELD_GROUP, CLS_FIELD_HINT, CLS_FIELD_LABEL, CLS_ICON_BUTTON, CLS_ICON_FRAME, CLS_LOADING, CLS_PANEL, CLS_PANEL_CONTENT, CLS_PANEL_CONTENT_NO_HEADER, CLS_PANEL_HEADER, CLS_PANEL_TITLE, CLS_ROW, CLS_ROWLIST, CLS_ROW_ICON, CLS_ROW_LABEL, CLS_ROW_META, CLS_ROW_TRAILING, CLS_SCROLL, CLS_SEARCH, CLS_SEARCH_INPUT, CLS_SECTION, CLS_SECTION_ACTIONS, CLS_SECTION_BODY, CLS_SECTION_CHEVRON, CLS_SECTION_HEADER, CLS_SECTION_TITLE, CLS_SECTION_TRIGGER, CLS_SEGMENT, CLS_SEGMENTED, CLS_STAT, CLS_STATE, CLS_STATE_HINT, CLS_STATE_ICON, CLS_STATE_PROGRESS, CLS_STATE_TITLE, CLS_STATUSBAR, CLS_STAT_LABEL, CLS_STAT_SUB, CLS_STAT_VALUE, CLS_TEXT_BUTTON, CLS_TOGGLE, CLS_TOGGLE_KNOB, CLS_TOOLBAR, CLS_TOOLBAR_GROUP, COMPONENTS, ChevronGlyph, ClearGlyph, Column, type ColumnProps, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Sparkline, type SparklineProps, Stack, type StackProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, Text, TextButton, type TextButtonProps, type TextProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };
package/dist/chrome/index.js CHANGED
@@ -54,6 +54,8 @@ var CLS_BAR = "xc-bar";
54
54
  var CLS_BAR_SEGMENT = "xc-bar-segment";
55
55
  var CLS_SCROLL = "xc-scroll";
56
56
  var CLS_COLUMN = "xc-column";
57
+ var CLS_STACK = "xc-stack";
58
+ var CLS_TEXT = "xc-text";
57
59
  var PANEL_TONES = Object.freeze([
58
60
  "neutral",
59
61
  "info",
@@ -664,6 +666,42 @@ div.xc-section-trigger {
664
666
  min-height: 0;
665
667
  }
666
668
 
669
+ /* \u2500\u2500 Stack \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
670
+ .xc-stack {
671
+ display: flex;
672
+ min-width: 0;
673
+ }
674
+ .xc-stack--column { flex-direction: column; }
675
+ .xc-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
676
+ .xc-stack--pad-gutter { padding: ${PANEL_METRICS.gutter}px; }
677
+ .xc-stack--pad-inset { padding: 0 ${PANEL_METRICS.gutter}px ${PANEL_METRICS.gutter}px; }
678
+ .xc-stack--pad-none { padding: 0; }
679
+
680
+ /* \u2500\u2500 Text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
681
+ .xc-text {
682
+ display: block;
683
+ min-width: 0;
684
+ color: ${FG};
685
+ font-size: ${PANEL_METRICS.fontBody}px;
686
+ line-height: 1.4;
687
+ }
688
+ .xc-text--title {
689
+ font-size: ${PANEL_METRICS.fontBody}px;
690
+ font-weight: 600;
691
+ }
692
+ .xc-text--meta {
693
+ font-size: ${PANEL_METRICS.fontMeta}px;
694
+ color: ${MUTED};
695
+ }
696
+ .xc-text--caption {
697
+ font-size: ${PANEL_METRICS.fontMeta}px;
698
+ color: ${MUTED};
699
+ }
700
+ .xc-text--number {
701
+ font-size: ${PANEL_METRICS.fontMeta}px;
702
+ font-variant-numeric: tabular-nums;
703
+ }
704
+
667
705
  /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
668
706
  .xc-composer {
669
707
  display: block;
@@ -1163,6 +1201,15 @@ function Column({ children, className }) {
1163
1201
  usePanelPrimitives();
1164
1202
  return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
1165
1203
  }
1204
+ function Stack({ children, direction = "column", gap, pad = "gutter", className }) {
1205
+ usePanelPrimitives();
1206
+ const g = gap ?? (direction === "row" ? 6 : 2);
1207
+ return /* @__PURE__ */ jsx("div", { className: cx(CLS_STACK, `${CLS_STACK}--${direction}`, `${CLS_STACK}--pad-${pad}`, className), style: { gap: g }, children });
1208
+ }
1209
+ function Text({ children, role = "body", className }) {
1210
+ usePanelPrimitives();
1211
+ return /* @__PURE__ */ jsx("span", { className: cx(CLS_TEXT, `${CLS_TEXT}--${role}`, className), children });
1212
+ }
1166
1213
 
1167
1214
  // src/chrome/section.tsx
1168
1215
  import { useState as useState3 } from "react";
@@ -1806,6 +1853,8 @@ var COMPONENTS = {
1806
1853
  "chrome/Divider": Divider,
1807
1854
  "chrome/ScrollArea": ScrollArea,
1808
1855
  "chrome/Column": Column,
1856
+ "chrome/Stack": Stack,
1857
+ "chrome/Text": Text,
1809
1858
  "chrome/Badge": Badge,
1810
1859
  "chrome/StatusDot": StatusDot,
1811
1860
  "chrome/StatusBadge": StatusBadge,
@@ -1876,6 +1925,21 @@ function gallery() {
1876
1925
  /* @__PURE__ */ jsx7(ScrollArea, { children: /* @__PURE__ */ jsx7("p", { style: { margin: 8 }, children: "body" }) }),
1877
1926
  /* @__PURE__ */ jsx7(StatusBar, { left: "status" })
1878
1927
  ] }));
1928
+ form("Stack", "column", () => /* @__PURE__ */ jsxs7(Stack, { children: [
1929
+ /* @__PURE__ */ jsx7(Text, { role: "title", children: "Emilian" }),
1930
+ /* @__PURE__ */ jsx7(Text, { role: "meta", children: "emilian@bnkrsys.com" })
1931
+ ] }));
1932
+ form("Stack", "row", () => /* @__PURE__ */ jsxs7(Stack, { direction: "row", pad: "inset", children: [
1933
+ /* @__PURE__ */ jsx7(Badge, { children: "Pro" }),
1934
+ /* @__PURE__ */ jsx7(Badge, { tone: "success", children: "active" })
1935
+ ] }));
1936
+ form("Text", "roles", () => /* @__PURE__ */ jsxs7(Stack, { children: [
1937
+ /* @__PURE__ */ jsx7(Text, { role: "title", children: "Title line" }),
1938
+ /* @__PURE__ */ jsx7(Text, { children: "Body line" }),
1939
+ /* @__PURE__ */ jsx7(Text, { role: "meta", children: "Meta line" }),
1940
+ /* @__PURE__ */ jsx7(Text, { role: "caption", children: "A standing caption." }),
1941
+ /* @__PURE__ */ jsx7(Text, { role: "number", children: "1,204.00" })
1942
+ ] }));
1879
1943
  door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
1880
1944
  "line ",
1881
1945
  i + 1
@@ -1992,10 +2056,12 @@ export {
1992
2056
  Section,
1993
2057
  SegmentedControl,
1994
2058
  Sparkline,
2059
+ Stack,
1995
2060
  StatTile,
1996
2061
  StatusBadge,
1997
2062
  StatusBar,
1998
2063
  StatusDot,
2064
+ Text,
1999
2065
  TextButton,
2000
2066
  Toggle,
2001
2067
  Toolbar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xenosystem/components",
3
- "version": "0.9.2",
3
+ "version": "0.9.3",
4
4
  "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",