@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

package/src/modules/design_system/gallery/entries/buttons.tsx

@@ -1,12 +1,27 @@
-import * as React from 'react'
-import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react'
-import { Button } from '@open-mercato/ui/primitives/button'
-import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { LinkButton } from '@open-mercato/ui/primitives/link-button'
-import { SocialButton } from '@open-mercato/ui/primitives/social-button'
-import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
-import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
 import type { GalleryEntry } from '../types'
+import { SocialButtonsDemo, CompactButtonMatrix, CompactButtonDisabledPreview, ButtonGroupMatrix, ButtonStatePreview, PrimaryButtonPreview, DisabledIconButtonPreview, ButtonButtonsDefaultSample, ButtonButtonsDestructiveSample, ButtonButtonsDestructiveOutlineSample, ButtonButtonsDestructiveSoftSample, ButtonButtonsDestructiveGhostSample, ButtonButtonsOutlineSample, ButtonButtonsSecondarySample, ButtonButtonsGhostSample, ButtonButtonsMutedSample, ButtonButtonsLinkSample, ButtonButtonsSizesSample, IconButtonButtonsVariantsSample, IconButtonButtonsSizesSample, IconButtonButtonsFullRadiusSample, LinkButtonButtonsAsAnchorSample, FancyButtonButtonsIntentsSample, FancyButtonButtonsSizesSample, ButtonGroupButtonsHorizontalSample, ButtonGroupButtonsVerticalSample } from '../demos/buttons'
+import {
+  compactButtonDefaultCode,
+  compactButtonActiveCode,
+  compactButtonDisabledCode,
+  iconButtonVariantsCode,
+  iconButtonSizesCode,
+  iconButtonFullRadiusCode,
+  iconButtonDisabledCode,
+  linkButtonVariantsCode,
+  linkButtonUnderlineCode,
+  linkButtonAsAnchorCode,
+  socialButtonFilledCode,
+  socialButtonStrokeCode,
+  socialButtonIconOnlyCode,
+  fancyButtonIntentsCode,
+  fancyButtonSizesCode,
+  buttonGroupSizeQuantityMatrixCode,
+  buttonGroupItemContentCode,
+  buttonGroupHorizontalCode,
+  buttonGroupVerticalCode,
+} from './buttons-snippets'
 
 // Component titles and variant names are proper nouns from the codebase and
 // are deliberately not translated. `code` MUST contain the entry's importPath
@@ -17,11 +32,14 @@ const buttonEntry: GalleryEntry = {
   id: 'button',
   title: 'Button',
   importPath: '@open-mercato/ui/primitives/button',
+  figmaNodeId: '129:1422',
   usage: {
     do: [
       'One default (primary) Button per view; remaining actions step down to outline, ghost or muted.',
       'Destructive actions use the destructive family; -outline/-soft/-ghost lower the emphasis without losing the semantics.',
       'Default height is h-9; sm (h-8) in dense toolbars, 2xs only inside table rows.',
+      'primary-filled represents the indigo CTA retained in overlay instance 472:831, using the darker status-info-solid role for readable white text in both themes. The current main Button set lists Neutral and Error only; this instance is not a new Code Connect axis.',
+      'For a pending action, compose Spinner with disabled and aria-busy; Button has no loading prop.',
     ],
     dont: [
       'Never Button size="icon" for icon-only actions — use IconButton (correct sizing + aria-label contract).',
@@ -31,10 +49,22 @@ const buttonEntry: GalleryEntry = {
   },
   descriptionKey: 'design_system.entries.button.description',
   variants: [
+    {
+      id: 'primary-filled',
+      title: 'Primary Filled (overlay CTA)',
+      render: () => <PrimaryButtonPreview />,
+      code: `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+function PrimaryAction() {
+  const t = useT()
+  return <Button type="button" variant="primary-filled">{t('design_system.gallery.samples.primaryAction')}</Button>
+}`,
+    },
     {
       id: 'default',
       title: 'default',
-      render: () => <Button>Save changes</Button>,
+      render: () => <ButtonButtonsDefaultSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button>Save changes</Button>`,
@@ -42,7 +72,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'destructive',
       title: 'destructive',
-      render: () => <Button variant="destructive">Delete</Button>,
+      render: () => <ButtonButtonsDestructiveSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="destructive">Delete</Button>`,
@@ -50,7 +80,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'destructive-outline',
       title: 'destructive-outline',
-      render: () => <Button variant="destructive-outline">Delete</Button>,
+      render: () => <ButtonButtonsDestructiveOutlineSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="destructive-outline">Delete</Button>`,
@@ -58,7 +88,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'destructive-soft',
       title: 'destructive-soft',
-      render: () => <Button variant="destructive-soft">Delete draft</Button>,
+      render: () => <ButtonButtonsDestructiveSoftSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="destructive-soft">Delete draft</Button>`,
@@ -66,7 +96,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'destructive-ghost',
       title: 'destructive-ghost',
-      render: () => <Button variant="destructive-ghost">Remove</Button>,
+      render: () => <ButtonButtonsDestructiveGhostSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="destructive-ghost">Remove</Button>`,
@@ -74,7 +104,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'outline',
       title: 'outline',
-      render: () => <Button variant="outline">Cancel</Button>,
+      render: () => <ButtonButtonsOutlineSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="outline">Cancel</Button>`,
@@ -82,7 +112,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'secondary',
       title: 'secondary',
-      render: () => <Button variant="secondary">Duplicate</Button>,
+      render: () => <ButtonButtonsSecondarySample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="secondary">Duplicate</Button>`,
@@ -90,7 +120,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'ghost',
       title: 'ghost',
-      render: () => <Button variant="ghost">Dismiss</Button>,
+      render: () => <ButtonButtonsGhostSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="ghost">Dismiss</Button>`,
@@ -98,7 +128,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'muted',
       title: 'muted',
-      render: () => <Button variant="muted">Show more</Button>,
+      render: () => <ButtonButtonsMutedSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="muted">Show more</Button>`,
@@ -106,7 +136,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'link',
       title: 'link',
-      render: () => <Button variant="link">View details</Button>,
+      render: () => <ButtonButtonsLinkSample />,
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 
 <Button variant="link">View details</Button>`,
@@ -114,17 +144,7 @@ const buttonEntry: GalleryEntry = {
     {
       id: 'sizes',
       title: 'Sizes',
-      render: () => (
-        <>
-          <Button size="lg">Large</Button>
-          <Button size="default">Default</Button>
-          <Button size="sm">Small</Button>
-          <Button size="2xs">2X-Small</Button>
-          <Button size="icon" aria-label="Add">
-            <Plus />
-          </Button>
-        </>
-      ),
+      render: () => <ButtonButtonsSizesSample />,
       code: `import { Plus } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
 
@@ -134,6 +154,44 @@ import { Button } from '@open-mercato/ui/primitives/button'
 <Button size="2xs">2X-Small</Button>
 <Button size="icon" aria-label="Add"><Plus /></Button>`,
     },
+    {
+      id: 'disabled',
+      title: 'Disabled',
+      render: () => <ButtonStatePreview />,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button type="button" disabled>{t('design_system.gallery.samples.primaryAction')}</Button>`,
+    },
+    {
+      id: 'loading',
+      title: 'Loading (composed)',
+      render: () => <ButtonStatePreview loading />,
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+
+<Button type="button" disabled aria-busy>
+  <Spinner size="sm" className="motion-reduce:animate-none" />
+  {t('design_system.gallery.samples.states.saving')}
+</Button>`,
+    },
+  ],
+}
+
+const compactButtonEntry: GalleryEntry = {
+  id: 'compact-button',
+  title: 'CompactButton',
+  importPath: '@open-mercato/ui/primitives/compact-button',
+  figmaNodeId: '189:3646',
+  descriptionKey: 'design_system.entries.compactButton.description',
+  usage: { do: [
+    'Compact icon actions at 20 or 24 px with 18 or 20 px icons. Four appearances support 6 px and full-radius shapes.',
+    'Each matrix exposes every size, appearance, and radius combination. Hover and press enabled buttons; active examples are controlled toggles and disabled examples use native disabled.',
+    'Supply an accessible name and enough space around dense actions. Modifiable inherits foreground; its hover surface uses the existing 15% opacity scale rather than the source 16%.',
+  ] },
+  variants: [
+    { id: 'default', title: 'All sizes, appearances, and radii', render: () => <CompactButtonMatrix />, code: compactButtonDefaultCode },
+    { id: 'active', title: 'Active toggles', render: () => <CompactButtonMatrix initialPressed />, code: compactButtonActiveCode },
+    { id: 'disabled', title: 'Disabled', render: () => <CompactButtonDisabledPreview />, code: compactButtonDisabledCode },
   ],
 }
 
@@ -153,73 +211,26 @@ const iconButtonEntry: GalleryEntry = {
     {
       id: 'variants',
       title: 'Variants',
-      render: () => (
-        <>
-          <IconButton variant="primary" aria-label="Add">
-            <Plus />
-          </IconButton>
-          <IconButton variant="outline" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-          <IconButton variant="ghost" aria-label="More">
-            <MoreHorizontal />
-          </IconButton>
-          <IconButton variant="white" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-          <IconButton variant="destructive" aria-label="Delete">
-            <Trash2 />
-          </IconButton>
-        </>
-      ),
-      code: `import { Pencil } from 'lucide-react'
-import { IconButton } from '@open-mercato/ui/primitives/icon-button'
-
-<IconButton variant="primary" aria-label="Add"><Plus /></IconButton>
-<IconButton variant="outline" aria-label="Edit"><Pencil /></IconButton>
-<IconButton variant="ghost" aria-label="More"><MoreHorizontal /></IconButton>
-<IconButton variant="white" aria-label="Edit"><Pencil /></IconButton>
-<IconButton variant="destructive" aria-label="Delete"><Trash2 /></IconButton>`,
+      render: () => <IconButtonButtonsVariantsSample />,
+      code: iconButtonVariantsCode,
     },
     {
       id: 'sizes',
       title: 'Sizes',
-      render: () => (
-        <>
-          <IconButton size="lg" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-          <IconButton size="default" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-          <IconButton size="sm" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-          <IconButton size="xs" aria-label="Edit">
-            <Pencil />
-          </IconButton>
-        </>
-      ),
-      code: `import { Pencil } from 'lucide-react'
-import { IconButton } from '@open-mercato/ui/primitives/icon-button'
-
-<IconButton size="lg" aria-label="Edit"><Pencil /></IconButton>
-<IconButton size="default" aria-label="Edit"><Pencil /></IconButton>
-<IconButton size="sm" aria-label="Edit"><Pencil /></IconButton>
-<IconButton size="xs" aria-label="Edit"><Pencil /></IconButton>`,
+      render: () => <IconButtonButtonsSizesSample />,
+      code: iconButtonSizesCode,
     },
     {
       id: 'full-radius',
       title: 'fullRadius',
-      render: () => (
-        <IconButton fullRadius aria-label="Add">
-          <Plus />
-        </IconButton>
-      ),
-      code: `import { Plus } from 'lucide-react'
-import { IconButton } from '@open-mercato/ui/primitives/icon-button'
-
-<IconButton fullRadius aria-label="Add"><Plus /></IconButton>`,
+      render: () => <IconButtonButtonsFullRadiusSample />,
+      code: iconButtonFullRadiusCode,
+    },
+    {
+      id: 'disabled',
+      title: 'Disabled',
+      render: () => <DisabledIconButtonPreview />,
+      code: iconButtonDisabledCode,
     },
   ],
 }
@@ -241,12 +252,7 @@ const linkButtonEntry: GalleryEntry = {
           <LinkButton variant="error">error</LinkButton>
         </>
       ),
-      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
-
-<LinkButton>primary</LinkButton>
-<LinkButton variant="gray">gray</LinkButton>
-<LinkButton variant="black">black</LinkButton>
-<LinkButton variant="error">error</LinkButton>`,
+      code: linkButtonVariantsCode,
     },
     {
       id: 'underline',
@@ -258,25 +264,13 @@ const linkButtonEntry: GalleryEntry = {
           <LinkButton underline="none">none</LinkButton>
         </>
       ),
-      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
-
-<LinkButton underline="always">always</LinkButton>
-<LinkButton underline="hover">hover</LinkButton>
-<LinkButton underline="none">none</LinkButton>`,
+      code: linkButtonUnderlineCode,
     },
     {
       id: 'as-anchor',
       title: 'As anchor (asChild)',
-      render: () => (
-        <LinkButton asChild>
-          <a href="#gallery-entry-link-button">Open link</a>
-        </LinkButton>
-      ),
-      code: `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
-
-<LinkButton asChild>
-  <a href="/backend/docs">Open link</a>
-</LinkButton>`,
+      render: () => <LinkButtonButtonsAsAnchorSample />,
+      code: linkButtonAsAnchorCode,
     },
   ],
 }
@@ -285,36 +279,17 @@ const socialButtonEntry: GalleryEntry = {
   id: 'social-button',
   title: 'SocialButton',
   importPath: '@open-mercato/ui/primitives/social-button',
+  figmaNodeId: '180:4264',
   descriptionKey: 'design_system.entries.socialButton.description',
+  usage: { do: [
+    'All seven source providers appear in Filled and Stroke, with text or icon-only content. Buttons are 40 px high; icon-only buttons are 40 px square.',
+    'Supply the logo as content and an accessible name for icon-only buttons. These local source assets do not invoke authentication.',
+    'Stroke uses semantic foreground and border tokens; monochrome logos follow foreground in both themes. Native hover and keyboard focus expose the interaction states.',
+  ] },
   variants: [
-    {
-      id: 'filled',
-      title: 'filled',
-      render: () => (
-        <>
-          <SocialButton brand="github">Continue with GitHub</SocialButton>
-          <SocialButton brand="google">Continue with Google</SocialButton>
-        </>
-      ),
-      code: `import { SocialButton } from '@open-mercato/ui/primitives/social-button'
-
-<SocialButton brand="github">Continue with GitHub</SocialButton>
-<SocialButton brand="google">Continue with Google</SocialButton>`,
-    },
-    {
-      id: 'stroke',
-      title: 'stroke',
-      render: () => (
-        <>
-          <SocialButton brand="github" appearance="stroke">Continue with GitHub</SocialButton>
-          <SocialButton brand="linkedin" appearance="stroke">Continue with LinkedIn</SocialButton>
-        </>
-      ),
-      code: `import { SocialButton } from '@open-mercato/ui/primitives/social-button'
-
-<SocialButton brand="github" appearance="stroke">Continue with GitHub</SocialButton>
-<SocialButton brand="linkedin" appearance="stroke">Continue with LinkedIn</SocialButton>`,
-    },
+    { id: 'filled', title: 'Filled — all seven providers', render: () => <SocialButtonsDemo appearance="filled" />, code: socialButtonFilledCode },
+    { id: 'stroke', title: 'Stroke — all seven providers', render: () => <SocialButtonsDemo appearance="stroke" />, code: socialButtonStrokeCode },
+    { id: 'icon-only', title: 'Icon-only — both appearances', render: () => <div className="grid gap-4"><SocialButtonsDemo appearance="filled" iconOnly /><SocialButtonsDemo appearance="stroke" iconOnly /></div>, code: socialButtonIconOnlyCode },
   ],
 }
 
@@ -327,36 +302,14 @@ const fancyButtonEntry: GalleryEntry = {
     {
       id: 'intents',
       title: 'Intents',
-      render: () => (
-        <>
-          <FancyButton intent="neutral">Neutral</FancyButton>
-          <FancyButton intent="basic">Basic</FancyButton>
-          <FancyButton intent="primary">Primary</FancyButton>
-          <FancyButton intent="destructive">Destructive</FancyButton>
-        </>
-      ),
-      code: `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
-
-<FancyButton intent="neutral">Neutral</FancyButton>
-<FancyButton intent="basic">Basic</FancyButton>
-<FancyButton intent="primary">Primary</FancyButton>
-<FancyButton intent="destructive">Destructive</FancyButton>`,
+      render: () => <FancyButtonButtonsIntentsSample />,
+      code: fancyButtonIntentsCode,
     },
     {
       id: 'sizes',
       title: 'Sizes',
-      render: () => (
-        <>
-          <FancyButton size="default">Default</FancyButton>
-          <FancyButton size="sm">Small</FancyButton>
-          <FancyButton size="xs">X-Small</FancyButton>
-        </>
-      ),
-      code: `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'
-
-<FancyButton size="default">Default</FancyButton>
-<FancyButton size="sm">Small</FancyButton>
-<FancyButton size="xs">X-Small</FancyButton>`,
+      render: () => <FancyButtonButtonsSizesSample />,
+      code: fancyButtonSizesCode,
     },
   ],
 }
@@ -366,57 +319,33 @@ const buttonGroupEntry: GalleryEntry = {
   title: 'ButtonGroup',
   importPath: '@open-mercato/ui/primitives/button-group',
   descriptionKey: 'design_system.entries.buttonGroup.description',
+  figmaNodeId: '493:8644',
+  usage: { do: ['Numeric sizes coordinate child dimensions at 24, 32, or 36 px. Legacy size names keep their behavior.', 'The 15 source groups cover quantities two through six at all three sizes. Item examples include text, leading, trailing, both, and icon-only content.'] },
   variants: [
+    { id: 'size-quantity-matrix', title: 'All 15 size and quantity combinations', render: () => <ButtonGroupMatrix />, code: buttonGroupSizeQuantityMatrixCode },
+    { id: 'item-content', title: 'Text and icon item arrangements', render: () => <ButtonGroupMatrix content />, code: buttonGroupItemContentCode },
     {
       id: 'horizontal',
       title: 'Horizontal',
-      render: () => (
-        <ButtonGroup>
-          <Button variant="outline">Save</Button>
-          <Button variant="outline">Save &amp; New</Button>
-          <IconButton aria-label="More">
-            <MoreHorizontal />
-          </IconButton>
-        </ButtonGroup>
-      ),
-      code: `import { MoreHorizontal } from 'lucide-react'
-import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
-import { Button } from '@open-mercato/ui/primitives/button'
-import { IconButton } from '@open-mercato/ui/primitives/icon-button'
-
-<ButtonGroup>
-  <Button variant="outline">Save</Button>
-  <Button variant="outline">Save & New</Button>
-  <IconButton aria-label="More"><MoreHorizontal /></IconButton>
-</ButtonGroup>`,
+      render: () => <ButtonGroupButtonsHorizontalSample />,
+      code: buttonGroupHorizontalCode,
     },
     {
       id: 'vertical',
       title: 'Vertical',
-      render: () => (
-        <ButtonGroup orientation="vertical" size="sm">
-          <Button variant="outline" size="sm">Top</Button>
-          <Button variant="outline" size="sm">Middle</Button>
-          <Button variant="outline" size="sm">Bottom</Button>
-        </ButtonGroup>
-      ),
-      code: `import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
-import { Button } from '@open-mercato/ui/primitives/button'
-
-<ButtonGroup orientation="vertical" size="sm">
-  <Button variant="outline" size="sm">Top</Button>
-  <Button variant="outline" size="sm">Middle</Button>
-  <Button variant="outline" size="sm">Bottom</Button>
-</ButtonGroup>`,
+      render: () => <ButtonGroupButtonsVerticalSample />,
+      code: buttonGroupVerticalCode,
     },
   ],
 }
 
 export const entries: GalleryEntry[] = [
   buttonEntry,
+  compactButtonEntry,
   iconButtonEntry,
   linkButtonEntry,
   socialButtonEntry,
   fancyButtonEntry,
   buttonGroupEntry,
 ]
+