@apliteni/apliteni-ui 0.34.3 → 0.35.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/react/README.md +5 -0
  3. package/react/dist/index.d.ts +1 -1
  4. package/src/styles/button.css +6 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apliteni/apliteni-ui",
3
- "version": "0.34.3",
3
+ "version": "0.35.0",
4
4
  "workspaces": [
5
5
  "react"
6
6
  ],
package/react/README.md CHANGED
@@ -30,6 +30,11 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
30
30
 
31
31
  Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Button`, `Badge`, `Card`, `Icon`.
32
32
 
33
+ `Button` accepts `size="xs" | "sm" | "md" | "lg"` (default `md`). Use `xs`
34
+ for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconOnly>Copy</Button>`.
35
+ Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use
36
+ `--text-xs`. The other sizes keep 16px glyphs.
37
+
33
38
  `CommandPalette` renders the kit's `commandPalette()` markup, class for class, and imports the
34
39
  kit's ranking rather than repeating it — so a palette a server rendered and the same palette
35
40
  after a keystroke put the same row first. Three differences from the vanilla one. Two are
package/react/dist/index.d.ts CHANGED
@@ -7,7 +7,7 @@ declare function Icon({ name }: {
7
7
 
8
8
  type ButtonProps = {
9
9
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
10
- size?: 'sm' | 'md' | 'lg';
10
+ size?: 'xs' | 'sm' | 'md' | 'lg';
11
11
  icon?: string;
12
12
  iconRight?: string;
13
13
  iconOnly?: boolean;
package/src/styles/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* ============================================================================
2
2
  * Button — .ui-btn (variants: primary / secondary / ghost / danger)
3
- * (sizes: sm / md / lg, [icon], [disabled], [aria-busy])
3
+ * (sizes: xs / sm / md / lg, [icon], [disabled], [aria-busy])
4
4
  * ========================================================================== */
5
5
 
6
6
  .ui-btn {
@@ -72,11 +72,15 @@
72
72
  }
73
73
 
74
74
  /* -- Sizes -------------------------------------------------------------- */
75
+ /* why: docs/specification.md#extra-small-buttons */
76
+ .ui-btn--xs { --btn-pad-y: 4.5px; --btn-pad-x: 8px; --btn-font: var(--text-xs); min-width: 24px; min-height: 24px; }
77
+ .ui-btn--xs svg { width: 13px; height: 13px; stroke-width: 2.8; }
75
78
  .ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: calc(var(--text-sm) - 0.5px); }
76
79
  .ui-btn--lg { --btn-pad-y: 13px; --btn-pad-x: 24px; --btn-font: var(--text-md); border-radius: var(--radius-md); }
77
80
 
78
81
  /* Icon-only */
79
82
  .ui-btn--icon { padding: 9px; border-radius: var(--radius-sm); }
83
+ .ui-btn--icon.ui-btn--xs { padding: 4.5px; }
80
84
  .ui-btn--icon.ui-btn--sm { padding: 6px; }
81
85
 
82
86
  .ui-btn--block { width: 100%; }
@@ -139,6 +143,7 @@
139
143
  transform-origin: center;
140
144
  animation: ui-bars-in var(--dur-fast) var(--ease) both;
141
145
  }
146
+ .ui-btn--xs .ui-btn__bars { left: 4px; right: 4px; bottom: 2px; height: 2px; }
142
147
  .ui-btn--sm .ui-btn__bars { left: 7px; right: 7px; bottom: 4px; }
143
148
  .ui-btn--lg .ui-btn__bars { left: 14px; right: 14px; bottom: 7px; }
144
149
  .ui-btn__bars i {