ui-lab-registry 0.3.2 → 0.3.4

package/src/patterns/layout/media-object/metadata.json

@@ -26,7 +26,7 @@
       "id": "media-object-lg",
       "name": "Large",
       "description": "Larger icon area (w-14 h-14) for feature cards and marketing contexts.",
-      "code": "function MediaObjectLg({ icon, title, description }) {\n  return (\n    <div className=\"flex items-start gap-4\">\n      <div className=\"w-14 h-14 flex items-center justify-center rounded-xl bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0 pt-1\">\n        <p className=\"text-base font-semibold text-foreground-100\">{title}</p>\n        <p className=\"text-sm text-foreground-400 mt-1\">{description}</p>\n      </div>\n    </div>\n  )\n}"
+      "code": "function MediaObjectLg({ icon, title, description }) {\n  return (\n    <div className=\"flex items-start gap-4\">\n      <div className=\"w-14 h-14 flex items-center justify-center rounded-xl bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0 pt-1\">\n        <p className=\"font-semibold text-foreground-100\">{title}</p>\n        <p className=\"text-sm text-foreground-400 mt-1\">{description}</p>\n      </div>\n    </div>\n  )\n}"
     }
   ]
 }

package/src/patterns/layout/media-object/variations/lg/index.tsx

@@ -12,7 +12,7 @@ function MediaObjectLg({ icon, title, description }: { icon: React.ReactNode; ti
     <div className="flex items-start gap-4">
       <div className="w-14 h-14 flex items-center justify-center rounded-xl bg-background-800 text-foreground-300 flex-shrink-0">{icon}</div>
       <div className="min-w-0 pt-1">
-        <p className="text-base font-semibold text-foreground-100">{title}</p>
+        <p className="font-semibold text-foreground-100">{title}</p>
         <p className="text-sm text-foreground-400 mt-1">{description}</p>
       </div>
     </div>

package/src/registry.ts

@@ -4,7 +4,7 @@ export const componentRegistry: ComponentRegistry = {
   anchor: {
     id: "anchor",
     name: "Anchor",
-    description: "Styled link with animated underline and hover popover preview.",
+    description: "Link with animated underline and popover preview.",
     category: "information",
     source: {
   "packageName": "ui-lab-components",
@@ -85,7 +85,33 @@ export const componentRegistry: ComponentRegistry = {
     relatedComponents: ["group"],
     tags: ["cta","interactive","primary-action"],
     accessibility: {"hasAriaSupport":true,"notes":["Supports keyboard navigation","Screen reader friendly"]},
-    examples: [],
+    examples: [
+    {
+        "title": "Button Variants",
+        "description": "All available button variants including primary, default, secondary, outline, and ghost styles.",
+        "code": "import React from 'react'\nimport { Button } from 'ui-lab-components'\n\nexport default function Example() {\n  return (\n    <div className=\"p-4 space-y-8\">\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Primary Variant</h3>\n        <div className=\"flex gap-2 flex-wrap\">\n          <Button variant=\"primary\">Primary Button</Button>\n          <Button variant=\"primary\" disabled>Disabled</Button>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Default Variant</h3>\n        <div className=\"flex gap-2 flex-wrap\">\n          <Button variant=\"default\">Default Button</Button>\n          <Button variant=\"default\" disabled>Disabled</Button>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Secondary Variant</h3>\n        <div className=\"flex gap-2 flex-wrap\">\n          <Button variant=\"secondary\">Secondary Button</Button>\n          <Button variant=\"secondary\" disabled>Disabled</Button>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Outline Variant</h3>\n        <div className=\"flex gap-2 flex-wrap\">\n          <Button variant=\"outline\">Outline Button</Button>\n          <Button variant=\"outline\" disabled>Disabled</Button>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Ghost Variant</h3>\n        <div className=\"flex gap-2 flex-wrap\">\n          <Button variant=\"ghost\">Ghost Button</Button>\n          <Button variant=\"ghost\" disabled>Disabled</Button>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Sizes</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Button size=\"sm\">Small</Button>\n          <Button size=\"md\">Medium</Button>\n          <Button size=\"lg\">Large</Button>\n        </div>\n      </div>\n    </div>\n  )\n}"
+    },
+    {
+        "title": "Multiple Actions",
+        "description": "A primary action button grouped with secondary actions and an options menu.",
+        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Flex } from 'ui-lab-components'\nimport { FaEllipsisVertical } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" className=\"w-110 *:not-last:flex-1\">\n      <Button size=\"sm\" variant=\"primary\" >Subscribe</Button>\n      <Button size=\"sm\" >Message</Button>\n      <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} />\n    </Flex>\n  );\n}"
+    },
+    {
+        "title": "Joined Toggle Buttons",
+        "description": "Multiple buttons grouped together for view/mode selection with active state indication.",
+        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Group, Divider, Input, Flex } from 'ui-lab-components'\nimport { FaList, FaGrip, FaTable, FaPlus } from \"react-icons/fa6\";\nimport { LuSearch } from \"react-icons/lu\";\n\nexport default function Example() {\n  const [viewMode, setViewMode] = useState(\"list\");\n  return (\n    <Flex className=\"w-110\" gap=\"xs\" align=\"center\">\n      <Input\n        placeholder=\"Search items...\"\n        icon={<LuSearch />}\n        className=\"w-full\"\n      />\n      <Group orientation=\"horizontal\" value={viewMode} onChange={setViewMode}>\n        <Group.Button size=\"icon\" value=\"list\"><FaList /></Group.Button>\n        <Divider orientation=\"vertical\" />\n        <Group.Button size=\"icon\" value=\"grid\"><FaGrip /></Group.Button>\n        <Divider orientation=\"vertical\" />\n        <Group.Button size=\"icon\" value=\"table\"><FaTable /></Group.Button>\n      </Group>\n      <Button size=\"sm\" icon={{ left: <FaPlus size={12} /> }} >New</Button>\n    </Flex>\n  );\n}"
+    },
+    {
+        "title": "Sub Stack Actions",
+        "description": "A collection of buttons and inputs arranged horizontally for grouped actions and filtering.",
+        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Group, Input, Badge, Flex } from 'ui-lab-components'\nimport { FaList, FaGrip, FaPlus } from \"react-icons/fa6\";\nimport { LuSearch } from \"react-icons/lu\";\n\nexport default function Example() {\n  const [viewMode, setViewMode] = useState(\"list\");\n  return (\n    <Flex align=\"center\" gap=\"xs\" className=\"w-110\">\n      <Group orientation=\"horizontal\" spacing=\"xs\" value={viewMode} onChange={setViewMode}>\n        <Group.Button size=\"icon\" value=\"list\"><FaList /></Group.Button>\n        <Group.Button size=\"icon\" value=\"grid\"><FaGrip /></Group.Button>\n      </Group>\n      <Input\n        placeholder=\"Search...\"\n        icon={<LuSearch />}\n        hint={<Badge size=\"sm\" variant=\"secondary\" >Ctrl+K</Badge>}\n      />\n      <Button size=\"sm\" icon={{ right: <FaPlus size={12} /> }} >Upload</Button>\n    </Flex>\n  );\n}"
+    },
+    {
+        "title": "Split Action Button",
+        "description": "A primary action button joined with a Select dropdown that changes what the button does — useful for publish workflows with multiple delivery options.",
+        "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Searchable, Flex, Menu } from 'ui-lab-components'\nimport { FaSpinner, FaCheck, FaEllipsisVertical, FaHashtag, FaLock } from \"react-icons/fa6\";\n\ntype Channel = { value: string; label: string; description: string; private?: boolean };\n\nconst channels: Channel[] = [\n  { value: \"general\", label: \"general\", description: \"General team discussion\" },\n  { value: \"announcements\", label: \"announcements\", description: \"Important team updates\", private: true },\n  { value: \"design\", label: \"design\", description: \"Design work and feedback\" },\n  { value: \"engineering\", label: \"engineering\", description: \"Engineering discussions\" },\n  { value: \"marketing\", label: \"marketing\", description: \"Marketing campaigns\" },\n  { value: \"product\", label: \"product\", description: \"Product roadmap and planning\" },\n  { value: \"random\", label: \"random\", description: \"Off-topic conversations\" },\n  { value: \"releases\", label: \"releases\", description: \"Release announcements\", private: true },\n];\n\ntype PublishAction = \"publish\" | \"draft\" | \"schedule\";\n\nconst publishActions: Record<PublishAction, { label: string; variant: \"ghost\" | \"default\" | \"outline\" }> = {\n  publish: { label: \"Publish Now\", variant: \"ghost\" },\n  draft: { label: \"Save as Draft\", variant: \"ghost\" },\n  schedule: { label: \"Schedule for Later\", variant: \"outline\" },\n};\n\nexport default function Example() {\n  const [action, setAction] = useState<PublishAction>(\"publish\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n  const [channel, setChannel] = useState<string | number | null>(\"general\");\n  const selectedChannel = channels.find((c) => c.value === channel);\n  const cfg = publishActions[action];\n\n  const handleExecute = () => {\n    setStatus(\"loading\");\n    setTimeout(() => {\n      setStatus(\"done\");\n      setTimeout(() => setStatus(\"idle\"), 2000);\n    }, 1500);\n  };\n\n  const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : undefined;\n  const label = status === \"loading\" ? \"Saving...\" : status === \"done\" ? \"Done!\" : cfg.label;\n\n  return (\n    <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n      <Select\n        selectedKey={channel}\n        valueLabel={selectedChannel ? `#${selectedChannel.label}` : undefined}\n        onSelectionChange={setChannel}\n        className=\"flex h-10\"\n        isDisabled={status !== \"idle\"}\n      >\n        <Searchable.Input className=\"w-50\" icon={<FaHashtag />} placeholder=\"Select channel...\" />\n        <Select.Content>\n          <Select.List>\n            {channels.map((c) => (\n              <Select.Item\n                key={c.value}\n                value={c.value}\n                textValue={c.label}\n                icon={c.private ? <FaLock className=\"h-3 w-3\" /> : <FaHashtag className=\"h-3 w-3\" />}\n                description={c.description}\n              >\n                {c.label}\n              </Select.Item>\n            ))}\n          </Select.List>\n        </Select.Content>\n      </Select>\n      <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as PublishAction)} isDisabled={status !== \"idle\"}>\n        <Button\n          onPress={handleExecute}\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"w-full\"\n          isDisabled={status !== \"idle\"}\n          icon={leftIcon}\n        >\n          {label}\n        </Button>\n        <Divider orientation=\"vertical\" spacing=\"none\" />\n        <Select.Trigger />\n        <Select.Content>\n          <Select.Item value=\"publish\" textValue=\"Publish Now\">Publish Now</Select.Item>\n          <Select.Item value=\"draft\" textValue=\"Save as Draft\">Save as Draft</Select.Item>\n          <Select.Item value=\"schedule\" textValue=\"Schedule for Later\">Schedule for Later</Select.Item>\n        </Select.Content>\n      </Select>\n      <Menu type=\"pop-over\">\n        <Menu.Trigger>\n          <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} />\n        </Menu.Trigger>\n        <Menu.Content offset={8} side=\"bottom\" align=\"end\">\n          <Menu.Item>Preview</Menu.Item>\n          <Menu.Item>View History</Menu.Item>\n          <Menu.Item>Discard Changes</Menu.Item>\n        </Menu.Content>\n      </Menu>\n    </Flex>\n  );\n}"
+    }
+],
   },
 
   card: {
@@ -157,7 +183,7 @@ export const componentRegistry: ComponentRegistry = {
   color: {
     id: "color",
     name: "Color",
-    description: "Custom color picker with 2D canvas, hue slider, and format selection.",
+    description: "Color picker with hue slider and format selection.",
     category: "input",
     experimental: true,
     source: {
@@ -230,7 +256,7 @@ export const componentRegistry: ComponentRegistry = {
   date: {
     id: "date",
     name: "Date",
-    description: "Calendar date picker with keyboard navigation and accessibility.",
+    description: "Date picker with calendar and keyboard navigation.",
     category: "input",
     source: {
   "packageName": "ui-lab-components",
@@ -278,7 +304,7 @@ export const componentRegistry: ComponentRegistry = {
   expand: {
     id: "expand",
     name: "Expand",
-    description: "Collapsible disclosure component for expanding and collapsing sections.",
+    description: "Collapsible component for expanding hidden sections.",
     category: "layout",
     source: {
   "packageName": "ui-lab-components",
@@ -322,7 +348,7 @@ export const componentRegistry: ComponentRegistry = {
   frame: {
     id: "frame",
     name: "Frame",
-    description: "Decorative border/frame component with advanced SVG path support.",
+    description: "Decorative border with advanced SVG path support.",
     category: "container",
     source: {
   "packageName": "ui-lab-components",
@@ -354,7 +380,7 @@ export const componentRegistry: ComponentRegistry = {
   gallery: {
     id: "gallery",
     name: "Gallery",
-    description: "Responsive grid layout for displaying images and media items.",
+    description: "Responsive grid for displaying images and media.",
     category: "layout",
     source: {
   "packageName": "ui-lab-components",
@@ -376,7 +402,7 @@ export const componentRegistry: ComponentRegistry = {
   grid: {
     id: "grid",
     name: "Grid",
-    description: "Grid layout component with container query support for responsive designs.",
+    description: "Responsive grid layout with container query support.",
     category: "layout",
     source: {
   "packageName": "ui-lab-components",
@@ -493,7 +519,7 @@ export const componentRegistry: ComponentRegistry = {
   mask: {
     id: "mask",
     name: "Mask",
-    description: "Container component that creates fading edge effects on content.",
+    description: "Container with fading edge effects on content.",
     category: "container",
     experimental: true,
     source: {
@@ -576,7 +602,7 @@ export const componentRegistry: ComponentRegistry = {
   page: {
     id: "page",
     name: "Page",
-    description: "Top-level page container with constraints and semantic structure.",
+    description: "Top-level page container with layout constraints.",
     category: "container",
     experimental: true,
     source: {
@@ -610,7 +636,7 @@ export const componentRegistry: ComponentRegistry = {
   path: {
     id: "path",
     name: "Path",
-    description: "Navigation component showing page hierarchy with links to parent pages.",
+    description: "Breadcrumb navigation showing page hierarchy.",
     category: "navigation",
     source: {
   "packageName": "ui-lab-components",
@@ -703,7 +729,7 @@ export const componentRegistry: ComponentRegistry = {
   scroll: {
     id: "scroll",
     name: "Scroll",
-    description: "Scroll area component with custom scrollbars for overflowing content.",
+    description: "Scroll area with custom scrollbars for overflow.",
     category: "container",
     source: {
   "packageName": "ui-lab-components",

package/src/sections/CTA/index.tsx

@@ -5,7 +5,7 @@ import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
   id: 'cta',
-  name: 'CTA',
+  name: 'Call to Action',
   description: 'Call-to-action sections designed to drive user engagement and conversions',
   category: 'cta' as const,
   tags: ['cta', 'conversion', 'action', 'engagement'],