@godxjp/ui-mcp 0.10.0 → 0.11.0

package/dist/index.js

@@ -1281,7 +1281,11 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         type: "React.ComponentType<{ className?: string }> | null",
         description: "Leading icon override. Pass null to suppress the auto status icon."
       },
-      { name: "children", type: "ReactNode", description: "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status." }
+      {
+        name: "children",
+        type: "ReactNode",
+        description: "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status."
+      }
     ],
     usage: [
       "DO pick the correct variant semantically: `success` (approved/paid), `warning` (pending/overdue), `destructive` (rejected/error), `secondary` (neutral category), `outline` (subtle label), `default` (primary accent). Never force a colour just for aesthetics \u2014 agents and screen readers read the variant as intent.",
@@ -6518,7 +6522,11 @@ export function InvoiceListHeader() {
     group: "data-display",
     tagline: "Radix Avatar wrapper with image and fallback slots for users, teams, and entities.",
     props: [
-      { name: "children", type: "ReactNode", description: "Compose AvatarImage and AvatarFallback." },
+      {
+        name: "children",
+        type: "ReactNode",
+        description: "Compose AvatarImage and AvatarFallback."
+      },
       { name: "className", type: "string", description: "Extra classes on the avatar root." }
     ],
     usage: [
@@ -6541,11 +6549,28 @@ export function InvoiceListHeader() {
     group: "layout",
     tagline: "Radix Separator wrapper for tokenized horizontal or vertical dividers.",
     props: [
-      { name: "orientation", type: '"horizontal" | "vertical"', defaultValue: '"horizontal"', description: "Divider direction." },
-      { name: "decorative", type: "boolean", defaultValue: "true", description: "Whether the separator is decorative for assistive tech." }
+      {
+        name: "orientation",
+        type: '"horizontal" | "vertical"',
+        defaultValue: '"horizontal"',
+        description: "Divider direction."
+      },
+      {
+        name: "decorative",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Whether the separator is decorative for assistive tech."
+      }
+    ],
+    usage: [
+      "DO use Separator for section dividers instead of raw border divs.",
+      "DO set orientation='vertical' only when the parent gives it a stable height."
+    ],
+    useCases: [
+      "Separating toolbar groups",
+      "Dividing stacked page sections",
+      "Vertical split between metadata groups"
     ],
-    usage: ["DO use Separator for section dividers instead of raw border divs.", "DO set orientation='vertical' only when the parent gives it a stable height."],
-    useCases: ["Separating toolbar groups", "Dividing stacked page sections", "Vertical split between metadata groups"],
     related: ["Stack \u2014 use for vertical spacing without a visible rule."],
     example: `import { Separator } from "@godxjp/ui/layout";
 
@@ -6560,8 +6585,15 @@ export function InvoiceListHeader() {
     props: [
       { name: "className", type: "string", description: "Size and layout classes for the block." }
     ],
-    usage: ["DO use Skeleton for a custom block when SkeletonRows/Table/Card do not match the final layout.", "DON'T use a spinner overlay for skeletonable page content."],
-    useCases: ["Single loading line", "Custom card media placeholder", "Inline metadata placeholder"],
+    usage: [
+      "DO use Skeleton for a custom block when SkeletonRows/Table/Card do not match the final layout.",
+      "DON'T use a spinner overlay for skeletonable page content."
+    ],
+    useCases: [
+      "Single loading line",
+      "Custom card media placeholder",
+      "Inline metadata placeholder"
+    ],
     related: ["SkeletonRows", "SkeletonTable", "SkeletonCard"],
     example: `import { Skeleton } from "@godxjp/ui/feedback";
 
@@ -6575,11 +6607,28 @@ export function InvoiceListHeader() {
     tagline: "Radix Toggle wrapper with default/outline variants and tokenized sizes.",
     props: [
       { name: "pressed", type: "boolean", description: "Controlled pressed state." },
-      { name: "onPressedChange", type: "(pressed: boolean) => void", description: "Pressed-state callback." },
-      { name: "variant", type: '"default" | "outline"', defaultValue: '"default"', description: "Visual style." },
-      { name: "size", type: '"sm" | "default" | "lg"', defaultValue: '"default"', description: "Control size." }
+      {
+        name: "onPressedChange",
+        type: "(pressed: boolean) => void",
+        description: "Pressed-state callback."
+      },
+      {
+        name: "variant",
+        type: '"default" | "outline"',
+        defaultValue: '"default"',
+        description: "Visual style."
+      },
+      {
+        name: "size",
+        type: '"sm" | "default" | "lg"',
+        defaultValue: '"default"',
+        description: "Control size."
+      }
+    ],
+    usage: [
+      "DO provide an accessible label when the toggle only contains an icon.",
+      "DON'T use Toggle for multi-option selection; use ToggleGroup."
     ],
-    usage: ["DO provide an accessible label when the toggle only contains an icon.", "DON'T use Toggle for multi-option selection; use ToggleGroup."],
     useCases: ["Bold/italic toolbar buttons", "Pinned filter toggles", "Compact view mode buttons"],
     related: ["ToggleGroup", "Button"],
     example: `import { Toggle } from "@godxjp/ui/data-entry";
@@ -6593,11 +6642,23 @@ export function InvoiceListHeader() {
     group: "data-entry",
     tagline: "Radix ToggleGroup wrapper for single or multiple toggle selection.",
     props: [
-      { name: "type", type: '"single" | "multiple"', required: true, description: "Selection mode." },
+      {
+        name: "type",
+        type: '"single" | "multiple"',
+        required: true,
+        description: "Selection mode."
+      },
       { name: "value", type: "string | string[]", description: "Controlled selected value(s)." },
-      { name: "onValueChange", type: "(value: string | string[]) => void", description: "Selection callback." }
+      {
+        name: "onValueChange",
+        type: "(value: string | string[]) => void",
+        description: "Selection callback."
+      }
+    ],
+    usage: [
+      "DO choose type='single' for mutually exclusive toolbar modes.",
+      "DO choose type='multiple' for independent formatting toggles."
     ],
-    usage: ["DO choose type='single' for mutually exclusive toolbar modes.", "DO choose type='multiple' for independent formatting toggles."],
     useCases: ["Text alignment selector", "Formatting toolbar", "View density switcher"],
     related: ["Toggle", "RadioGroup"],
     example: `import { ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
@@ -6613,10 +6674,18 @@ export function InvoiceListHeader() {
     group: "layout",
     tagline: "Radix AspectRatio wrapper for stable media and preview frames.",
     props: [
-      { name: "ratio", type: "number", defaultValue: "16 / 9", description: "Width divided by height." },
+      {
+        name: "ratio",
+        type: "number",
+        defaultValue: "16 / 9",
+        description: "Width divided by height."
+      },
       { name: "children", type: "ReactNode", description: "Content constrained to the ratio." }
     ],
-    usage: ["DO use AspectRatio for media, maps, charts, or previews that must not jump during load.", "DON'T use it for unconstrained text content."],
+    usage: [
+      "DO use AspectRatio for media, maps, charts, or previews that must not jump during load.",
+      "DON'T use it for unconstrained text content."
+    ],
     useCases: ["Video embed frame", "Image preview slot", "Dashboard chart placeholder"],
     related: ["CardCover", "Skeleton"],
     example: `import { AspectRatio } from "@godxjp/ui/layout";
@@ -6624,6 +6693,229 @@ export function InvoiceListHeader() {
 <AspectRatio ratio={16 / 9}>...</AspectRatio>`,
     storyPath: "layout/AspectRatio.stories.tsx",
     rules: [2, 3]
+  },
+  {
+    name: "Accordion",
+    group: "data-display",
+    tagline: "Radix accordion \u2014 vertically stacked, collapsible sections. Compose Accordion > AccordionItem > AccordionTrigger + AccordionContent.",
+    props: [
+      {
+        name: "type",
+        type: '"single" | "multiple"',
+        required: true,
+        description: "single = one open at a time; multiple = independent."
+      },
+      {
+        name: "collapsible",
+        type: "boolean",
+        description: "When type=single, allow closing the open item."
+      },
+      { name: "value", type: "string | string[]", description: "Controlled open item(s)." },
+      {
+        name: "defaultValue",
+        type: "string | string[]",
+        description: "Uncontrolled initial open item(s)."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: string | string[]) => void",
+        description: "Open-state callback."
+      }
+    ],
+    usage: [
+      'DO compose the full set: <Accordion type="single" collapsible><AccordionItem value="a"><AccordionTrigger/><AccordionContent/></AccordionItem></Accordion>.',
+      "DO give each AccordionItem a unique `value`.",
+      "DON'T use it for primary navigation \u2014 that's Sidebar/Tabs. Accordion is for collapsible content/FAQ."
+    ],
+    useCases: [
+      "FAQ lists",
+      "Grouped settings sections",
+      "Collapsible detail panels on a record page",
+      "Filter facet groups in a sidebar"
+    ],
+    related: [
+      "Collapsible (single open/close region, no item set)",
+      "Tabs (mutually-exclusive views, always one visible)"
+    ],
+    example: `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@godxjp/ui/data-display";
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="ship">
+    <AccordionTrigger>\u914D\u9001\u306B\u3064\u3044\u3066</AccordionTrigger>
+    <AccordionContent>3\u301C5\u55B6\u696D\u65E5\u3067\u304A\u5C4A\u3051\u3057\u307E\u3059\u3002</AccordionContent>
+  </AccordionItem>
+</Accordion>`,
+    storyPath: "data-display/Accordion.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "HoverCard",
+    group: "data-display",
+    tagline: "Radix hover card \u2014 a rich popover shown on hover/focus of a trigger (for sighted-pointer affordances; not a replacement for Tooltip's short text).",
+    props: [
+      {
+        name: "openDelay",
+        type: "number",
+        defaultValue: "700",
+        description: "ms before opening on hover."
+      },
+      {
+        name: "closeDelay",
+        type: "number",
+        defaultValue: "300",
+        description: "ms before closing."
+      },
+      { name: "open", type: "boolean", description: "Controlled open state." },
+      {
+        name: "onOpenChange",
+        type: "(open: boolean) => void",
+        description: "Open-state callback."
+      }
+    ],
+    usage: [
+      "DO compose HoverCard > HoverCardTrigger > HoverCardContent.",
+      "DO use for RICH preview content (a card, avatar + bio); for short plain-text hints use Tooltip.",
+      "DON'T rely on it for essential info \u2014 hover isn't available on touch; provide the same content on click/tap elsewhere."
+    ],
+    useCases: [
+      "User/profile preview on @mention hover",
+      "Entity preview (customer/account) on a table cell",
+      "Glossary term definitions",
+      "Commit/PR preview links"
+    ],
+    related: [
+      "Tooltip (short text label, not rich content)",
+      "Popover (click-triggered, interactive content)"
+    ],
+    example: `import { HoverCard, HoverCardTrigger, HoverCardContent } from "@godxjp/ui/data-display";
+
+<HoverCard>
+  <HoverCardTrigger>@yamada</HoverCardTrigger>
+  <HoverCardContent>\u5C71\u7530\u592A\u90CE \u2014 \u7D4C\u7406\u90E8</HoverCardContent>
+</HoverCard>`,
+    storyPath: "data-display/HoverCard.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "PasswordInput",
+    group: "data-entry",
+    tagline: "Input for passwords with a built-in show/hide eye toggle. Accepts all Input props except `type`.",
+    props: [
+      {
+        name: "value",
+        type: "string",
+        description: "Controlled value (or use defaultValue/uncontrolled)."
+      },
+      { name: "name", type: "string", description: "Form field name for native submission." },
+      { name: "placeholder", type: "string", description: "Placeholder text." },
+      { name: "disabled", type: "boolean", description: "Disables the field + toggle." }
+    ],
+    usage: [
+      'DO use for any password / secret field instead of `<Input type="password">` so users get the show/hide affordance.',
+      'DO pass `name` + `autoComplete="current-password"|"new-password"` for correct form/password-manager behavior.',
+      "DON'T add your own eye button \u2014 it's built in (and excluded from the tab order)."
+    ],
+    useCases: [
+      "Login password field",
+      "Sign-up / change-password forms (new-password)",
+      "API key / secret entry in settings"
+    ],
+    related: [
+      "Input (the base text field this wraps)",
+      "FormField (label + error wrapper around it)"
+    ],
+    example: `import { PasswordInput } from "@godxjp/ui/data-entry";
+
+<PasswordInput name="password" autoComplete="current-password" placeholder="\u30D1\u30B9\u30EF\u30FC\u30C9" />`,
+    storyPath: "data-entry/PasswordInput.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "Drawer",
+    group: "feedback",
+    tagline: "Bottom-sheet (vaul) \u2014 a draggable sheet that slides up from the screen edge. DISTINCT from Sheet (the side panel); use Drawer for mobile/touch bottom sheets.",
+    props: [
+      { name: "open", type: "boolean", description: "Controlled open state." },
+      {
+        name: "onOpenChange",
+        type: "(open: boolean) => void",
+        description: "Open-state callback."
+      },
+      {
+        name: "shouldScaleBackground",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Scale the page behind the sheet (iOS-style)."
+      }
+    ],
+    usage: [
+      "DO compose Drawer > DrawerTrigger > DrawerContent (> DrawerHeader/DrawerTitle + body + DrawerFooter).",
+      "DO use Drawer for mobile/touch bottom sheets; use Sheet for a desktop side panel and Dialog for a centered modal.",
+      "DON'T confuse with Sheet \u2014 Sheet slides from a side edge, Drawer is the draggable bottom sheet."
+    ],
+    useCases: [
+      "Mobile action sheet / menu",
+      "Filter panel on small screens",
+      "Quick-create form on touch",
+      "Detail peek that drags up"
+    ],
+    related: [
+      "Sheet (side panel, same Radix Dialog base, different placement)",
+      "Dialog (centered modal)"
+    ],
+    example: `import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@godxjp/ui/feedback";
+
+<Drawer>
+  <DrawerTrigger>\u7D5E\u308A\u8FBC\u307F</DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader><DrawerTitle>\u7D5E\u308A\u8FBC\u307F</DrawerTitle></DrawerHeader>
+    {/* filters */}
+  </DrawerContent>
+</Drawer>`,
+    storyPath: "feedback/Drawer.stories.tsx",
+    rules: [3, 6, 24]
+  },
+  {
+    name: "InputOTP",
+    group: "data-entry",
+    tagline: "One-time-code / 2FA input (input-otp) \u2014 N single-character slots that behave as one field. Compose InputOTP > InputOTPGroup > InputOTPSlot.",
+    props: [
+      {
+        name: "maxLength",
+        type: "number",
+        required: true,
+        description: "Number of slots (e.g. 6)."
+      },
+      { name: "value", type: "string", description: "Controlled value." },
+      {
+        name: "onChange",
+        type: "(value: string) => void",
+        description: "Value callback (this is a true text input \u2014 onChange is the DOM-style value handler here)."
+      },
+      { name: "pattern", type: "string", description: "Allowed-char regex (e.g. digits only)." }
+    ],
+    usage: [
+      "DO set `maxLength` to the code length and render that many InputOTPSlot with sequential `index`.",
+      "DO wrap slots in InputOTPGroup; use InputOTPSeparator between groups (e.g. 3 + 3).",
+      "DON'T build N separate Inputs \u2014 this is ONE field with paste, arrow-key, and caret handling built in."
+    ],
+    useCases: [
+      "2FA / OTP verification code",
+      "Email / SMS confirmation code",
+      "PIN entry",
+      "Invite / redemption code"
+    ],
+    related: ["Input (a normal single text field)", "PasswordInput (masked secret field)"],
+    example: `import { InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
+
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} /><InputOTPSlot index={1} /><InputOTPSlot index={2} />
+    <InputOTPSlot index={3} /><InputOTPSlot index={4} /><InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`,
+    storyPath: "data-entry/InputOTP.stories.tsx",
+    rules: [3, 6]
   }
 ];
 function findComponent(name) {
@@ -9035,11 +9327,10 @@ function getTokens(cat) {
   for (const [c, items] of Object.entries(grouped)) {
     out += `## ${c}
 
-| Name | Role | Value | Axis |
-|---|---|---|---|
+| Name | Role | Tier |
+|---|---|---|
 `;
-    for (const t of items)
-      out += `| \`${t.name}\` | ${t.role} | ${t.value ?? "\u2014"} | ${t.axis ?? "\u2014"} |
+    for (const t of items) out += `| \`${t.name}\` | ${t.role} | ${t.tier} |
 `;
     out += "\n";
   }