ionbase-ui 0.13.1 → 0.17.0

package/dist/meta/Link.json

@@ -0,0 +1,239 @@
+{
+  "name": "Link",
+  "source": "src/components/Link.tsx",
+  "propsType": "LinkProps",
+  "description": "Link — Figma `Link` (774:1516).\n\nRenders an `<a>` when given an `href` and a `<button>` otherwise, the same\njudgment `NavItem` makes: the element follows what the caller is actually\nbuilding rather than a separate `as` prop. A link that does not navigate is\na button, and shipping one as an anchor breaks middle-click, \"open in new\ntab\" and the screen-reader announcement all at once.\n\nNO SIZE PROP, DELIBERATELY. A link is an inline element and inherits its\ntype from the text around it — `font-size: inherit` in the stylesheet, and\nicons sized in `em` so they scale with it. Figma has to draw its variants at\nsome concrete size (16/24, `type/body`), but that is one sample of an\ninheriting element, not a specification. Do not add a size ladder to match\nthe drawing.",
+  "import": "import { Link } from 'ionbase-ui';",
+  "stylesheet": "src/styles/link.css",
+  "tokens": [
+    "--border-width-thick",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-xs",
+    "--ring-focus",
+    "--spacing-4",
+    "--text-disabled",
+    "--text-link",
+    "--text-link-hover",
+    "--text-link-visited"
+  ],
+  "props": {
+    "variant": {
+      "type": "LinkVariant | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches the Figma `Type` variant.\n\n`inline` is for links inside body copy and is underlined in every state —\na link in a paragraph must not rely on colour alone (WCAG 1.4.1).\n`standalone` is for links that already read as interactive from their\nposition, and underlines on hover only.",
+      "values": [
+        "inline",
+        "standalone"
+      ],
+      "default": "inline"
+    },
+    "startIcon": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Optional icon before the label."
+    },
+    "endIcon": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Optional icon after the label — the external-link or arrow affordance."
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "disabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "tags": {
+        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+      }
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Whether the link is disabled."
+    },
+    "elementType": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The HTML element used to render the link, e.g. 'a', or 'span'.",
+      "tags": {
+        "default": "'a'"
+      }
+    },
+    "onPress": {
+      "type": "((e: PressEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when the press is released over the target."
+    },
+    "onPressStart": {
+      "type": "((e: PressEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when a press interaction starts."
+    },
+    "onPressEnd": {
+      "type": "((e: PressEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target."
+    },
+    "onPressChange": {
+      "type": "((isPressed: boolean) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when the press state changes."
+    },
+    "onPressUp": {
+      "type": "((e: PressEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not."
+    },
+    "onClick": {
+      "type": "((e: MouseEvent<FocusableElement>) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "**Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`\nprovided for compatibility with other libraries. `onPress` provides\nadditional event details for non-mouse interactions."
+    },
+    "autoFocus": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Whether the element should receive focus on render."
+    },
+    "onFocus": {
+      "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when the element receives focus."
+    },
+    "onBlur": {
+      "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when the element loses focus."
+    },
+    "onFocusChange": {
+      "type": "((isFocused: boolean) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when the element's focus status changes."
+    },
+    "onKeyDown": {
+      "type": "((e: KeyboardEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when a key is pressed."
+    },
+    "onKeyUp": {
+      "type": "((e: KeyboardEvent) => void) | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Handler that is called when a key is released."
+    },
+    "href": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)."
+    },
+    "hrefLang": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Hints at the human language of the linked URL.\nSee[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang)."
+    },
+    "target": {
+      "type": "HTMLAttributeAnchorTarget | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The target window for the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)."
+    },
+    "rel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The relationship between the linked resource and the current page. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)."
+    },
+    "download": {
+      "type": "string | boolean | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Causes the browser to download the linked URL. A string may be provided to suggest a file name.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)."
+    },
+    "ping": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "A space-separated list of URLs to ping when the link is followed. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping)."
+    },
+    "referrerPolicy": {
+      "type": "HTMLAttributeReferrerPolicy | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "How much of the referrer to send when following the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).",
+      "values": [
+        "",
+        "origin",
+        "no-referrer",
+        "no-referrer-when-downgrade",
+        "origin-when-cross-origin",
+        "same-origin",
+        "strict-origin",
+        "strict-origin-when-cross-origin",
+        "unsafe-url"
+      ]
+    },
+    "routerOptions": {
+      "type": "undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Options for the configured client side router."
+    },
+    "aria-label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-describedby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+    }
+  },
+  "propCounts": {
+    "own": 6,
+    "aria": 26,
+    "dom": 266,
+    "other": 0
+  }
+}

package/dist/meta/Logo.json

@@ -0,0 +1,46 @@
+{
+  "name": "Logo",
+  "source": "src/components/Logo.tsx",
+  "propsType": "LogoProps",
+  "description": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`\n(52:21369).\n\nFigma also has a `Property=Name` axis — wordmark only, no mark — but both\nof its variants currently render the placeholder text \"raza\" rather than\n\"IonBase\", in an unbound raw colour. That is leftover debug content, not a\nreal asset, so it is not implemented here. Reproducing it would ship a\nstranger's name into a design system; extending `LogoMark` alone already\ncovers \"no wordmark\" for the cases that are real.",
+  "import": "import { Logo } from 'ionbase-ui';",
+  "stylesheet": "src/styles/logo.css",
+  "tokens": [
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-default",
+    "--spacing-4",
+    "--spacing-8",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "size": {
+      "type": "LogoSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Figma's `Size` variant: Small (24px mark) or Large (32px).",
+      "values": [
+        "sm",
+        "lg"
+      ]
+    },
+    "wordmark": {
+      "type": "LogoWordmark | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Figma's `Type` variant. `vector` is the serif logotype Figma\ncalls \"Logo\" — what `Header` uses, immune to font substitution and\nvisually distinct from the sans-serif UI type everywhere else. `text` is\nwhat Figma calls \"Icon\": a live `Host Grotesk` run, real and selectable,\nat `text/tertiary` rather than the mark's `icon/default`.",
+      "values": [
+        "text",
+        "vector"
+      ]
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 278,
+    "other": 0
+  }
+}

package/dist/meta/LogoMark.json

@@ -0,0 +1,41 @@
+{
+  "name": "LogoMark",
+  "source": "src/components/Logo.tsx",
+  "propsType": "LogoMarkProps",
+  "description": "The bare icon glyph, no wordmark — what `Header` actually uses.\n\nColour comes from the `.ion-logo__mark` class (`icon/default`), not the SVG\nitself, so it themes the same way every other icon in the system does.",
+  "import": "import { LogoMark } from 'ionbase-ui';",
+  "stylesheet": "src/styles/logo.css",
+  "tokens": [
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-default",
+    "--spacing-4",
+    "--spacing-8",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "size": {
+      "type": "LogoSize | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "sm",
+        "lg"
+      ]
+    },
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible name for the mark used standalone. Omit when it sits beside\na visible wordmark, which already carries the name."
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 487,
+    "other": 0
+  }
+}

package/dist/meta/Menu.json

@@ -0,0 +1,50 @@
+{
+  "name": "Menu",
+  "source": "src/components/Menu.tsx",
+  "propsType": "MenuProps",
+  "description": "Menu is the list surface, not a popover.\n\nFigma models the list alone — there is no trigger, anchor or open state in\nthe design — so this renders the surface and nothing else. Positioning it\nagainst a button is the caller's job until Figma has a component that says\nhow. Building a popover here would be inventing design, and it would be the\nhard half to unpick later.\n\n`role=\"menu\"` is deliberately NOT set. A real ARIA menu owes the user\nroving-tabindex arrow navigation, typeahead and focus containment; claiming\nthe role without them is worse for a screen-reader user than an honest list,\nbecause it promises interactions that are not there. When the popover exists,\nthe role comes with it.",
+  "import": "import { Menu } from 'ionbase-ui';",
+  "stylesheet": "src/styles/menu.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-regular",
+    "--icon-default",
+    "--icon-disabled",
+    "--icon-primary",
+    "--icon-size-sm",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-sm",
+    "--radius-xl",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-40",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-hover",
+    "--surface-primary-subtle",
+    "--text-disabled",
+    "--text-primary",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 1,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/MenuItem.json

@@ -0,0 +1,75 @@
+{
+  "name": "MenuItem",
+  "source": "src/components/Menu.tsx",
+  "propsType": "MenuItemProps",
+  "import": "import { MenuItem } from 'ionbase-ui';",
+  "stylesheet": "src/styles/menu.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-regular",
+    "--icon-default",
+    "--icon-disabled",
+    "--icon-primary",
+    "--icon-size-sm",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-sm",
+    "--radius-xl",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-40",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-hover",
+    "--surface-primary-subtle",
+    "--text-disabled",
+    "--text-primary",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "isSelected": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Selected` / `Selected-hover` states. Shows the trailing check."
+    },
+    "icon": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Show Leading Icon` + `Leading Icon` swap."
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether the item is disabled."
+    },
+    "disabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "tags": {
+        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+      }
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 5,
+    "aria": 0,
+    "dom": 285,
+    "other": 0
+  }
+}