smartsell-ui-kit 0.1.12 → 0.1.14
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.
- package/README.md +25 -0
- package/dist/index.cjs +397 -186
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +18 -382
- package/dist/index.d.ts +18 -382
- package/dist/index.js +396 -186
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -23
- package/dist/types-ENHTzCG6.d.cts +392 -0
- package/dist/types-ENHTzCG6.d.ts +392 -0
- package/dist/types.d.cts +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,6 +27,7 @@ import 'smartsell-ui-kit/styles.css';
|
|
|
27
27
|
- Display and layout primitives such as `Card`, `CardSmall`, and `Separator`
|
|
28
28
|
- Modal helpers including `Modal`, `ComposableModal`, and `createModalSlotIds`
|
|
29
29
|
- Data components including `Table` and `TableAsync`
|
|
30
|
+
- Animations such as `Loading`, a shopping cart animation for loading states
|
|
30
31
|
- Brand images published from the dedicated `smartsell-ui-kit/img` subpath
|
|
31
32
|
- Local Storybook workspace for visual QA before release
|
|
32
33
|
|
|
@@ -69,6 +70,7 @@ export default function ExamplePage() {
|
|
|
69
70
|
- `Card`, `CardSmall`, `Separator`
|
|
70
71
|
- `Modal`, `ComposableModal`, `createModalSlotIds`
|
|
71
72
|
- `Table`, `TableAsync`
|
|
73
|
+
- `Loading`
|
|
72
74
|
- `useUiKitTheme`
|
|
73
75
|
- `smartsell-ui-kit/img` for branded logo, icon, favicon, and background image components
|
|
74
76
|
|
|
@@ -92,6 +94,29 @@ export default function BrandHeader() {
|
|
|
92
94
|
|
|
93
95
|
All image components resolve their source from the active `smartsell-theme` context. Right now light and dark modes point to the same files, but the submodule already swaps sources by theme variant so future dark-specific images only require changing the mapped filenames.
|
|
94
96
|
|
|
97
|
+
## Standard modal actions
|
|
98
|
+
|
|
99
|
+
Use `closeAction`, `cancelAction`, `confirmAction`, or `extraActions` when the modal owns its footer
|
|
100
|
+
actions. These actions render the public `Button` component internally, so changes to the shared
|
|
101
|
+
button styles are automatically reflected in every standard modal action.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<Modal
|
|
105
|
+
isOpen={isOpen}
|
|
106
|
+
onClose={() => setIsOpen(false)}
|
|
107
|
+
title="Customer details"
|
|
108
|
+
closeAction={{
|
|
109
|
+
label: 'Close',
|
|
110
|
+
onClick: () => setIsOpen(false),
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
<div>Customer data</div>
|
|
114
|
+
</Modal>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Pass a custom `footer` only when the application needs a composition that cannot be represented by
|
|
118
|
+
the standard action properties.
|
|
119
|
+
|
|
95
120
|
## Composable modal pattern
|
|
96
121
|
|
|
97
122
|
Use `ComposableModal` when the page should own modal state and business logic, while host applications or extension layers customize the `header`, `body`, and `footer` through stable slot ids.
|