@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/entries/buttons-snippets.js

@@ -0,0 +1,433 @@
+const compactButtonDefaultCode = `import * as React from 'react'
+import { Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+
+function CompactButtonExample({ appearance, size, fullRadius, initialPressed, disabled }: {
+  appearance: 'stroke' | 'ghost' | 'white' | 'modifiable'
+  size: 20 | 24
+  fullRadius: boolean
+  initialPressed: boolean
+  disabled: boolean
+}) {
+  const t = useT()
+  const [pressed, setPressed] = React.useState(initialPressed)
+  return (
+    <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled={disabled}
+      aria-label={t('design_system.gallery.examples.buttons.compactAction')}
+      aria-pressed={disabled ? undefined : pressed} onClick={() => setPressed((value) => !value)}>
+      <Plus aria-hidden="true" />
+    </CompactButton>
+  )
+}
+
+function CompactButtonMatrix({ initialPressed = false, disabled = false }: { initialPressed?: boolean; disabled?: boolean }) {
+  return (
+    <div className="grid w-full gap-4 sm:grid-cols-2">
+      {(['stroke', 'ghost', 'white', 'modifiable'] as const).map((appearance) => (
+        <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : appearance === 'white' ? 'grid gap-4 rounded-md border border-border bg-muted p-4' : 'grid gap-4 rounded-md border border-border p-4'}>
+          <code className="text-xs">{appearance}</code>
+          <div className="flex flex-wrap gap-6">
+            {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (
+              <div key={\`\${size}-\${fullRadius}\`} className="flex flex-col items-center gap-2">
+                <CompactButtonExample appearance={appearance} size={size} fullRadius={fullRadius} initialPressed={initialPressed} disabled={disabled} />
+                <code className="text-xs">{size}px \xB7 {fullRadius ? 'full' : '6px'}</code>
+              </div>
+            )))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+<CompactButtonMatrix />`;
+const compactButtonActiveCode = `import * as React from 'react'
+import { Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+
+function CompactButtonExample({ appearance, size, fullRadius, initialPressed, disabled }: {
+  appearance: 'stroke' | 'ghost' | 'white' | 'modifiable'
+  size: 20 | 24
+  fullRadius: boolean
+  initialPressed: boolean
+  disabled: boolean
+}) {
+  const t = useT()
+  const [pressed, setPressed] = React.useState(initialPressed)
+  return (
+    <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled={disabled}
+      aria-label={t('design_system.gallery.examples.buttons.compactAction')}
+      aria-pressed={disabled ? undefined : pressed} onClick={() => setPressed((value) => !value)}>
+      <Plus aria-hidden="true" />
+    </CompactButton>
+  )
+}
+
+function CompactButtonMatrix({ initialPressed = false, disabled = false }: { initialPressed?: boolean; disabled?: boolean }) {
+  return (
+    <div className="grid w-full gap-4 sm:grid-cols-2">
+      {(['stroke', 'ghost', 'white', 'modifiable'] as const).map((appearance) => (
+        <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : appearance === 'white' ? 'grid gap-4 rounded-md border border-border bg-muted p-4' : 'grid gap-4 rounded-md border border-border p-4'}>
+          <code className="text-xs">{appearance}</code>
+          <div className="flex flex-wrap gap-6">
+            {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (
+              <div key={\`\${size}-\${fullRadius}\`} className="flex flex-col items-center gap-2">
+                <CompactButtonExample appearance={appearance} size={size} fullRadius={fullRadius} initialPressed={initialPressed} disabled={disabled} />
+                <code className="text-xs">{size}px \xB7 {fullRadius ? 'full' : '6px'}</code>
+              </div>
+            )))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+<CompactButtonMatrix initialPressed />`;
+const compactButtonDisabledCode = `import { Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+
+function CompactButtonDisabledPreview() {
+  const t = useT()
+  return (
+    <div className="grid w-full gap-4">
+      <p className="max-w-prose text-sm text-muted-foreground">{t('design_system.gallery.examples.buttons.compactDisabledNote')}</p>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {(['stroke', 'modifiable'] as const).map((appearance) => (
+          <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : 'grid gap-4 rounded-md border border-border p-4'}>
+            <code className="text-xs">{appearance === 'modifiable' ? 'modifiable' : 'stroke \xB7 ghost \xB7 white'}</code>
+            <div className="flex flex-wrap gap-6">
+              {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (
+                <div key={\`\${size}-\${fullRadius}\`} className="flex flex-col items-center gap-2">
+                  <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled
+                    aria-label={t('design_system.gallery.examples.buttons.compactAction')}>
+                    <Plus aria-hidden="true" />
+                  </CompactButton>
+                  <code className="text-xs">{size}px \xB7 {fullRadius ? 'full' : '6px'}</code>
+                </div>
+              )))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+<CompactButtonDisabledPreview />`;
+const iconButtonVariantsCode = `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>`;
+const iconButtonSizesCode = `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>`;
+const iconButtonFullRadiusCode = `import { Plus } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<IconButton fullRadius aria-label="Add"><Plus /></IconButton>`;
+const iconButtonDisabledCode = `import { Pencil } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<IconButton type="button" variant="outline" disabled aria-label={t('design_system.gallery.samples.states.edit')}>
+  <Pencil aria-hidden="true" />
+</IconButton>`;
+const linkButtonVariantsCode = `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>`;
+const linkButtonUnderlineCode = `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<LinkButton underline="always">always</LinkButton>
+<LinkButton underline="hover">hover</LinkButton>
+<LinkButton underline="none">none</LinkButton>`;
+const linkButtonAsAnchorCode = `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<LinkButton asChild>
+  <a href="/backend/docs">Open link</a>
+</LinkButton>`;
+const socialButtonFilledCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+import appleFilled from '../assets/social-apple-filled.svg'
+import githubFilled from '../assets/social-github-filled.svg'
+import xFilled from '../assets/social-x-filled.svg'
+import googleFilled from '../assets/social-google-filled.svg'
+import facebookFilled from '../assets/social-facebook-filled.svg'
+import dropboxFilled from '../assets/social-dropbox-filled.svg'
+import linkedinFilled from '../assets/social-linkedin-filled.svg'
+import appleStroke from '../assets/social-apple-stroke.svg'
+import githubStroke from '../assets/social-github-stroke.svg'
+import xStroke from '../assets/social-x-stroke.svg'
+import googleStroke from '../assets/social-google-stroke.svg'
+import facebookStroke from '../assets/social-facebook-stroke.svg'
+import dropboxStroke from '../assets/social-dropbox-stroke.svg'
+import linkedinStroke from '../assets/social-linkedin-stroke.svg'
+
+const socialProviders = [
+  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },
+  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },
+  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },
+  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },
+  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },
+  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },
+  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },
+] as const
+
+function SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {
+  const t = useT()
+  return (
+    <div className="flex flex-wrap gap-3 p-1">
+      {socialProviders.map((provider) => {
+        const asset = provider[appearance]
+        const source = typeof asset === 'string' ? asset : asset.src
+        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })
+        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)
+        return (
+          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>
+            {useForeground ? (
+              <span aria-hidden="true" className="size-5 shrink-0 bg-current" style={{ maskImage: \`url("\${source}")\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />
+            ) : <img src={source} alt="" aria-hidden="true" className="size-5 shrink-0" />}
+            {!iconOnly && label}
+          </SocialButton>
+        )
+      })}
+    </div>
+  )
+}
+
+<SocialButtonsDemo appearance="filled" />`;
+const socialButtonStrokeCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+import appleFilled from '../assets/social-apple-filled.svg'
+import githubFilled from '../assets/social-github-filled.svg'
+import xFilled from '../assets/social-x-filled.svg'
+import googleFilled from '../assets/social-google-filled.svg'
+import facebookFilled from '../assets/social-facebook-filled.svg'
+import dropboxFilled from '../assets/social-dropbox-filled.svg'
+import linkedinFilled from '../assets/social-linkedin-filled.svg'
+import appleStroke from '../assets/social-apple-stroke.svg'
+import githubStroke from '../assets/social-github-stroke.svg'
+import xStroke from '../assets/social-x-stroke.svg'
+import googleStroke from '../assets/social-google-stroke.svg'
+import facebookStroke from '../assets/social-facebook-stroke.svg'
+import dropboxStroke from '../assets/social-dropbox-stroke.svg'
+import linkedinStroke from '../assets/social-linkedin-stroke.svg'
+
+const socialProviders = [
+  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },
+  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },
+  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },
+  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },
+  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },
+  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },
+  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },
+] as const
+
+function SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {
+  const t = useT()
+  return (
+    <div className="flex flex-wrap gap-3 p-1">
+      {socialProviders.map((provider) => {
+        const asset = provider[appearance]
+        const source = typeof asset === 'string' ? asset : asset.src
+        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })
+        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)
+        return (
+          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>
+            {useForeground ? (
+              <span aria-hidden="true" className="size-5 shrink-0 bg-current" style={{ maskImage: \`url("\${source}")\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />
+            ) : <img src={source} alt="" aria-hidden="true" className="size-5 shrink-0" />}
+            {!iconOnly && label}
+          </SocialButton>
+        )
+      })}
+    </div>
+  )
+}
+
+<SocialButtonsDemo appearance="stroke" />`;
+const socialButtonIconOnlyCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SocialButton } from '@open-mercato/ui/primitives/social-button'
+import appleFilled from '../assets/social-apple-filled.svg'
+import githubFilled from '../assets/social-github-filled.svg'
+import xFilled from '../assets/social-x-filled.svg'
+import googleFilled from '../assets/social-google-filled.svg'
+import facebookFilled from '../assets/social-facebook-filled.svg'
+import dropboxFilled from '../assets/social-dropbox-filled.svg'
+import linkedinFilled from '../assets/social-linkedin-filled.svg'
+import appleStroke from '../assets/social-apple-stroke.svg'
+import githubStroke from '../assets/social-github-stroke.svg'
+import xStroke from '../assets/social-x-stroke.svg'
+import googleStroke from '../assets/social-google-stroke.svg'
+import facebookStroke from '../assets/social-facebook-stroke.svg'
+import dropboxStroke from '../assets/social-dropbox-stroke.svg'
+import linkedinStroke from '../assets/social-linkedin-stroke.svg'
+
+const socialProviders = [
+  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },
+  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },
+  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },
+  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },
+  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },
+  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },
+  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },
+] as const
+
+function SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {
+  const t = useT()
+  return (
+    <div className="flex flex-wrap gap-3 p-1">
+      {socialProviders.map((provider) => {
+        const asset = provider[appearance]
+        const source = typeof asset === 'string' ? asset : asset.src
+        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })
+        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)
+        return (
+          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>
+            {useForeground ? (
+              <span aria-hidden="true" className="size-5 shrink-0 bg-current" style={{ maskImage: \`url("\${source}")\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />
+            ) : <img src={source} alt="" aria-hidden="true" className="size-5 shrink-0" />}
+            {!iconOnly && label}
+          </SocialButton>
+        )
+      })}
+    </div>
+  )
+}
+
+<SocialButtonsDemo appearance="filled" iconOnly />
+<SocialButtonsDemo appearance="stroke" iconOnly />`;
+const fancyButtonIntentsCode = `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>`;
+const fancyButtonSizesCode = `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>`;
+const buttonGroupSizeQuantityMatrixCode = `import { MoreHorizontal, Pencil, Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+
+function ButtonGroupMatrix({ content = false }: { content?: boolean }) {
+  const t = useT()
+  return (
+    <div className="grid w-full min-w-0 gap-6">
+      {([24, 32, 36] as const).flatMap((size) => (content ? [5] : [2, 3, 4, 5, 6]).map((count) => (
+        <div key={\`\${size}-\${count}\`} className="grid min-w-0 gap-2">
+          <code className="text-xs text-muted-foreground">{size}px \xB7 {count}</code>
+          <div className="max-w-full overflow-x-auto p-1">
+            <ButtonGroup size={size} aria-label={t('design_system.gallery.examples.buttons.groupActions')}>
+              {content ? (
+                <>
+                  <Button type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: 1 })}</Button>
+                  <Button type="button" variant="outline"><Pencil aria-hidden="true" />{t('design_system.gallery.examples.buttons.groupItem', { number: 2 })}</Button>
+                  <Button type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: 3 })}<Plus aria-hidden="true" /></Button>
+                  <Button type="button" variant="outline"><Pencil aria-hidden="true" />{t('design_system.gallery.examples.buttons.groupItem', { number: 4 })}<Plus aria-hidden="true" /></Button>
+                  <IconButton aria-label={t('design_system.gallery.examples.buttons.moreActions')}><MoreHorizontal aria-hidden="true" /></IconButton>
+                </>
+              ) : Array.from({ length: count }, (_, index) => (
+                <Button key={index} type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: index + 1 })}</Button>
+              ))}
+            </ButtonGroup>
+          </div>
+        </div>
+      )))}
+    </div>
+  )
+}
+
+<ButtonGroupMatrix />`;
+const buttonGroupItemContentCode = `import { MoreHorizontal, Pencil, Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+
+function ButtonGroupMatrix({ content = false }: { content?: boolean }) {
+  const t = useT()
+  return (
+    <div className="grid w-full min-w-0 gap-6">
+      {([24, 32, 36] as const).flatMap((size) => (content ? [5] : [2, 3, 4, 5, 6]).map((count) => (
+        <div key={\`\${size}-\${count}\`} className="grid min-w-0 gap-2">
+          <code className="text-xs text-muted-foreground">{size}px \xB7 {count}</code>
+          <div className="max-w-full overflow-x-auto p-1">
+            <ButtonGroup size={size} aria-label={t('design_system.gallery.examples.buttons.groupActions')}>
+              {content ? (
+                <>
+                  <Button type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: 1 })}</Button>
+                  <Button type="button" variant="outline"><Pencil aria-hidden="true" />{t('design_system.gallery.examples.buttons.groupItem', { number: 2 })}</Button>
+                  <Button type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: 3 })}<Plus aria-hidden="true" /></Button>
+                  <Button type="button" variant="outline"><Pencil aria-hidden="true" />{t('design_system.gallery.examples.buttons.groupItem', { number: 4 })}<Plus aria-hidden="true" /></Button>
+                  <IconButton aria-label={t('design_system.gallery.examples.buttons.moreActions')}><MoreHorizontal aria-hidden="true" /></IconButton>
+                </>
+              ) : Array.from({ length: count }, (_, index) => (
+                <Button key={index} type="button" variant="outline">{t('design_system.gallery.examples.buttons.groupItem', { number: index + 1 })}</Button>
+              ))}
+            </ButtonGroup>
+          </div>
+        </div>
+      )))}
+    </div>
+  )
+}
+
+<ButtonGroupMatrix content />`;
+const buttonGroupHorizontalCode = `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 size="lg" aria-label="More"><MoreHorizontal /></IconButton>
+</ButtonGroup>`;
+const buttonGroupVerticalCode = `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>`;
+export {
+  buttonGroupHorizontalCode,
+  buttonGroupItemContentCode,
+  buttonGroupSizeQuantityMatrixCode,
+  buttonGroupVerticalCode,
+  compactButtonActiveCode,
+  compactButtonDefaultCode,
+  compactButtonDisabledCode,
+  fancyButtonIntentsCode,
+  fancyButtonSizesCode,
+  iconButtonDisabledCode,
+  iconButtonFullRadiusCode,
+  iconButtonSizesCode,
+  iconButtonVariantsCode,
+  linkButtonAsAnchorCode,
+  linkButtonUnderlineCode,
+  linkButtonVariantsCode,
+  socialButtonFilledCode,
+  socialButtonIconOnlyCode,
+  socialButtonStrokeCode
+};
+//# sourceMappingURL=buttons-snippets.js.map

package/dist/modules/design_system/gallery/entries/buttons-snippets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/buttons-snippets.ts"],
+  "sourcesContent": ["// Copy-paste snippets for the Buttons family. Kept out of buttons.tsx so the entry file stays a\n// short canonical example the agent harness can read within its byte budget.\n\nexport const compactButtonDefaultCode = `import * as React from 'react'\nimport { Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\n\nfunction CompactButtonExample({ appearance, size, fullRadius, initialPressed, disabled }: {\n  appearance: 'stroke' | 'ghost' | 'white' | 'modifiable'\n  size: 20 | 24\n  fullRadius: boolean\n  initialPressed: boolean\n  disabled: boolean\n}) {\n  const t = useT()\n  const [pressed, setPressed] = React.useState(initialPressed)\n  return (\n    <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled={disabled}\n      aria-label={t('design_system.gallery.examples.buttons.compactAction')}\n      aria-pressed={disabled ? undefined : pressed} onClick={() => setPressed((value) => !value)}>\n      <Plus aria-hidden=\"true\" />\n    </CompactButton>\n  )\n}\n\nfunction CompactButtonMatrix({ initialPressed = false, disabled = false }: { initialPressed?: boolean; disabled?: boolean }) {\n  return (\n    <div className=\"grid w-full gap-4 sm:grid-cols-2\">\n      {(['stroke', 'ghost', 'white', 'modifiable'] as const).map((appearance) => (\n        <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : appearance === 'white' ? 'grid gap-4 rounded-md border border-border bg-muted p-4' : 'grid gap-4 rounded-md border border-border p-4'}>\n          <code className=\"text-xs\">{appearance}</code>\n          <div className=\"flex flex-wrap gap-6\">\n            {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (\n              <div key={\\`\\${size}-\\${fullRadius}\\`} className=\"flex flex-col items-center gap-2\">\n                <CompactButtonExample appearance={appearance} size={size} fullRadius={fullRadius} initialPressed={initialPressed} disabled={disabled} />\n                <code className=\"text-xs\">{size}px \u00B7 {fullRadius ? 'full' : '6px'}</code>\n              </div>\n            )))}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n<CompactButtonMatrix />`\n\nexport const compactButtonActiveCode = `import * as React from 'react'\nimport { Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\n\nfunction CompactButtonExample({ appearance, size, fullRadius, initialPressed, disabled }: {\n  appearance: 'stroke' | 'ghost' | 'white' | 'modifiable'\n  size: 20 | 24\n  fullRadius: boolean\n  initialPressed: boolean\n  disabled: boolean\n}) {\n  const t = useT()\n  const [pressed, setPressed] = React.useState(initialPressed)\n  return (\n    <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled={disabled}\n      aria-label={t('design_system.gallery.examples.buttons.compactAction')}\n      aria-pressed={disabled ? undefined : pressed} onClick={() => setPressed((value) => !value)}>\n      <Plus aria-hidden=\"true\" />\n    </CompactButton>\n  )\n}\n\nfunction CompactButtonMatrix({ initialPressed = false, disabled = false }: { initialPressed?: boolean; disabled?: boolean }) {\n  return (\n    <div className=\"grid w-full gap-4 sm:grid-cols-2\">\n      {(['stroke', 'ghost', 'white', 'modifiable'] as const).map((appearance) => (\n        <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : appearance === 'white' ? 'grid gap-4 rounded-md border border-border bg-muted p-4' : 'grid gap-4 rounded-md border border-border p-4'}>\n          <code className=\"text-xs\">{appearance}</code>\n          <div className=\"flex flex-wrap gap-6\">\n            {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (\n              <div key={\\`\\${size}-\\${fullRadius}\\`} className=\"flex flex-col items-center gap-2\">\n                <CompactButtonExample appearance={appearance} size={size} fullRadius={fullRadius} initialPressed={initialPressed} disabled={disabled} />\n                <code className=\"text-xs\">{size}px \u00B7 {fullRadius ? 'full' : '6px'}</code>\n              </div>\n            )))}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n<CompactButtonMatrix initialPressed />`\n\nexport const compactButtonDisabledCode = `import { Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\n\nfunction CompactButtonDisabledPreview() {\n  const t = useT()\n  return (\n    <div className=\"grid w-full gap-4\">\n      <p className=\"max-w-prose text-sm text-muted-foreground\">{t('design_system.gallery.examples.buttons.compactDisabledNote')}</p>\n      <div className=\"grid gap-4 sm:grid-cols-2\">\n        {(['stroke', 'modifiable'] as const).map((appearance) => (\n          <div key={appearance} className={appearance === 'modifiable' ? 'grid gap-4 rounded-md bg-primary p-4 text-primary-foreground' : 'grid gap-4 rounded-md border border-border p-4'}>\n            <code className=\"text-xs\">{appearance === 'modifiable' ? 'modifiable' : 'stroke \u00B7 ghost \u00B7 white'}</code>\n            <div className=\"flex flex-wrap gap-6\">\n              {([20, 24] as const).flatMap((size) => [false, true].map((fullRadius) => (\n                <div key={\\`\\${size}-\\${fullRadius}\\`} className=\"flex flex-col items-center gap-2\">\n                  <CompactButton appearance={appearance} size={size} fullRadius={fullRadius} disabled\n                    aria-label={t('design_system.gallery.examples.buttons.compactAction')}>\n                    <Plus aria-hidden=\"true\" />\n                  </CompactButton>\n                  <code className=\"text-xs\">{size}px \u00B7 {fullRadius ? 'full' : '6px'}</code>\n                </div>\n              )))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\n<CompactButtonDisabledPreview />`\n\nexport const iconButtonVariantsCode = `import { Pencil } from 'lucide-react'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\n\n<IconButton variant=\"primary\" aria-label=\"Add\"><Plus /></IconButton>\n<IconButton variant=\"outline\" aria-label=\"Edit\"><Pencil /></IconButton>\n<IconButton variant=\"ghost\" aria-label=\"More\"><MoreHorizontal /></IconButton>\n<IconButton variant=\"white\" aria-label=\"Edit\"><Pencil /></IconButton>\n<IconButton variant=\"destructive\" aria-label=\"Delete\"><Trash2 /></IconButton>`\n\nexport const iconButtonSizesCode = `import { Pencil } from 'lucide-react'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\n\n<IconButton size=\"lg\" aria-label=\"Edit\"><Pencil /></IconButton>\n<IconButton size=\"default\" aria-label=\"Edit\"><Pencil /></IconButton>\n<IconButton size=\"sm\" aria-label=\"Edit\"><Pencil /></IconButton>\n<IconButton size=\"xs\" aria-label=\"Edit\"><Pencil /></IconButton>`\n\nexport const iconButtonFullRadiusCode = `import { Plus } from 'lucide-react'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\n\n<IconButton fullRadius aria-label=\"Add\"><Plus /></IconButton>`\n\nexport const iconButtonDisabledCode = `import { Pencil } from 'lucide-react'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\n\n<IconButton type=\"button\" variant=\"outline\" disabled aria-label={t('design_system.gallery.samples.states.edit')}>\n  <Pencil aria-hidden=\"true\" />\n</IconButton>`\n\nexport const linkButtonVariantsCode = `import { LinkButton } from '@open-mercato/ui/primitives/link-button'\n\n<LinkButton>primary</LinkButton>\n<LinkButton variant=\"gray\">gray</LinkButton>\n<LinkButton variant=\"black\">black</LinkButton>\n<LinkButton variant=\"error\">error</LinkButton>`\n\nexport const linkButtonUnderlineCode = `import { LinkButton } from '@open-mercato/ui/primitives/link-button'\n\n<LinkButton underline=\"always\">always</LinkButton>\n<LinkButton underline=\"hover\">hover</LinkButton>\n<LinkButton underline=\"none\">none</LinkButton>`\n\nexport const linkButtonAsAnchorCode = `import { LinkButton } from '@open-mercato/ui/primitives/link-button'\n\n<LinkButton asChild>\n  <a href=\"/backend/docs\">Open link</a>\n</LinkButton>`\n\nexport const socialButtonFilledCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { SocialButton } from '@open-mercato/ui/primitives/social-button'\nimport appleFilled from '../assets/social-apple-filled.svg'\nimport githubFilled from '../assets/social-github-filled.svg'\nimport xFilled from '../assets/social-x-filled.svg'\nimport googleFilled from '../assets/social-google-filled.svg'\nimport facebookFilled from '../assets/social-facebook-filled.svg'\nimport dropboxFilled from '../assets/social-dropbox-filled.svg'\nimport linkedinFilled from '../assets/social-linkedin-filled.svg'\nimport appleStroke from '../assets/social-apple-stroke.svg'\nimport githubStroke from '../assets/social-github-stroke.svg'\nimport xStroke from '../assets/social-x-stroke.svg'\nimport googleStroke from '../assets/social-google-stroke.svg'\nimport facebookStroke from '../assets/social-facebook-stroke.svg'\nimport dropboxStroke from '../assets/social-dropbox-stroke.svg'\nimport linkedinStroke from '../assets/social-linkedin-stroke.svg'\n\nconst socialProviders = [\n  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },\n  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },\n  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },\n  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },\n  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },\n  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },\n  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },\n] as const\n\nfunction SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {\n  const t = useT()\n  return (\n    <div className=\"flex flex-wrap gap-3 p-1\">\n      {socialProviders.map((provider) => {\n        const asset = provider[appearance]\n        const source = typeof asset === 'string' ? asset : asset.src\n        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })\n        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)\n        return (\n          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>\n            {useForeground ? (\n              <span aria-hidden=\"true\" className=\"size-5 shrink-0 bg-current\" style={{ maskImage: \\`url(\"\\${source}\")\\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />\n            ) : <img src={source} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />}\n            {!iconOnly && label}\n          </SocialButton>\n        )\n      })}\n    </div>\n  )\n}\n\n<SocialButtonsDemo appearance=\"filled\" />`\n\nexport const socialButtonStrokeCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { SocialButton } from '@open-mercato/ui/primitives/social-button'\nimport appleFilled from '../assets/social-apple-filled.svg'\nimport githubFilled from '../assets/social-github-filled.svg'\nimport xFilled from '../assets/social-x-filled.svg'\nimport googleFilled from '../assets/social-google-filled.svg'\nimport facebookFilled from '../assets/social-facebook-filled.svg'\nimport dropboxFilled from '../assets/social-dropbox-filled.svg'\nimport linkedinFilled from '../assets/social-linkedin-filled.svg'\nimport appleStroke from '../assets/social-apple-stroke.svg'\nimport githubStroke from '../assets/social-github-stroke.svg'\nimport xStroke from '../assets/social-x-stroke.svg'\nimport googleStroke from '../assets/social-google-stroke.svg'\nimport facebookStroke from '../assets/social-facebook-stroke.svg'\nimport dropboxStroke from '../assets/social-dropbox-stroke.svg'\nimport linkedinStroke from '../assets/social-linkedin-stroke.svg'\n\nconst socialProviders = [\n  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },\n  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },\n  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },\n  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },\n  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },\n  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },\n  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },\n] as const\n\nfunction SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {\n  const t = useT()\n  return (\n    <div className=\"flex flex-wrap gap-3 p-1\">\n      {socialProviders.map((provider) => {\n        const asset = provider[appearance]\n        const source = typeof asset === 'string' ? asset : asset.src\n        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })\n        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)\n        return (\n          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>\n            {useForeground ? (\n              <span aria-hidden=\"true\" className=\"size-5 shrink-0 bg-current\" style={{ maskImage: \\`url(\"\\${source}\")\\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />\n            ) : <img src={source} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />}\n            {!iconOnly && label}\n          </SocialButton>\n        )\n      })}\n    </div>\n  )\n}\n\n<SocialButtonsDemo appearance=\"stroke\" />`\n\nexport const socialButtonIconOnlyCode = `import { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { SocialButton } from '@open-mercato/ui/primitives/social-button'\nimport appleFilled from '../assets/social-apple-filled.svg'\nimport githubFilled from '../assets/social-github-filled.svg'\nimport xFilled from '../assets/social-x-filled.svg'\nimport googleFilled from '../assets/social-google-filled.svg'\nimport facebookFilled from '../assets/social-facebook-filled.svg'\nimport dropboxFilled from '../assets/social-dropbox-filled.svg'\nimport linkedinFilled from '../assets/social-linkedin-filled.svg'\nimport appleStroke from '../assets/social-apple-stroke.svg'\nimport githubStroke from '../assets/social-github-stroke.svg'\nimport xStroke from '../assets/social-x-stroke.svg'\nimport googleStroke from '../assets/social-google-stroke.svg'\nimport facebookStroke from '../assets/social-facebook-stroke.svg'\nimport dropboxStroke from '../assets/social-dropbox-stroke.svg'\nimport linkedinStroke from '../assets/social-linkedin-stroke.svg'\n\nconst socialProviders = [\n  { brand: 'apple', name: 'Apple', filled: appleFilled, stroke: appleStroke },\n  { brand: 'github', name: 'GitHub', filled: githubFilled, stroke: githubStroke },\n  { brand: 'x', name: 'X', filled: xFilled, stroke: xStroke },\n  { brand: 'google', name: 'Google', filled: googleFilled, stroke: googleStroke },\n  { brand: 'facebook', name: 'Facebook', filled: facebookFilled, stroke: facebookStroke },\n  { brand: 'dropbox', name: 'Dropbox', filled: dropboxFilled, stroke: dropboxStroke },\n  { brand: 'linkedin', name: 'LinkedIn', filled: linkedinFilled, stroke: linkedinStroke },\n] as const\n\nfunction SocialButtonsDemo({ appearance, iconOnly = false }: { appearance: 'filled' | 'stroke'; iconOnly?: boolean }) {\n  const t = useT()\n  return (\n    <div className=\"flex flex-wrap gap-3 p-1\">\n      {socialProviders.map((provider) => {\n        const asset = provider[appearance]\n        const source = typeof asset === 'string' ? asset : asset.src\n        const label = t('design_system.gallery.examples.buttons.provider', { brand: provider.name })\n        const useForeground = appearance === 'stroke' && ['apple', 'github', 'x'].includes(provider.brand)\n        return (\n          <SocialButton key={provider.brand} brand={provider.brand} appearance={appearance} iconOnly={iconOnly} aria-label={iconOnly ? label : undefined}>\n            {useForeground ? (\n              <span aria-hidden=\"true\" className=\"size-5 shrink-0 bg-current\" style={{ maskImage: \\`url(\"\\${source}\")\\`, maskSize: 'contain', maskPosition: 'center', maskRepeat: 'no-repeat' }} />\n            ) : <img src={source} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />}\n            {!iconOnly && label}\n          </SocialButton>\n        )\n      })}\n    </div>\n  )\n}\n\n<SocialButtonsDemo appearance=\"filled\" iconOnly />\n<SocialButtonsDemo appearance=\"stroke\" iconOnly />`\n\nexport const fancyButtonIntentsCode = `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'\n\n<FancyButton intent=\"neutral\">Neutral</FancyButton>\n<FancyButton intent=\"basic\">Basic</FancyButton>\n<FancyButton intent=\"primary\">Primary</FancyButton>\n<FancyButton intent=\"destructive\">Destructive</FancyButton>`\n\nexport const fancyButtonSizesCode = `import { FancyButton } from '@open-mercato/ui/primitives/fancy-button'\n\n<FancyButton size=\"default\">Default</FancyButton>\n<FancyButton size=\"sm\">Small</FancyButton>\n<FancyButton size=\"xs\">X-Small</FancyButton>`\n\nexport const buttonGroupSizeQuantityMatrixCode = `import { MoreHorizontal, Pencil, Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\n\nfunction ButtonGroupMatrix({ content = false }: { content?: boolean }) {\n  const t = useT()\n  return (\n    <div className=\"grid w-full min-w-0 gap-6\">\n      {([24, 32, 36] as const).flatMap((size) => (content ? [5] : [2, 3, 4, 5, 6]).map((count) => (\n        <div key={\\`\\${size}-\\${count}\\`} className=\"grid min-w-0 gap-2\">\n          <code className=\"text-xs text-muted-foreground\">{size}px \u00B7 {count}</code>\n          <div className=\"max-w-full overflow-x-auto p-1\">\n            <ButtonGroup size={size} aria-label={t('design_system.gallery.examples.buttons.groupActions')}>\n              {content ? (\n                <>\n                  <Button type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: 1 })}</Button>\n                  <Button type=\"button\" variant=\"outline\"><Pencil aria-hidden=\"true\" />{t('design_system.gallery.examples.buttons.groupItem', { number: 2 })}</Button>\n                  <Button type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: 3 })}<Plus aria-hidden=\"true\" /></Button>\n                  <Button type=\"button\" variant=\"outline\"><Pencil aria-hidden=\"true\" />{t('design_system.gallery.examples.buttons.groupItem', { number: 4 })}<Plus aria-hidden=\"true\" /></Button>\n                  <IconButton aria-label={t('design_system.gallery.examples.buttons.moreActions')}><MoreHorizontal aria-hidden=\"true\" /></IconButton>\n                </>\n              ) : Array.from({ length: count }, (_, index) => (\n                <Button key={index} type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: index + 1 })}</Button>\n              ))}\n            </ButtonGroup>\n          </div>\n        </div>\n      )))}\n    </div>\n  )\n}\n\n<ButtonGroupMatrix />`\n\nexport const buttonGroupItemContentCode = `import { MoreHorizontal, Pencil, Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\n\nfunction ButtonGroupMatrix({ content = false }: { content?: boolean }) {\n  const t = useT()\n  return (\n    <div className=\"grid w-full min-w-0 gap-6\">\n      {([24, 32, 36] as const).flatMap((size) => (content ? [5] : [2, 3, 4, 5, 6]).map((count) => (\n        <div key={\\`\\${size}-\\${count}\\`} className=\"grid min-w-0 gap-2\">\n          <code className=\"text-xs text-muted-foreground\">{size}px \u00B7 {count}</code>\n          <div className=\"max-w-full overflow-x-auto p-1\">\n            <ButtonGroup size={size} aria-label={t('design_system.gallery.examples.buttons.groupActions')}>\n              {content ? (\n                <>\n                  <Button type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: 1 })}</Button>\n                  <Button type=\"button\" variant=\"outline\"><Pencil aria-hidden=\"true\" />{t('design_system.gallery.examples.buttons.groupItem', { number: 2 })}</Button>\n                  <Button type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: 3 })}<Plus aria-hidden=\"true\" /></Button>\n                  <Button type=\"button\" variant=\"outline\"><Pencil aria-hidden=\"true\" />{t('design_system.gallery.examples.buttons.groupItem', { number: 4 })}<Plus aria-hidden=\"true\" /></Button>\n                  <IconButton aria-label={t('design_system.gallery.examples.buttons.moreActions')}><MoreHorizontal aria-hidden=\"true\" /></IconButton>\n                </>\n              ) : Array.from({ length: count }, (_, index) => (\n                <Button key={index} type=\"button\" variant=\"outline\">{t('design_system.gallery.examples.buttons.groupItem', { number: index + 1 })}</Button>\n              ))}\n            </ButtonGroup>\n          </div>\n        </div>\n      )))}\n    </div>\n  )\n}\n\n<ButtonGroupMatrix content />`\n\nexport const buttonGroupHorizontalCode = `import { MoreHorizontal } from 'lucide-react'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\n\n<ButtonGroup>\n  <Button variant=\"outline\">Save</Button>\n  <Button variant=\"outline\">Save & New</Button>\n  <IconButton size=\"lg\" aria-label=\"More\"><MoreHorizontal /></IconButton>\n</ButtonGroup>`\n\nexport const buttonGroupVerticalCode = `import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<ButtonGroup orientation=\"vertical\" size=\"sm\">\n  <Button variant=\"outline\" size=\"sm\">Top</Button>\n  <Button variant=\"outline\" size=\"sm\">Middle</Button>\n  <Button variant=\"outline\" size=\"sm\">Bottom</Button>\n</ButtonGroup>`\n"],
+  "mappings": "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",
+  "names": []
+}