# Building UI with Sassly UI

This project uses Sassly UI, the shared component library of the Sassly products (https://uiux.sassly.ai).
Read this before writing or changing any screen.

## Find the right piece
1. Open the catalog: https://uiux.sassly.ai/llms.txt (one line per component, template, block and motion item).
2. Read the card of every item you use: https://uiux.sassly.ai/ai/<slug>.md (when to use it, install, usage, props, files, rules).
3. Start screens from a template when one fits (Case Index, Case Workspace, Checkout Counter, Service Overview, …).
4. Only build something new when no item fits, and then build it from tokens and base primitives.

## Install
React:
```bash
# install (pin the version; see https://uiux.sassly.ai/pkg/latest for the newest)
npm i https://uiux.sassly.ai/pkg/sassly-ui-0.1.2.tgz
```
```jsx
// once, at the app root
import '@sassly/ui/styles.css';   // or '@sassly/ui/core.css' plus '@sassly/ui/css/<slug>.css' per item
```
Plain HTML:
```html
<html lang="en" data-theme="onix" data-mode="light">
<link rel="stylesheet" href="https://uiux.sassly.ai/cdn/latest/sassly-ui.css">
<script src="https://uiux.sassly.ai/cdn/latest/sassly-ui.js" defer></script>
```
Every element with `data-sx="<slug>"` is set up automatically. Its API is `element.__sx`; it reports through bubbling `sx:*` events. Pin a version with `/cdn/<version>/` instead of `/cdn/latest/`.

## Rules
- Use an existing Sassly UI item before writing new UI. The catalog is llms.txt; every item has a card at ai/<slug>.md.
- Colours, radii, shadows, type and motion come only from the `--sx-*` tokens. No raw hex values, no new theme selectors.
- Set the look once on `<html>`: `data-theme="neutral|onix"`, `data-mode="light|dark"`, optional `data-surface="flat|tray"`.
- Buttons are `.sx-btn` (+ `--primary --accent --ghost --danger --sm --lg --icon --pill --block`) with the label inside a `<span>`.
- Product screens sit inside Product Frame. Full-screen screens (Checkout Counter, Floor Display, Login Screen) do not.
- Do not restyle a component’s inner parts. Lay it out from the outside, or adjust tokens on a wrapper.
- Keep the accessibility the component ships with: real buttons and inputs, its roles, aria attributes and keyboard support.
- Copy is sentence case. Money is Rupiah with dot grouping: `Rp 48.000`.

## Base primitives (shared/styles/base.css)
`.sx-card`, `.sx-btn`, `.sx-chip` (+ `--soft --accent --mark --success --warning --danger --info`), `.sx-dot`, `.sx-count`, `.sx-kbd`, `.sx-avatar`, `.sx-input`, `.sx-field/.sx-label/.sx-hint`, `.sx-check`, `.sx-switch`, `.sx-spinner`, `.sx-progress`, `.sx-menu`, `.sx-pop`, `.sx-skeleton`, `.sx-tabular`, `.sx-mono`, `.sx-truncate`, `.sx-visually-hidden`.

## Updating
- React: `npm i https://uiux.sassly.ai/pkg/sassly-ui-$(curl -fsS https://uiux.sassly.ai/pkg/latest).tgz`
- HTML on `/cdn/latest/` updates by itself; pinned `/cdn/<version>/` links change only when you edit them.