ionbase-ui 0.16.0 → 0.18.0

package/dist/meta/Divider.json

@@ -0,0 +1,30 @@
+{
+  "name": "Divider",
+  "source": "src/components/Divider.tsx",
+  "propsType": "DividerProps",
+  "description": "A single `<hr>`, matching Figma's `Border` (70:22153).\n\n`<hr>` rather than a styled `<div>`: it is a semantic thematic break, so a\nscreen reader announces it as one, and it needs no `role` to get there.\n`aria-orientation` is set for the vertical case, since a vertical rule\ninside a horizontal toolbar is the one shape a screen reader cannot infer\nfrom the element alone.",
+  "import": "import { Divider } from 'ionbase-ui';",
+  "stylesheet": "src/styles/divider.css",
+  "tokens": [
+    "--border-strong",
+    "--border-width-default"
+  ],
+  "props": {
+    "orientation": {
+      "type": "DividerOrientation | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Figma's `Style` variant.",
+      "values": [
+        "horizontal",
+        "vertical"
+      ]
+    }
+  },
+  "propCounts": {
+    "own": 1,
+    "aria": 0,
+    "dom": 278,
+    "other": 0
+  }
+}

package/dist/meta/FullCard.json

@@ -0,0 +1,97 @@
+{
+  "name": "FullCard",
+  "source": "src/components/FullCard.tsx",
+  "propsType": "FullCardProps",
+  "description": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).\n\nA text column beside a framed media panel, split down the middle, mirrored\nby the `Alignment` variant.\n\nThe split holds from 1080 and stacks below it, media above content in BOTH\nalignments — `Alignment` names a horizontal side and\nstops meaning anything once there is one column, so it does not get to\ndecide the vertical order too. Size is a media query, not a prop, the same\ncall Header makes about Device.\n\nWHY THE `show*` BOOLEANS ARE GONE\n\nFigma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside\nthe slots they gate, because a Figma component instance always holds every\nlayer and needs a switch to hide one. React has no such constraint — an\nabsent prop is the switch. Badge made the same call with `Show Dot`, and\nkeeping both would have let `showActions` and `actions` disagree.\n\n`headline` is required, and it is the only required prop. The heading is\nwhat makes this a section rather than a decorated div, and every other part\nof the card is optional in Figma too.\n\nNo `'use client'`: nothing here is stateful or interactive. The interactive\nparts arrive through `actions`, and they carry their own boundary.",
+  "import": "import { FullCard } from 'ionbase-ui';",
+  "stylesheet": "src/styles/full-card.css",
+  "tokens": [
+    "--border-default",
+    "--border-width-default",
+    "--font-family-sans",
+    "--font-weight-regular",
+    "--font-weight-semibold",
+    "--ion-full-card-gap",
+    "--ion-full-card-media-gutter",
+    "--ion-full-card-media-min-height",
+    "--ion-full-card-media-width",
+    "--ion-full-card-padding-x",
+    "--ion-full-card-padding-y",
+    "--radius-5xl",
+    "--radius-6xl",
+    "--radius-none",
+    "--spacing-0",
+    "--spacing-24",
+    "--spacing-32",
+    "--spacing-48",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-page",
+    "--surface-sunken",
+    "--text-default",
+    "--text-secondary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-h3",
+    "--type-h3-line-height"
+  ],
+  "props": {
+    "alignment": {
+      "type": "FullCardAlignment | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Which side the media panel sits on. Matches Figma's `Alignment` variant,\nwhose `Right` / `Left` name the media, not the text.",
+      "values": [
+        "right",
+        "left"
+      ]
+    },
+    "eyebrow": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Eyebrow` slot — a Badge in the design, but any node works."
+    },
+    "headline": {
+      "type": "React.ReactNode",
+      "required": true,
+      "origin": "own",
+      "description": "Figma's `Headline`. Required: a card with no headline has no accessible name."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Description`."
+    },
+    "actions": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Actions` slot — a secondary Button in the design."
+    },
+    "media": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Media` slot. Rendered inside the framed screen holder, so pass\nthe screenshot or embed itself, not the frame."
+    },
+    "headingLevel": {
+      "type": "FullCardHeadingLevel | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Heading element for the headline. Defaults to `h3`, matching the `Type/H3`\ntext style Figma applies — but the level is a document-outline decision\nonly the page knows, so it is a prop rather than a constant."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 8,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/Header.json

@@ -0,0 +1,91 @@
+{
+  "name": "Header",
+  "source": "src/components/Header.tsx",
+  "propsType": "HeaderProps",
+  "description": "Header renders Figma's four Device variants — Desktop, Tablet,\nMobile-Closed, Mobile-Open — from one DOM tree.\n\nTWO AXES, AND THEY ARE NOT THE SAME KIND OF THING\n\nFigma spells Device as a single four-way variant, but it is really two: a\n*breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They\nare modelled differently here because they are known by different people.\n\n  Breakpoint is a media query. It is the one variant axis in the system the\n  browser already knows the answer to — a header is Mobile because the\n  viewport is narrow — and having React duplicate that judgement is how the\n  two drift apart. Breakpoints match the Breakpoint collection's container\n  widths: Tablet below 1216, Mobile below 896.\n\n  Open/Closed is a prop, because only the caller knows. It follows the\n  controlled/uncontrolled pair the rest of the system uses.\n\nONE TREE, TWO LAYOUTS\n\n`center` and `end` sit inline in the bar on Desktop and Tablet, and inside\nthe dropped Menu-Container on Mobile-Open. They are rendered once, in one\nwrapper, which is `display: contents` above the mobile breakpoint and an\nabsolutely positioned panel below it. Rendering them twice — or moving them\nwith JavaScript — would mean the same nav link exists twice in the\naccessibility tree, and would reset any state a caller put in a slot every\ntime the viewport crossed 896px.\n\nThe centre slot is no longer hidden on Tablet. Figma's Tablet variant ships\nit populated; the previous release collapsed it, which was correct for the\nprevious design and is not for this one.\n\nA `<header>` element with no explicit role: it is a landmark already when it\nis a direct child of body, which is where a page header sits.",
+  "import": "import { Header } from 'ionbase-ui';",
+  "stylesheet": "src/styles/header.css",
+  "tokens": [
+    "--border-default",
+    "--border-strong",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--icon-default",
+    "--icon-size-sm",
+    "--ion-header-center-gap",
+    "--ion-header-end-gap",
+    "--ion-header-height",
+    "--ion-header-padding-x",
+    "--ion-header-padding-y",
+    "--ion-shadow-raised-lifted-xs",
+    "--radius-md",
+    "--radius-sm",
+    "--ring-focus",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-24",
+    "--spacing-32",
+    "--spacing-4",
+    "--spacing-48",
+    "--spacing-64",
+    "--spacing-8",
+    "--surface-default"
+  ],
+  "props": {
+    "brand": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's Logo slot. Rendered at the start, never shrinks."
+    },
+    "center": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Center Slot` — nav items. Inline on Desktop and Tablet; moves\ninto the Mobile-Open menu below the mobile breakpoint."
+    },
+    "end": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `End Slot` — buttons and actions. Same placement rules as `center`."
+    },
+    "open": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Controlled Mobile-Open state. Pair with `onOpenChange`."
+    },
+    "defaultOpen": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Initial Mobile-Open state when uncontrolled."
+    },
+    "onOpenChange": {
+      "type": "((open: boolean) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Fires whenever the menu toggle changes the state, controlled or not."
+    },
+    "menuLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible name for the mobile menu toggle."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 8,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/Icon.json

@@ -0,0 +1,35 @@
+{
+  "name": "Icon",
+  "source": "src/Icon.tsx",
+  "propsType": "IconProps",
+  "description": "Wrapper that applies the design system's icon sizing and accessibility\ndefaults to whatever icon component you hand it.\n\n  import { Plus } from 'lucide-react';\n  <Icon as={Plus} size=\"sm\" />\n  <Icon as={Plus} label=\"Add item\" />   // meaningful, gets an a11y name\n\nTakes the icon as a prop rather than re-exporting a set: a barrel of a\nthousand-plus icons defeats tree-shaking in several bundlers, and pinning one\nicon library would force it on every consumer. You import the one icon you\nneed, from whichever library you use, and it is the only one bundled.",
+  "import": "import { Icon } from 'ionbase-ui';",
+  "stylesheet": "src/styles/icon.css",
+  "tokens": [],
+  "props": {
+    "as": {
+      "type": "IconComponent",
+      "required": true,
+      "origin": "own",
+      "description": "The icon component to render, e.g. `import { Plus } from 'lucide-react'`.\nAny SVG component works — the design system does not ship an icon set."
+    },
+    "size": {
+      "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xs\" | \"xs\" | (string & {}) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "A rung on the `icon-size` ladder — `2xs` 12, `xs` 14, `sm` 16, `md` 20,\n`lg` 24, `xl` 32 — or any CSS length for a one-off. Omit to inherit the surrounding\nfont size, which is what lets an icon sit correctly inside a Button without\nthe Button having to know anything about this component."
+    },
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible name. Provide it when the icon carries meaning on its own — an\nicon-only button, a status marker. Omit it for decoration next to a visible\nlabel, and the icon is hidden from assistive tech instead of read out twice."
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 487,
+    "other": 0
+  }
+}