smartsell-ui-kit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SmartSell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# smartsell-ui-kit
+
+`smartsell-ui-kit` is the public UI primitives package for SmartSell Sales custom modules.
+
+It is designed for tenant developers who should not need to know how the core app is implemented.
+The package stays on the public contract surface:
+
+- theme-aware components powered by `smartsell-sales-sdk`
+- inline-style primitives that do not depend on private app CSS files
+- a composable modal helper with predictable slot ids for `header`, `body`, and `footer`
+
+## Installation
+
+```bash
+npm install react smartsell-sales-sdk smartsell-ui-kit
+```
+
+## Basic button and card
+
+```tsx
+import { Button, Card } from 'smartsell-ui-kit';
+import type { ModulePageProps } from 'smartsell-sales-sdk';
+
+export default function ExamplePage({ sdk }: ModulePageProps) {
+  return (
+    <Card sdk={sdk} title="Example" eyebrow="UI kit">
+      <Button sdk={sdk} onClick={() => sdk.navigation.goBack()}>
+        Go back
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Composable modal pattern
+
+Use `ComposableModal` when you want the page to keep modal state while tenants customize visual sections independently.
+
+```tsx
+import { ComposableModal, createModalSlotIds } from 'smartsell-ui-kit';
+
+const slotIds = createModalSlotIds('order-review');
+
+<ComposableModal
+  sdk={sdk}
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onConfirm={submitOrder}
+  title="Order review"
+  description="Validate the order before sending it."
+  slotBaseId="order-review"
+  payload={{ orderNumber: 'SO-1001', total: 421.9 }}
+>
+  <div>Default modal body</div>
+</ComposableModal>
+```
+
+Slot ids generated by `createModalSlotIds('order-review')`:
+
+- `order-review:modal-header`
+- `order-review:modal-body`
+- `order-review:modal-footer`
+
+Tenant extension example:
+
+```tsx
+import {
+  defineExtensionManifest,
+  type ExtensionManifest,
+  type SlotComponentProps,
+} from 'smartsell-sales-sdk';
+import {
+  Button,
+  type ModalSlotContext,
+  createModalSlotIds,
+} from 'smartsell-ui-kit';
+
+type OrderPayload = {
+  orderNumber: string;
+  total: number;
+};
+
+function CustomFooter({ sdk, context }: SlotComponentProps<ModalSlotContext<OrderPayload>>) {
+  return (
+    <Button sdk={sdk} onClick={() => context?.confirm?.()}>
+      Send order {context?.payload?.orderNumber}
+    </Button>
+  );
+}
+
+const slots = createModalSlotIds('order-review');
+
+const manifest: ExtensionManifest = defineExtensionManifest({
+  slots: {
+    [slots.footer]: {
+      action: 'replace',
+      component: CustomFooter,
+    },
+  },
+});
+
+export default manifest;
+```
+
+## Why this modal pattern exists
+
+- The page owns state, data loading, and permissions.
+- The tenant customizes `header`, `body`, and `footer` through stable slot ids.
+- Slot overrides receive an explicit `context` object instead of relying on private core imports.
+- The same pattern works for many modals without creating a new module type.
+
+## Publish
+
+```bash
+npm run typecheck
+npm run build
+npm publish
+```