@umkmall/proto 0.1.0-h7e3b5ebd092b → 0.1.0-ha04bbbde2f13

package/README.md

@@ -2,6 +2,8 @@
 
 The three files a UMKMall prototype loads — `umkmall-tokens.css`, `umkmall-tailwind.js` and `umkmall-ui.js` —
 published so Claude's and Gemini's artifact previews can load them from jsDelivr, the one CDN both allow.
+Plus the docs a model reads (the four `.md` files and the raw starter), linked to each other at the same
+version: Gemini cannot read them off the design host, which sends `X-Robots-Tag: nosnippet`.
 
 **Generated, never committed.** `scripts/proto/build-assets.mjs` builds them; `.github/workflows/proto-publish.yml`
 assembles them with this manifest and publishes them under a version that is their content hash

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@umkmall/proto",
-  "version": "0.1.0-h7e3b5ebd092b",
-  "description": "UMKMall design-system assets for single-file prototypes, served from jsDelivr. Generated — see README.",
+  "version": "0.1.0-ha04bbbde2f13",
+  "description": "UMKMall design-system assets and prototyping docs, served from jsDelivr. Generated — see README.",
   "license": "UNLICENSED",
   "files": [
     "umkmall-tokens.css",
     "umkmall-tailwind.js",
-    "umkmall-ui.js"
+    "umkmall-ui.js",
+    "umkmall-starter.md",
+    "umkmall-starter-app.md",
+    "umkmall-components.md",
+    "umkmall-rules.md",
+    "umkmall-prototype-starter.html"
   ],
   "publishConfig": {
     "access": "public"

package/umkmall-components.md

@@ -0,0 +1,294 @@
+# UMKMall UI — components and their axes
+
+Generated from `packages/ui/src/contract/variants.ts`. Do not hand-edit.
+
+Every component below is published on `window.UmkmallUI` by the browser bundle. Pass only the
+axis values listed, and pass every REQUIRED prop an entry names.
+
+```
+UMKMall UI — 57 components, and the values each axis accepts.
+Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
+
+Button (Foundations)
+  type: primary | ghost | text
+  color: primary | light | danger | dark
+  size: large | medium | small | micro
+  width: auto | full
+  booleans: disabled, isLoading
+
+Alert (Feedback)
+  type: alert | toast
+  function: success | info | warning | danger
+  size: large | medium | small
+  treatment: full | accent | coach | banner
+  appearance: default | a2ui
+
+Badge (Content)
+  color: primary | warning | success | danger | light | bestseller | gradient
+  size: xlarge | medium | small | micro
+  appearance: default | a2ui
+  booleans: showIconLeft, showIconRight
+
+Chip (Content)
+  state: default | active
+  size: huge | xlarge | large | medium | small | micro
+  appearance: default | a2ui
+  booleans: showIconLeft, showIconRight
+
+TextField (Form)
+  size: large | small | xsmall
+  appearance: default | a2ui | bare
+  counterPlacement: below | inside
+  prefixPlacement: inside | outside
+  booleans: error, disabled
+
+CheckBox (Form)
+  size: xlarge | large | medium | small
+  appearance: default | native
+  booleans: error, disabled, indeterminate
+
+Radio (Form)
+  size: large | medium | small
+  booleans: error, disabled
+  REQUIRED props (not axes): label
+
+SegmentedControl (Form)
+  size: medium | small
+  booleans: disabled
+  REQUIRED props (not axes): options, value, onChange
+
+Switch (Form)
+  size: large | medium | small
+  booleans: disabled, loading
+  REQUIRED props (not axes): label
+
+Slider (Form)
+  size: large | small
+  booleans: disabled
+
+DateTimeInput (Form)
+  size: large | small
+  selection: single | range
+  appearance: default | a2ui
+  booleans: error, disabled, withTime, portal
+
+OtpInput (Form)
+  size: large | small
+  booleans: error, disabled
+  REQUIRED props (not axes): value, onChange
+
+Tabs (Navigation)
+  size: large | small | xsmall
+  state: default | active
+  appearance: default | a2ui
+  booleans: showIconLeft, showNotif, showTitle
+
+Tooltip (Feedback)
+  color: dark | white
+  size: large | small
+  booleans: showClose
+  REQUIRED props (not axes): content
+
+Skeleton (Feedback)
+  shape: text | circle | rect
+
+Text (Foundations)
+  role: display | h1 | h2 | h3 | h4 | h5 | h6 | paragraph | bodyLg | bodyMd | bodySm
+  weight: bold | semibold | medium | regular
+  color: primary | secondary | disable | invert | brand | success | error | warning
+
+Icon (Foundations)
+  size: xs | sm | md | lg | xl
+  color: primary | secondary | disable | invert | brand | success | error | warning
+  REQUIRED props (not axes): name
+
+Sidebar (Shell)
+  state: menu | submenu
+  booleans: collapsed, open, active, expanded, nested
+  REQUIRED props (not axes): label
+
+Header (Shell)
+  type: nonLogin | nonLoginBlack | login | temanAiLearn | temanAiChat | dashboard | detailPage
+  booleans: showBack, showTab, showTextLeft, scrolled
+
+AppShell (Shell)
+  booleans: scrolled
+
+Lightbox (Overlays)
+  REQUIRED props (not axes): open, onOpenChange, src
+
+ChatComposer (Chat)
+  tone: neutral | info | warning | danger
+  REQUIRED props (not axes): value, onValueChange, editorLabel
+
+ChatComposerInput (Chat)
+  REQUIRED props (not axes): value, onValueChange, label
+
+ChatDrawer (Chat)
+  variant: inherit | neutral | info | warning | danger
+  booleans: collapsed
+
+ChatAttachment (Chat)
+  variant: image | file | tile
+  size: default | large
+  booleans: showSize
+  REQUIRED props (not axes): name
+
+ChatToolsButton (Chat)
+  state: default | active
+  size: compact | landing
+  REQUIRED props (not axes): label
+
+ChatAttachmentButton (Chat)
+  state: default | active
+  size: compact | landing
+  REQUIRED props (not axes): label
+
+ChatVoiceButton (Chat)
+  state: default | active
+  size: compact | landing
+  REQUIRED props (not axes): label
+
+ChatSendButton (Chat)
+  state: send | stop | waiting
+  size: compact | landing
+  REQUIRED props (not axes): label
+
+ChatSoundWave (Chat)
+  state: idle | listening
+
+ChatVoiceBar (Chat)
+  size: compact | landing
+  REQUIRED props (not axes): size, label, stopLabel, onStop
+
+ChatMessage (Chat)
+  sender: assistant | user | system
+  density: compact | balanced | spacious
+
+ChatMessageBubble (Chat)
+  group: none | first | middle | last
+  width: auto | full
+  booleans: ghost
+
+ChatMessageMetadata (Chat)
+  status: sending | sent | delivered | read | error
+
+ChatMessageList (Chat)
+  density: compact | balanced | spacious
+  align: top | bottom
+  gap: none | 2xs | xs | sm | md | lg
+  booleans: streaming
+
+ChatThread (Chat)
+
+ChatScrollButton (Chat)
+  shape: icon | labelled
+  booleans: hasNewMessages
+  REQUIRED props (not axes): label
+
+ChatMessageTTSButton (Chat)
+  state: idle | loading | playing | paused | error
+  REQUIRED props (not axes): state, label, onToggle
+
+Dialog (Overlays)
+  size: small | medium | large | xlarge
+  side: none | left | right
+  booleans: centered, showCloseButton, dismissible, closeDisabled
+  REQUIRED props (not axes): open, onOpenChange
+
+Menu (Overlays)
+  variant: pill | boxed
+  REQUIRED props (not axes): trigger, items
+
+Popover (Overlays)
+  align: start | center | end
+  booleans: portal
+
+Card (Content)
+  variant: elevated | outlined | plain
+  padding: none | small | medium | large
+  appearance: default | a2ui | a2ui-hero
+
+Divider (Content)
+  variant: default | dashed
+  orientation: horizontal | vertical
+  appearance: default | a2ui
+
+List (Content)
+
+Disclosure (Content)
+  appearance: default | a2ui
+  REQUIRED props (not axes): title
+
+Image (Content)
+  type: thumbnail | banner | natural | avatar
+  size: regular | small | blog
+  appearance: default | a2ui
+  booleans: hover
+
+SelectionCard (Form)
+  size: large | small
+  state: default | selected | disabled
+  layout: row | tile
+  appearance: default | choice
+  REQUIRED props (not axes): options
+
+Upload (Form)
+  size: large | small
+  status: default | filled | error | disabled | busy
+  border: solid | dashed
+  appearance: default | a2ui
+
+Select (Form)
+  size: large | small
+  status: default | filled | error | disabled
+  booleans: multiple, portal
+  REQUIRED props (not axes): options
+
+CodeBlock (Content)
+  size: large | small
+  appearance: default | a2ui
+
+Stepper (Navigation)
+  position: first | middle | last
+  state: default | current | done
+  orientation: horizontal | vertical
+  REQUIRED props (not axes): steps
+
+Pagination (Navigation)
+  size: large | small
+  density: compact | comfortable
+  booleans: disabled
+  REQUIRED props (not axes): page, onPageChange
+
+Table (Content)
+  density: compact | comfortable
+  booleans: loading, serverSide, hidePagination, fixedLayout, noBorder, slimScrollbar
+
+Spinner (Feedback)
+  variant: primary | white | gray | gradient
+  size: sm | md | lg | xl
+
+ProgressBar (Feedback)
+  variant: default | success | warning | error | gray | gradient
+  size: large | medium | small
+  shape: linear | radial
+
+Toaster (Feedback)
+  position: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
+
+Label (Form)
+  variant: default | error | success
+  size: sm | md | lg
+  look: default | field-large | field-small
+  booleans: required
+
+TRAPS — each of these renders or ignores silently, with no error:
+
+1. `Text` roles are camelCase: `bodyLg`, `paragraphSm`, `labelMd`. A kebab-case or Title-Case role matches no variant and the text renders with no type styling at all.
+2. `Header`’s `title` is rendered ONLY when `showTextLeft` is also passed. `title` alone is silently dropped — the header renders, without its title.
+3. `Alert` has no `title` prop. Put the heading in `children`; a `title` passed to it lands on the underlying `div` as a DOM attribute and shows up as a tooltip.
+4. THE AXES ARE NOT THE PROP LIST. An axis is a STYLING choice; a component can also require DATA, and any entry above with a “REQUIRED props” line will not render without it. `Stepper` is the one that catches everyone: its axes are `position`, `state` and `orientation`, and all three belong to a STEP — the component itself takes `steps={[{ label, state, position }]}`. Writing `<Stepper position="first" state="done" />` throws inside the component, React unmounts the whole tree, and the page goes BLANK. Same shape for `SelectionCard` (`options`), `Select` (`options`), `Menu` (`trigger`, `items`) and `Dialog` (`open`, `onOpenChange`).
+5. AN AXIS NAME IS NOT ALWAYS THE PROP NAME. Every axis listed above is passed under its own name EXCEPT two: write `variant` (not `function`) for `Alert`, and `variant` (not `role`) for `Text` — taking the legal values from the `function` and `role` axes respectively. Those two keep Figma’s word in the contract because `function` is a reserved word and `role` is an ARIA attribute. Passing the axis name instead of the prop renders the component with no styling and no error.
+6. The `Table` entry exports the plain parts AND `DataTable`, and the REQUIRED props line above reads only the parts. `DataTable` needs `columns` (tanstack `ColumnDef`s, e.g. `[{ accessorKey: "name", header: "Nama" }]`) and `data`; without them it throws and the page goes blank. `Pagination` needs `page` (1-based) and `onPageChange`; pass `pageCount` for a numbered strip, or omit it and pass `hasNext` for a cursor source, or next stays disabled.
+```