@iota/apps-ui-kit 0.7.0 → 0.7.2

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 (53) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.d.ts +51 -25
  3. package/dist/index.es.js +2213 -2151
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +10 -10
  6. package/dist/index.umd.js.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +3 -2
  9. package/src/lib/components/atoms/button/Button.tsx +1 -0
  10. package/src/lib/components/atoms/button-segment/ButtonSegment.tsx +1 -1
  11. package/src/lib/components/atoms/checkbox/Checkbox.tsx +0 -1
  12. package/src/lib/components/atoms/index.ts +1 -0
  13. package/src/lib/components/atoms/list-item/ListItem.tsx +1 -1
  14. package/src/lib/components/atoms/radio-button/RadioButton.tsx +1 -1
  15. package/src/lib/components/atoms/skeleton/Skeleton.tsx +5 -20
  16. package/src/lib/components/index.ts +0 -2
  17. package/src/lib/components/molecules/chip/Chip.tsx +51 -17
  18. package/src/lib/components/molecules/chip/chip.classes.ts +36 -14
  19. package/src/lib/components/molecules/chip/chip.enums.ts +6 -3
  20. package/src/lib/components/molecules/input/Input.tsx +34 -17
  21. package/src/lib/components/molecules/input/TextArea.tsx +5 -4
  22. package/src/lib/components/molecules/navbar-item/NavbarItem.tsx +0 -1
  23. package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx +1 -1
  24. package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx +1 -1
  25. package/src/lib/components/molecules/select/Select.tsx +24 -4
  26. package/src/lib/components/organisms/dialog/Dialog.tsx +37 -22
  27. package/src/lib/constants/colors.constants.ts +12 -5
  28. package/src/lib/enums/index.ts +1 -0
  29. package/src/lib/enums/theme.enums.ts +8 -0
  30. package/src/lib/index.ts +2 -0
  31. package/src/lib/styles/base.css +40 -0
  32. package/src/lib/styles/components.css +52 -4
  33. package/src/lib/styles/index.css +4 -753
  34. package/src/lib/styles/utilities.css +11 -3
  35. package/src/lib/styles/variables/dark-variables.css +262 -0
  36. package/src/lib/styles/variables/general-variables.css +9 -0
  37. package/src/lib/styles/variables/light-variables.css +276 -0
  38. package/src/lib/styles/variables/names-variables.css +270 -0
  39. package/src/lib/tailwind/base.presets.ts +4 -0
  40. package/src/lib/tailwind/constants/gradients.constants.ts +6 -0
  41. package/src/storybook/blocks/TypeSet.tsx +3 -3
  42. package/src/storybook/constants/gradients.constants.ts +8 -0
  43. package/src/storybook/helpers/formatGradientNames.ts +15 -0
  44. package/src/storybook/stories/atoms/Skeleton.stories.tsx +5 -5
  45. package/src/storybook/stories/components/DocsSyncTheme.tsx +20 -0
  46. package/src/storybook/stories/components/index.ts +1 -0
  47. package/src/storybook/stories/design-tokens/colors.stories.mdx +12 -0
  48. package/src/storybook/stories/design-tokens/icons.stories.mdx +2 -0
  49. package/src/storybook/stories/design-tokens/typeset.stories.mdx +2 -0
  50. package/src/storybook/stories/design-tokens/variable-spacing.stories.mdx +2 -1
  51. package/src/storybook/stories/molecules/Chip.stories.tsx +5 -0
  52. package/src/storybook/stories/molecules/Input.stories.tsx +79 -2
  53. package/src/storybook/stories/organisms/Dialog.stories.tsx +54 -28
package/src/storybook/stories/organisms/Dialog.stories.tsx CHANGED
@@ -63,36 +63,62 @@ export const RightDialog: Story = {
63
63
  <Button size={ButtonSize.Small} text="Open Dialog" onClick={() => setOpen(true)} />
64
64
  <Dialog open={open} onOpenChange={setOpen}>
65
65
  <DialogContent showCloseOnOverlay position={DialogPosition.Right}>
66
- <div className="h-full w-full">
67
- <Header
68
- title="Connect Ledger Wallet"
69
- titleCentered
70
- onClose={() => setOpen(false)}
71
- onBack={() => setOpen(false)}
72
- />
73
- <div className="flex h-full w-full flex-col items-center justify-center">
74
- <DialogBody>
75
- <div className="flex flex-col items-center gap-2">
76
- <div className="mt-4.5">Logo</div>
77
- <div className="mt-4.5 break-words text-center">
78
- Connect your ledger to your computer, unlock it, and
79
- launch the IOTA app. Click Continue when done.
80
- </div>
81
- <div className="mt-4.5">
82
- {' '}
83
- Need more help? View tutorial.
84
- </div>
66
+ <Header
67
+ title="Connect Ledger Wallet"
68
+ titleCentered
69
+ onClose={() => setOpen(false)}
70
+ onBack={() => setOpen(false)}
71
+ />
72
+ <div className="flex h-full w-full flex-col items-center justify-center">
73
+ <DialogBody>
74
+ <div className="flex flex-col items-center gap-2">
75
+ <div className="mt-4.5">Logo</div>
76
+ <div className="mt-4.5 break-words text-center">
77
+ Connect your ledger to your computer, unlock it, and launch
78
+ the IOTA app. Click Continue when done.
79
+ </div>
80
+ <div className="mt-4.5"> Need more help? View tutorial.</div>
81
+ </div>
82
+ </DialogBody>
83
+ <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
84
+ <Button
85
+ size={ButtonSize.Small}
86
+ type={ButtonType.Outlined}
87
+ text="Cancel"
88
+ onClick={() => setOpen(false)}
89
+ />
90
+ <Button size={ButtonSize.Small} text="Connect" />
91
+ </div>
92
+ </div>
93
+ </DialogContent>
94
+ </Dialog>
95
+ <Dialog open={open} onOpenChange={setOpen}>
96
+ <DialogContent showCloseOnOverlay position={DialogPosition.Right}>
97
+ <Header
98
+ title="Connect Ledger Wallet"
99
+ titleCentered
100
+ onClose={() => setOpen(false)}
101
+ onBack={() => setOpen(false)}
102
+ />
103
+ <div className="flex h-full w-full flex-col items-center justify-center">
104
+ <DialogBody>
105
+ <div className="flex flex-col items-center gap-2">
106
+ <div className="mt-4.5">Logo</div>
107
+ <div className="mt-4.5 break-words text-center">
108
+ Connect your ledger to your computer, unlock it, and launch
109
+ the IOTA app. Click Continue when done.
85
110
  </div>
86
- </DialogBody>
87
- <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
88
- <Button
89
- size={ButtonSize.Small}
90
- type={ButtonType.Outlined}
91
- text="Cancel"
92
- onClick={() => setOpen(false)}
93
- />
94
- <Button size={ButtonSize.Small} text="Connect" />
111
+ <div className="mt-4.5"> Need more help? View tutorial.</div>
95
112
  </div>
113
+ </DialogBody>
114
+ <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
115
+ <Button
116
+ size={ButtonSize.Small}
117
+ type={ButtonType.Outlined}
118
+ text="Cancel"
119
+ onClick={() => setOpen(false)}
120
+ />
121
+ <Button size={ButtonSize.Small} text="Connect" />
96
122
  </div>
97
123
  </div>
98
124
  </DialogContent>