lupine.components 1.1.55 → 1.1.56

package/src/component-pool/badge/badge-demo.tsx

@@ -1,152 +1,152 @@
-import { DemoStory } from '../../demo/demo-types';
-import { Badge, BadgeProps } from './badge';
-import { SvgSvg, SvgPath } from '../svg-props';
-
-const BellIcon = () => (
-  <SvgSvg
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    stroke-width='2'
-    stroke-linecap='round'
-    stroke-linejoin='round'
-  >
-    <SvgPath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9' />
-    <SvgPath d='M13.73 21a2 2 0 0 1-3.46 0' />
-  </SvgSvg>
-);
-
-const CheckIcon = () => (
-  <SvgSvg
-    width='12'
-    height='12'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    stroke-width='3'
-    stroke-linecap='round'
-    stroke-linejoin='round'
-  >
-    <SvgPath d='M20 6L9 17l-5-5' />
-  </SvgSvg>
-);
-
-export const badgeDemo: DemoStory<BadgeProps> = {
-  id: 'badge',
-  text: 'Badge',
-  args: {
-    content: 5,
-    max: 99,
-    dot: false,
-    color: 'var(--primary-bg-color, #ffffff)',
-    bgColor: 'var(--danger-bg-color, var(--primary-accent-color, #e74c3c))',
-  },
-  argTypes: {
-    content: { control: 'number', description: 'Number or text to display' },
-    max: { control: 'number', description: 'Max number before showing +' },
-    dot: { control: 'boolean', description: 'Show as dot instead of value' },
-    color: { control: 'color', description: 'Text color' },
-    bgColor: { control: 'color', description: 'Background color' },
-  },
-  render: (args) => {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '30px', padding: '20px' }}>
-        <div style={{ display: 'flex', gap: '40px', alignItems: 'center', flexWrap: 'wrap' }}>
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Interactive Config</div>
-            <Badge
-              content={args.content}
-              max={args.max}
-              dot={args.dot}
-              color={args.color}
-              bgColor={args.bgColor}
-              onClick={() => alert(`Badge clicked: ${args.content}`)}
-            >
-              <div
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
-                  borderRadius: '4px',
-                }}
-              >
-                Messages
-              </div>
-            </Badge>
-          </div>
-
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Max Value (99+)</div>
-            <Badge content={150} max={99}>
-              <div
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
-                  borderRadius: '4px',
-                }}
-              >
-                Notifications
-              </div>
-            </Badge>
-          </div>
-
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Dot Mode</div>
-            <Badge dot={true}>
-              <BellIcon />
-            </Badge>
-          </div>
-
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Custom Node Content</div>
-            <Badge content={<CheckIcon />} bgColor='var(--success-color, #2ecc71)'>
-              <div
-                style={{
-                  width: '40px',
-                  height: '40px',
-                  backgroundColor: 'var(--secondary-bg-color, #eee)',
-                  borderRadius: '4px',
-                }}
-              />
-            </Badge>
-          </div>
-
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Text Content</div>
-            <Badge content='NEW' bgColor='var(--primary-accent-color, #0a74c9)'>
-              <div
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
-                  borderRadius: '4px',
-                }}
-              >
-                Features
-              </div>
-            </Badge>
-          </div>
-
-          <div style={{ textAlign: 'center' }}>
-            <div style={{ marginBottom: '16px' }}>Standalone Badge</div>
-            <Badge content='Status: Online' bgColor='var(--success-color, #2ecc71)' />
-          </div>
-        </div>
-      </div>
-    );
-  },
-  code: `import { Badge } from 'lupine.components/component-pool';
-
-<Badge content={5} max={99} bgColor="red" color="white" onClick={...}>
-  <div>Anchor Element</div>
-</Badge>
-
-<Badge dot={true}>
-  <Icon />
-</Badge>
-
-<Badge content={<CheckIcon />} bgColor="green">
-  <div>Task</div>
-</Badge>
-`,
-};
+import { DemoStory } from '../../demo/demo-types';
+import { Badge, BadgeProps } from './badge';
+import { SvgSvg, SvgPath } from '../svg-props';
+
+const BellIcon = () => (
+  <SvgSvg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  >
+    <SvgPath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9' />
+    <SvgPath d='M13.73 21a2 2 0 0 1-3.46 0' />
+  </SvgSvg>
+);
+
+const CheckIcon = () => (
+  <SvgSvg
+    width='12'
+    height='12'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='3'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  >
+    <SvgPath d='M20 6L9 17l-5-5' />
+  </SvgSvg>
+);
+
+export const badgeDemo: DemoStory<BadgeProps> = {
+  id: 'badge',
+  text: 'Badge',
+  args: {
+    content: 5,
+    max: 99,
+    dot: false,
+    color: 'var(--primary-bg-color, #ffffff)',
+    bgColor: 'var(--danger-bg-color, var(--primary-accent-color, #e74c3c))',
+  },
+  argTypes: {
+    content: { control: 'number', description: 'Number or text to display' },
+    max: { control: 'number', description: 'Max number before showing +' },
+    dot: { control: 'boolean', description: 'Show as dot instead of value' },
+    color: { control: 'color', description: 'Text color' },
+    bgColor: { control: 'color', description: 'Background color' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '30px', padding: '20px' }}>
+        <div style={{ display: 'flex', gap: '40px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Interactive Config</div>
+            <Badge
+              content={args.content}
+              max={args.max}
+              dot={args.dot}
+              color={args.color}
+              bgColor={args.bgColor}
+              onClick={() => alert(`Badge clicked: ${args.content}`)}
+            >
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Messages
+              </div>
+            </Badge>
+          </div>
+
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Max Value (99+)</div>
+            <Badge content={150} max={99}>
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Notifications
+              </div>
+            </Badge>
+          </div>
+
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Dot Mode</div>
+            <Badge dot={true}>
+              <BellIcon />
+            </Badge>
+          </div>
+
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Custom Node Content</div>
+            <Badge content={<CheckIcon />} bgColor='var(--success-color, #2ecc71)'>
+              <div
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  backgroundColor: 'var(--secondary-bg-color, #eee)',
+                  borderRadius: '4px',
+                }}
+              />
+            </Badge>
+          </div>
+
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Text Content</div>
+            <Badge content='NEW' bgColor='var(--primary-accent-color, #0a74c9)'>
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Features
+              </div>
+            </Badge>
+          </div>
+
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ marginBottom: '16px' }}>Standalone Badge</div>
+            <Badge content='Status: Online' bgColor='var(--success-color, #2ecc71)' />
+          </div>
+        </div>
+      </div>
+    );
+  },
+  code: `import { Badge } from 'lupine.components/component-pool';
+
+<Badge content={5} max={99} bgColor="red" color="white" onClick={...}>
+  <div>Anchor Element</div>
+</Badge>
+
+<Badge dot={true}>
+  <Icon />
+</Badge>
+
+<Badge content={<CheckIcon />} bgColor="green">
+  <div>Task</div>
+</Badge>
+`,
+};

package/src/component-pool/breadcrumbs/breadcrumbs-demo.tsx

@@ -1,105 +1,105 @@
-import { DemoStory } from '../../demo/demo-types';
-import { Breadcrumbs, BreadcrumbsProps } from './breadcrumbs';
-import { SvgSvg, SvgPath } from '../svg-props';
-
-const HomeIcon = () => (
-  <SvgSvg
-    width='14'
-    height='14'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    stroke-width='2'
-    stroke-linecap='round'
-    stroke-linejoin='round'
-  >
-    <SvgPath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' />
-    <SvgPath d='M9 22V12h6v10' />
-  </SvgSvg>
-);
-
-const FolderIcon = () => (
-  <SvgSvg
-    width='14'
-    height='14'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    stroke-width='2'
-    stroke-linecap='round'
-    stroke-linejoin='round'
-  >
-    <SvgPath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z' />
-  </SvgSvg>
-);
-
-export const breadcrumbsDemo: DemoStory<BreadcrumbsProps> = {
-  id: 'breadcrumbs',
-  text: 'Breadcrumbs',
-  args: {
-    autoCollapse: true,
-    items: [],
-  },
-  argTypes: {
-    autoCollapse: { control: 'boolean', description: 'Automatically collapse middle items on overflow' },
-  },
-  render: (args) => {
-    const longItems = [
-      { text: 'Home', url: '/', icon: <HomeIcon /> },
-      { text: 'Settings', url: '/settings', icon: <FolderIcon /> },
-      { text: 'Account Profile', url: '/account' },
-      { text: 'Security Preferences', url: '/security' },
-      { text: 'Two-Factor Auth', url: '/2fa' },
-      { text: 'Active Sessions' },
-    ];
-
-    const shortItems = [{ text: 'Dashboard', url: '/dashboard' }, { text: 'Overview' }];
-
-    return (
-      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
-        <div>
-          <h3 style={{ marginBottom: '20px' }}>Auto-Collapsing Long Breadcrumbs</h3>
-          <p style={{ color: 'var(--secondary-color, #666)', fontSize: '13px', marginBottom: '10px' }}>
-            Scale the window (or iframe) down to see the middle sections collapse into an ellipsis `...`
-          </p>
-          <div
-            style={{
-              padding: '16px',
-              border: '1px solid var(--primary-border, #eee)',
-              borderRadius: '8px',
-              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
-            }}
-          >
-            <Breadcrumbs items={longItems} autoCollapse={args.autoCollapse} />
-          </div>
-        </div>
-
-        <div>
-          <h3 style={{ marginBottom: '20px' }}>Short Breadcrumbs</h3>
-          <div
-            style={{
-              padding: '16px',
-              border: '1px solid var(--primary-border, #eee)',
-              borderRadius: '8px',
-              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
-            }}
-          >
-            <Breadcrumbs items={shortItems} autoCollapse={args.autoCollapse} />
-          </div>
-        </div>
-      </div>
-    );
-  },
-  code: `import { Breadcrumbs } from 'lupine.components/component-pool';
-
-const items = [
-  { text: 'Home', url: '/' },
-  { text: 'Settings', url: '/settings' },
-  { text: 'Account Profile', url: '/account' },
-  { text: 'Active Sessions' }, // Last item is automatically rendered as current page
-];
-
-// Automatically handles overflow and collapse logic naturally via container ResizeObserver
-<Breadcrumbs items={items} autoCollapse={true} />
-`,
-};
+import { DemoStory } from '../../demo/demo-types';
+import { Breadcrumbs, BreadcrumbsProps } from './breadcrumbs';
+import { SvgSvg, SvgPath } from '../svg-props';
+
+const HomeIcon = () => (
+  <SvgSvg
+    width='14'
+    height='14'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  >
+    <SvgPath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' />
+    <SvgPath d='M9 22V12h6v10' />
+  </SvgSvg>
+);
+
+const FolderIcon = () => (
+  <SvgSvg
+    width='14'
+    height='14'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  >
+    <SvgPath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z' />
+  </SvgSvg>
+);
+
+export const breadcrumbsDemo: DemoStory<BreadcrumbsProps> = {
+  id: 'breadcrumbs',
+  text: 'Breadcrumbs',
+  args: {
+    autoCollapse: true,
+    items: [],
+  },
+  argTypes: {
+    autoCollapse: { control: 'boolean', description: 'Automatically collapse middle items on overflow' },
+  },
+  render: (args) => {
+    const longItems = [
+      { text: 'Home', url: '/', icon: <HomeIcon /> },
+      { text: 'Settings', url: '/settings', icon: <FolderIcon /> },
+      { text: 'Account Profile', url: '/account' },
+      { text: 'Security Preferences', url: '/security' },
+      { text: 'Two-Factor Auth', url: '/2fa' },
+      { text: 'Active Sessions' },
+    ];
+
+    const shortItems = [{ text: 'Dashboard', url: '/dashboard' }, { text: 'Overview' }];
+
+    return (
+      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
+        <div>
+          <h3 style={{ marginBottom: '20px' }}>Auto-Collapsing Long Breadcrumbs</h3>
+          <p style={{ color: 'var(--secondary-color, #666)', fontSize: '13px', marginBottom: '10px' }}>
+            Scale the window (or iframe) down to see the middle sections collapse into an ellipsis `...`
+          </p>
+          <div
+            style={{
+              padding: '16px',
+              border: '1px solid var(--primary-border, #eee)',
+              borderRadius: '8px',
+              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
+            }}
+          >
+            <Breadcrumbs items={longItems} autoCollapse={args.autoCollapse} />
+          </div>
+        </div>
+
+        <div>
+          <h3 style={{ marginBottom: '20px' }}>Short Breadcrumbs</h3>
+          <div
+            style={{
+              padding: '16px',
+              border: '1px solid var(--primary-border, #eee)',
+              borderRadius: '8px',
+              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
+            }}
+          >
+            <Breadcrumbs items={shortItems} autoCollapse={args.autoCollapse} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+  code: `import { Breadcrumbs } from 'lupine.components/component-pool';
+
+const items = [
+  { text: 'Home', url: '/' },
+  { text: 'Settings', url: '/settings' },
+  { text: 'Account Profile', url: '/account' },
+  { text: 'Active Sessions' }, // Last item is automatically rendered as current page
+];
+
+// Automatically handles overflow and collapse logic naturally via container ResizeObserver
+<Breadcrumbs items={items} autoCollapse={true} />
+`,
+};