@heymantle/litho 0.0.4 → 0.0.5

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 (146) hide show
  1. package/dist/cjs/components/Autocomplete.js +23 -12
  2. package/dist/cjs/components/Button.js +44 -6
  3. package/dist/cjs/components/Card.js +1 -0
  4. package/dist/cjs/components/ColorField.js +2 -2
  5. package/dist/cjs/components/EmptyState.js +2 -2
  6. package/dist/cjs/components/Filters.js +4 -3
  7. package/dist/cjs/components/Frame.js +9 -9
  8. package/dist/cjs/components/HorizontalStack.js +9 -2
  9. package/dist/cjs/components/Icon.js +1 -0
  10. package/dist/cjs/components/List.js +3 -3
  11. package/dist/cjs/components/Pane.js +61 -17
  12. package/dist/cjs/components/Stack.js +223 -0
  13. package/dist/cjs/components/Table.js +1 -1
  14. package/dist/cjs/components/Tabs.js +41 -11
  15. package/dist/cjs/components/VerticalStack.js +8 -2
  16. package/dist/cjs/index.js +4 -0
  17. package/dist/cjs/stories/ActionList.stories.js +1 -1
  18. package/dist/cjs/stories/Autocomplete.stories.js +20 -17
  19. package/dist/cjs/stories/Box.stories.js +14 -12
  20. package/dist/cjs/stories/ButtonGroup.stories.js +5 -5
  21. package/dist/cjs/stories/Card.stories.js +8 -8
  22. package/dist/cjs/stories/Checkbox.stories.js +3 -3
  23. package/dist/cjs/stories/ChoiceList.stories.js +13 -12
  24. package/dist/cjs/stories/Collapsible.stories.js +51 -39
  25. package/dist/cjs/stories/ColorField.stories.js +23 -19
  26. package/dist/cjs/stories/ContextualSaveBar.stories.js +15 -14
  27. package/dist/cjs/stories/DatePicker.stories.js +3 -3
  28. package/dist/cjs/stories/Divider.stories.js +64 -57
  29. package/dist/cjs/stories/DropZone.stories.js +25 -20
  30. package/dist/cjs/stories/Filters.stories.js +62 -60
  31. package/dist/cjs/stories/FooterHelp.stories.js +36 -31
  32. package/dist/cjs/stories/Form.stories.js +23 -20
  33. package/dist/cjs/stories/Grid.stories.js +58 -58
  34. package/dist/cjs/stories/Icon.stories.js +31 -28
  35. package/dist/cjs/stories/Image.stories.js +36 -36
  36. package/dist/cjs/stories/InlineError.stories.js +35 -34
  37. package/dist/cjs/stories/Label.stories.js +59 -59
  38. package/dist/cjs/stories/Layout.stories.js +44 -42
  39. package/dist/cjs/stories/LayoutSection.stories.js +114 -106
  40. package/dist/cjs/stories/Link.stories.js +14 -12
  41. package/dist/cjs/stories/List.stories.js +67 -50
  42. package/dist/cjs/stories/Listbox.stories.js +26 -22
  43. package/dist/cjs/stories/Loading.stories.js +59 -50
  44. package/dist/cjs/stories/Modal.stories.js +7 -7
  45. package/dist/cjs/stories/Page.stories.js +38 -29
  46. package/dist/cjs/stories/Pane.stories.js +135 -120
  47. package/dist/cjs/stories/Popover.stories.js +12 -8
  48. package/dist/cjs/stories/PopoverManager.stories.js +91 -83
  49. package/dist/cjs/stories/ProgressBar.stories.js +61 -54
  50. package/dist/cjs/stories/RadioButtonCard.stories.js +21 -21
  51. package/dist/cjs/stories/RangeSlider.stories.js +44 -40
  52. package/dist/cjs/stories/ResourceList.stories.js +46 -37
  53. package/dist/cjs/stories/SkeletonText.stories.js +23 -22
  54. package/dist/cjs/stories/Spinner.stories.js +46 -39
  55. package/dist/cjs/stories/Stack.stories.js +1397 -0
  56. package/dist/cjs/stories/Tabs.stories.js +1 -2
  57. package/dist/cjs/stories/Tag.stories.js +44 -36
  58. package/dist/cjs/stories/Thumbnail.stories.js +42 -38
  59. package/dist/cjs/stories/TimePicker.stories.js +33 -32
  60. package/dist/cjs/stories/Tip.stories.js +21 -21
  61. package/dist/cjs/stories/TopBar.stories.js +7 -5
  62. package/dist/esm/components/Autocomplete.js +23 -12
  63. package/dist/esm/components/Button.js +44 -6
  64. package/dist/esm/components/Card.js +1 -0
  65. package/dist/esm/components/ColorField.js +2 -2
  66. package/dist/esm/components/EmptyState.js +2 -2
  67. package/dist/esm/components/Filters.js +4 -3
  68. package/dist/esm/components/Frame.js +9 -9
  69. package/dist/esm/components/HorizontalStack.js +9 -2
  70. package/dist/esm/components/Icon.js +1 -0
  71. package/dist/esm/components/List.js +3 -3
  72. package/dist/esm/components/Pane.js +62 -18
  73. package/dist/esm/components/Stack.js +213 -0
  74. package/dist/esm/components/Table.js +1 -1
  75. package/dist/esm/components/Tabs.js +41 -11
  76. package/dist/esm/components/VerticalStack.js +8 -2
  77. package/dist/esm/index.js +1 -0
  78. package/dist/esm/stories/ActionList.stories.js +1 -1
  79. package/dist/esm/stories/Autocomplete.stories.js +20 -17
  80. package/dist/esm/stories/Box.stories.js +14 -12
  81. package/dist/esm/stories/ButtonGroup.stories.js +5 -5
  82. package/dist/esm/stories/Card.stories.js +8 -8
  83. package/dist/esm/stories/Checkbox.stories.js +3 -3
  84. package/dist/esm/stories/ChoiceList.stories.js +13 -12
  85. package/dist/esm/stories/Collapsible.stories.js +51 -39
  86. package/dist/esm/stories/ColorField.stories.js +23 -19
  87. package/dist/esm/stories/ContextualSaveBar.stories.js +15 -14
  88. package/dist/esm/stories/DatePicker.stories.js +3 -3
  89. package/dist/esm/stories/Divider.stories.js +64 -57
  90. package/dist/esm/stories/DropZone.stories.js +25 -20
  91. package/dist/esm/stories/Filters.stories.js +62 -60
  92. package/dist/esm/stories/FooterHelp.stories.js +36 -31
  93. package/dist/esm/stories/Form.stories.js +23 -20
  94. package/dist/esm/stories/Grid.stories.js +58 -58
  95. package/dist/esm/stories/Icon.stories.js +31 -28
  96. package/dist/esm/stories/Image.stories.js +36 -36
  97. package/dist/esm/stories/InlineError.stories.js +27 -26
  98. package/dist/esm/stories/Label.stories.js +59 -59
  99. package/dist/esm/stories/Layout.stories.js +44 -42
  100. package/dist/esm/stories/LayoutSection.stories.js +114 -106
  101. package/dist/esm/stories/Link.stories.js +14 -12
  102. package/dist/esm/stories/List.stories.js +67 -50
  103. package/dist/esm/stories/Listbox.stories.js +12 -8
  104. package/dist/esm/stories/Loading.stories.js +59 -50
  105. package/dist/esm/stories/Modal.stories.js +7 -7
  106. package/dist/esm/stories/Page.stories.js +7 -3
  107. package/dist/esm/stories/Pane.stories.js +95 -80
  108. package/dist/esm/stories/Popover.stories.js +12 -8
  109. package/dist/esm/stories/PopoverManager.stories.js +91 -83
  110. package/dist/esm/stories/ProgressBar.stories.js +61 -54
  111. package/dist/esm/stories/RadioButtonCard.stories.js +21 -21
  112. package/dist/esm/stories/RangeSlider.stories.js +34 -30
  113. package/dist/esm/stories/ResourceList.stories.js +46 -37
  114. package/dist/esm/stories/SkeletonText.stories.js +23 -22
  115. package/dist/esm/stories/Spinner.stories.js +40 -33
  116. package/dist/esm/stories/Stack.stories.js +1338 -0
  117. package/dist/esm/stories/Tabs.stories.js +1 -2
  118. package/dist/esm/stories/Tag.stories.js +27 -19
  119. package/dist/esm/stories/Thumbnail.stories.js +42 -38
  120. package/dist/esm/stories/TimePicker.stories.js +33 -32
  121. package/dist/esm/stories/Tip.stories.js +21 -21
  122. package/dist/esm/stories/TopBar.stories.js +7 -5
  123. package/dist/types/components/Autocomplete.d.ts +34 -29
  124. package/dist/types/components/Autocomplete.d.ts.map +1 -1
  125. package/dist/types/components/Button.d.ts +10 -0
  126. package/dist/types/components/Button.d.ts.map +1 -1
  127. package/dist/types/components/Card.d.ts +2 -0
  128. package/dist/types/components/Card.d.ts.map +1 -1
  129. package/dist/types/components/EmptyState.d.ts.map +1 -1
  130. package/dist/types/components/Filters.d.ts +3 -1
  131. package/dist/types/components/Filters.d.ts.map +1 -1
  132. package/dist/types/components/Frame.d.ts +3 -3
  133. package/dist/types/components/Frame.d.ts.map +1 -1
  134. package/dist/types/components/HorizontalStack.d.ts +2 -2
  135. package/dist/types/components/HorizontalStack.d.ts.map +1 -1
  136. package/dist/types/components/Icon.d.ts.map +1 -1
  137. package/dist/types/components/Pane.d.ts.map +1 -1
  138. package/dist/types/components/Stack.d.ts +49 -0
  139. package/dist/types/components/Stack.d.ts.map +1 -0
  140. package/dist/types/components/Tabs.d.ts +2 -0
  141. package/dist/types/components/Tabs.d.ts.map +1 -1
  142. package/dist/types/components/VerticalStack.d.ts +2 -2
  143. package/dist/types/components/VerticalStack.d.ts.map +1 -1
  144. package/dist/types/index.d.ts +1 -0
  145. package/index.css +11 -0
  146. package/package.json +2 -2
package/dist/esm/stories/Layout.stories.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { transformStorySource } from "../utilities/transformers.js";
3
+ import Stack from "../components/Stack.js";
3
4
  import Layout from "../components/Layout.js";
4
5
  import Text from "../components/Text.js";
5
6
  import Card from "../components/Card.js";
@@ -7,8 +8,6 @@ import Button from "../components/Button.js";
7
8
  import TextField from "../components/TextField.js";
8
9
  import Checkbox from "../components/Checkbox.js";
9
10
  import Box from "../components/Box.js";
10
- import VerticalStack from "../components/VerticalStack.js";
11
- import HorizontalStack from "../components/HorizontalStack.js";
12
11
  import Grid from "../components/Grid.js";
13
12
  export default {
14
13
  title: 'Litho/Layout',
@@ -113,8 +112,8 @@ export var AnnotatedSections = {
113
112
  description: "Manage your account information and preferences",
114
113
  children: /*#__PURE__*/ _jsx(Card, {
115
114
  padded: true,
116
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
117
- gap: "4",
115
+ children: /*#__PURE__*/ _jsxs(Stack, {
116
+ gap: "md",
118
117
  children: [
119
118
  /*#__PURE__*/ _jsx(TextField, {
120
119
  label: "Full Name",
@@ -143,8 +142,8 @@ export var AnnotatedSections = {
143
142
  description: "Choose how you want to receive notifications",
144
143
  children: /*#__PURE__*/ _jsx(Card, {
145
144
  padded: true,
146
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
147
- gap: "4",
145
+ children: /*#__PURE__*/ _jsxs(Stack, {
146
+ gap: "md",
148
147
  children: [
149
148
  /*#__PURE__*/ _jsx(Checkbox, {
150
149
  label: "Email notifications"
@@ -171,8 +170,8 @@ export var AnnotatedSections = {
171
170
  description: "Manage your account security and privacy",
172
171
  children: /*#__PURE__*/ _jsx(Card, {
173
172
  padded: true,
174
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
175
- gap: "4",
173
+ children: /*#__PURE__*/ _jsxs(Stack, {
174
+ gap: "md",
176
175
  children: [
177
176
  /*#__PURE__*/ _jsx(Button, {
178
177
  children: "Change Password"
@@ -223,8 +222,8 @@ export var MixedSections = {
223
222
  description: "Your personal details and contact information",
224
223
  children: /*#__PURE__*/ _jsx(Card, {
225
224
  padded: true,
226
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
227
- gap: "4",
225
+ children: /*#__PURE__*/ _jsxs(Stack, {
226
+ gap: "md",
228
227
  children: [
229
228
  /*#__PURE__*/ _jsx(TextField, {
230
229
  label: "Name",
@@ -256,8 +255,8 @@ export var MixedSections = {
256
255
  description: "Manage your subscription and payment methods",
257
256
  children: /*#__PURE__*/ _jsx(Card, {
258
257
  padded: true,
259
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
260
- gap: "4",
258
+ children: /*#__PURE__*/ _jsxs(Stack, {
259
+ gap: "md",
261
260
  children: [
262
261
  /*#__PURE__*/ _jsx(Text, {
263
262
  children: "Current Plan: Professional ($29/month)"
@@ -265,8 +264,9 @@ export var MixedSections = {
265
264
  /*#__PURE__*/ _jsx(Text, {
266
265
  children: "Next Billing Date: March 15, 2024"
267
266
  }),
268
- /*#__PURE__*/ _jsxs(HorizontalStack, {
269
- gap: "4",
267
+ /*#__PURE__*/ _jsxs(Stack, {
268
+ horizontal: true,
269
+ gap: "md",
270
270
  children: [
271
271
  /*#__PURE__*/ _jsx(Button, {
272
272
  children: "Upgrade Plan"
@@ -303,8 +303,8 @@ export var SettingsPage = {
303
303
  description: "Basic settings for your account and application preferences",
304
304
  children: /*#__PURE__*/ _jsx(Card, {
305
305
  padded: true,
306
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
307
- gap: "6",
306
+ children: /*#__PURE__*/ _jsxs(Stack, {
307
+ gap: "md",
308
308
  children: [
309
309
  /*#__PURE__*/ _jsx(TextField, {
310
310
  label: "Application Name",
@@ -318,8 +318,8 @@ export var SettingsPage = {
318
318
  label: "Time Zone",
319
319
  value: "UTC-8 (Pacific Time)"
320
320
  }),
321
- /*#__PURE__*/ _jsxs(VerticalStack, {
322
- gap: "2",
321
+ /*#__PURE__*/ _jsxs(Stack, {
322
+ gap: "sm",
323
323
  children: [
324
324
  /*#__PURE__*/ _jsx(Checkbox, {
325
325
  label: "Enable dark mode"
@@ -341,11 +341,11 @@ export var SettingsPage = {
341
341
  description: "Control who can see your information and how your data is used",
342
342
  children: /*#__PURE__*/ _jsx(Card, {
343
343
  padded: true,
344
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
345
- gap: "6",
344
+ children: /*#__PURE__*/ _jsxs(Stack, {
345
+ gap: "md",
346
346
  children: [
347
- /*#__PURE__*/ _jsxs(VerticalStack, {
348
- gap: "2",
347
+ /*#__PURE__*/ _jsxs(Stack, {
348
+ gap: "sm",
349
349
  children: [
350
350
  /*#__PURE__*/ _jsx(Checkbox, {
351
351
  label: "Make profile public"
@@ -358,8 +358,9 @@ export var SettingsPage = {
358
358
  })
359
359
  ]
360
360
  }),
361
- /*#__PURE__*/ _jsxs(HorizontalStack, {
362
- gap: "4",
361
+ /*#__PURE__*/ _jsxs(Stack, {
362
+ horizontal: true,
363
+ gap: "md",
363
364
  children: [
364
365
  /*#__PURE__*/ _jsx(Button, {
365
366
  children: "Change Password"
@@ -378,8 +379,8 @@ export var SettingsPage = {
378
379
  description: "Choose what notifications you want to receive and how",
379
380
  children: /*#__PURE__*/ _jsx(Card, {
380
381
  padded: true,
381
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
382
- gap: "6",
382
+ children: /*#__PURE__*/ _jsxs(Stack, {
383
+ gap: "md",
383
384
  children: [
384
385
  /*#__PURE__*/ _jsxs(Box, {
385
386
  children: [
@@ -390,8 +391,8 @@ export var SettingsPage = {
390
391
  children: "Email Notifications"
391
392
  })
392
393
  }),
393
- /*#__PURE__*/ _jsxs(VerticalStack, {
394
- gap: "2",
394
+ /*#__PURE__*/ _jsxs(Stack, {
395
+ gap: "sm",
395
396
  children: [
396
397
  /*#__PURE__*/ _jsx(Checkbox, {
397
398
  label: "Account updates"
@@ -418,8 +419,8 @@ export var SettingsPage = {
418
419
  children: "Push Notifications"
419
420
  })
420
421
  }),
421
- /*#__PURE__*/ _jsxs(VerticalStack, {
422
- gap: "2",
422
+ /*#__PURE__*/ _jsxs(Stack, {
423
+ gap: "sm",
423
424
  children: [
424
425
  /*#__PURE__*/ _jsx(Checkbox, {
425
426
  label: "New messages"
@@ -443,15 +444,15 @@ export var SettingsPage = {
443
444
  description: "Irreversible and destructive actions",
444
445
  children: /*#__PURE__*/ _jsx(Card, {
445
446
  padded: true,
446
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
447
- gap: "4",
447
+ children: /*#__PURE__*/ _jsxs(Stack, {
448
+ gap: "md",
448
449
  children: [
449
450
  /*#__PURE__*/ _jsx(Text, {
450
451
  color: "subdued",
451
452
  children: "These actions cannot be undone. Please proceed with caution."
452
453
  }),
453
- /*#__PURE__*/ _jsxs(VerticalStack, {
454
- gap: "2",
454
+ /*#__PURE__*/ _jsxs(Stack, {
455
+ gap: "sm",
455
456
  children: [
456
457
  /*#__PURE__*/ _jsx(Button, {
457
458
  destructive: true,
@@ -503,8 +504,8 @@ export var ProductManagement = {
503
504
  description: "Essential details about your product",
504
505
  children: /*#__PURE__*/ _jsx(Card, {
505
506
  padded: true,
506
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
507
- gap: "4",
507
+ children: /*#__PURE__*/ _jsxs(Stack, {
508
+ gap: "md",
508
509
  children: [
509
510
  /*#__PURE__*/ _jsx(TextField, {
510
511
  label: "Product Name",
@@ -565,8 +566,8 @@ export var ProductManagement = {
565
566
  description: "Configure shipping options and delivery settings",
566
567
  children: /*#__PURE__*/ _jsx(Card, {
567
568
  padded: true,
568
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
569
- gap: "4",
569
+ children: /*#__PURE__*/ _jsxs(Stack, {
570
+ gap: "md",
570
571
  children: [
571
572
  /*#__PURE__*/ _jsxs(Grid, {
572
573
  columns: {
@@ -594,8 +595,8 @@ export var ProductManagement = {
594
595
  })
595
596
  ]
596
597
  }),
597
- /*#__PURE__*/ _jsxs(VerticalStack, {
598
- gap: "2",
598
+ /*#__PURE__*/ _jsxs(Stack, {
599
+ gap: "sm",
599
600
  children: [
600
601
  /*#__PURE__*/ _jsx(Checkbox, {
601
602
  label: "This is a physical product"
@@ -615,8 +616,9 @@ export var ProductManagement = {
615
616
  /*#__PURE__*/ _jsx(Layout.Section, {
616
617
  children: /*#__PURE__*/ _jsx(Card, {
617
618
  padded: true,
618
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
619
- gap: "4",
619
+ children: /*#__PURE__*/ _jsxs(Stack, {
620
+ horizontal: true,
621
+ gap: "md",
620
622
  align: "end",
621
623
  children: [
622
624
  /*#__PURE__*/ _jsx(Button, {