lupine.components 1.1.55 → 1.1.56

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

@@ -1,191 +1,191 @@
-import { Carousel } from './carousel';
-import { Card } from '../card';
-import { Avatar } from '../avatar';
-import { DemoStory } from '../../demo/demo-types';
-
-export const carouselDemo: DemoStory<any> = {
-  id: 'carouselDemo',
-  text: 'Carousel',
-  args: {
-    showDots: true,
-    showArrows: true,
-    autoplay: false,
-    interval: 4000,
-  },
-  argTypes: {
-    showDots: { control: 'boolean' },
-    showArrows: { control: 'boolean' },
-    autoplay: { control: 'boolean' },
-    interval: { control: 'number' },
-  },
-  render: (args: any) => {
-    const css = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '48px',
-      padding: '24px',
-      '.section-title': {
-        fontSize: '22px',
-        fontWeight: 'bold',
-        marginBottom: '20px',
-        color: 'var(--primary-color)',
-        borderBottom: '2px solid var(--primary-border, #eee)',
-        paddingBottom: '10px',
-      },
-      '.carousel-container': {
-        maxWidth: '800px',
-        margin: '0 auto',
-        // backgroundColor: '#fff',
-      },
-    };
-
-    const productCards = [
-      <Card
-        cover={<img src='https://picsum.photos/seed/c1/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
-        title='Professional Violin'
-        description='Handcrafted in Italy using aged spruce and maple. Exceptional tone quality for soloists.'
-        footer={
-          <button
-            style={{
-              width: '100%',
-              padding: '12px',
-              backgroundColor: 'var(--secondary-bg-color)',
-              color: 'var(--secondary-color)',
-              border: 'none',
-              borderRadius: '6px',
-            }}
-          >
-            View Detail
-          </button>
-        }
-      />,
-      <Card
-        cover={<img src='https://picsum.photos/seed/c2/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
-        title='Modern Cello'
-        description='Deep, resonant sound with excellent projection. Perfect for advanced students and conservatory levels.'
-        footer={
-          <button
-            style={{
-              width: '100%',
-              padding: '12px',
-              backgroundColor: 'var(--secondary-bg-color)',
-              color: 'var(--secondary-color)',
-              border: 'none',
-              borderRadius: '6px',
-            }}
-          >
-            View Detail
-          </button>
-        }
-      />,
-      <Card
-        cover={<img src='https://picsum.photos/seed/c3/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
-        title='Premium Bow Collection'
-        description='Graphite and Pernambuco sticks carefully balanced for professional requirements.'
-        footer={
-          <button
-            style={{
-              width: '100%',
-              padding: '12px',
-              backgroundColor: 'var(--secondary-bg-color)',
-              color: 'var(--secondary-color)',
-              border: 'none',
-              borderRadius: '6px',
-            }}
-          >
-            View Detail
-          </button>
-        }
-      />,
-    ];
-
-    const profileCards = [
-      <Card
-        horizontal
-        avatar={<Avatar src='https://picsum.photos/seed/p1/200' size='xl' online />}
-        title='Master Wang'
-        description='Famous violinist with 40 years of teaching experience. Specialized in Paganini Caprices.'
-      />,
-      <Card
-        horizontal
-        avatar={<Avatar src='https://picsum.photos/seed/p2/200' size='xl' status='busy' />}
-        title='Dr. Emily Chen'
-        description='Orchestral director and chamber music expert. PhD from Juilliard School.'
-      />,
-      <Card
-        horizontal
-        avatar={<Avatar src='https://picsum.photos/seed/p3/200' size='xl' online />}
-        title='Sarkis Baghdassarian'
-        description='Concertmaster of the Lupine Symphony. Renowned for rich vibrato and technical precision.'
-      />,
-    ];
-
-    return (
-      <div css={css}>
-        <section>
-          <div class='section-title'>Product Showreel (Arrows + Dots)</div>
-          <div class='carousel-container'>
-            <Carousel {...args}>{productCards}</Carousel>
-          </div>
-        </section>
-
-        <section>
-          <div class='section-title'>Instructor Highlights (Dots Only)</div>
-          <div class='carousel-container'>
-            <Carousel showDots={true} showArrows={false} autoplay={args.autoplay}>
-              {profileCards}
-            </Carousel>
-          </div>
-        </section>
-
-        <section>
-          <div class='section-title'>Mixed Content Carousel</div>
-          <div class='carousel-container'>
-            <Carousel showDots={false} showArrows={true} autoplay={args.autoplay}>
-              <div
-                style={{
-                  height: '300px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: 'var(--secondary-bg-color, #f0f4f8)',
-                  color: 'var(--primary-color, #2c3e50)',
-                  fontSize: '24px',
-                }}
-              >
-                Custom HTML Slide 1
-              </div>
-              <Card
-                title='Integrated Card Slide'
-                description='This card is directly integrated as a slide in the carousel.'
-                cover={
-                  <img src='https://picsum.photos/seed/m1/800/400' style={{ height: '200px', objectFit: 'cover' }} />
-                }
-              />
-              <div
-                style={{
-                  height: '300px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: 'var(--success-bg-color, #e8f5e9)',
-                  color: 'var(--success-color, #2e7d32)',
-                  fontSize: '24px',
-                }}
-              >
-                Custom HTML Slide 3
-              </div>
-            </Carousel>
-          </div>
-        </section>
-      </div>
-    );
-  },
-  code: `import { Carousel } from 'lupine.components/component-pool';
-
-<Carousel showDots={true} showArrows={true} autoplay={true} interval={4000}>
-  <div class="slide">Slide 1</div>
-  <div class="slide">Slide 2</div>
-</Carousel>
-`,
-};
+import { Carousel } from './carousel';
+import { Card } from '../card';
+import { Avatar } from '../avatar';
+import { DemoStory } from '../../demo/demo-types';
+
+export const carouselDemo: DemoStory<any> = {
+  id: 'carouselDemo',
+  text: 'Carousel',
+  args: {
+    showDots: true,
+    showArrows: true,
+    autoplay: false,
+    interval: 4000,
+  },
+  argTypes: {
+    showDots: { control: 'boolean' },
+    showArrows: { control: 'boolean' },
+    autoplay: { control: 'boolean' },
+    interval: { control: 'number' },
+  },
+  render: (args: any) => {
+    const css = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '48px',
+      padding: '24px',
+      '.section-title': {
+        fontSize: '22px',
+        fontWeight: 'bold',
+        marginBottom: '20px',
+        color: 'var(--primary-color)',
+        borderBottom: '2px solid var(--primary-border, #eee)',
+        paddingBottom: '10px',
+      },
+      '.carousel-container': {
+        maxWidth: '800px',
+        margin: '0 auto',
+        // backgroundColor: '#fff',
+      },
+    };
+
+    const productCards = [
+      <Card
+        cover={<img src='https://picsum.photos/seed/c1/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
+        title='Professional Violin'
+        description='Handcrafted in Italy using aged spruce and maple. Exceptional tone quality for soloists.'
+        footer={
+          <button
+            style={{
+              width: '100%',
+              padding: '12px',
+              backgroundColor: 'var(--secondary-bg-color)',
+              color: 'var(--secondary-color)',
+              border: 'none',
+              borderRadius: '6px',
+            }}
+          >
+            View Detail
+          </button>
+        }
+      />,
+      <Card
+        cover={<img src='https://picsum.photos/seed/c2/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
+        title='Modern Cello'
+        description='Deep, resonant sound with excellent projection. Perfect for advanced students and conservatory levels.'
+        footer={
+          <button
+            style={{
+              width: '100%',
+              padding: '12px',
+              backgroundColor: 'var(--secondary-bg-color)',
+              color: 'var(--secondary-color)',
+              border: 'none',
+              borderRadius: '6px',
+            }}
+          >
+            View Detail
+          </button>
+        }
+      />,
+      <Card
+        cover={<img src='https://picsum.photos/seed/c3/800/400' style={{ height: '300px', objectFit: 'cover' }} />}
+        title='Premium Bow Collection'
+        description='Graphite and Pernambuco sticks carefully balanced for professional requirements.'
+        footer={
+          <button
+            style={{
+              width: '100%',
+              padding: '12px',
+              backgroundColor: 'var(--secondary-bg-color)',
+              color: 'var(--secondary-color)',
+              border: 'none',
+              borderRadius: '6px',
+            }}
+          >
+            View Detail
+          </button>
+        }
+      />,
+    ];
+
+    const profileCards = [
+      <Card
+        horizontal
+        avatar={<Avatar src='https://picsum.photos/seed/p1/200' size='xl' online />}
+        title='Master Wang'
+        description='Famous violinist with 40 years of teaching experience. Specialized in Paganini Caprices.'
+      />,
+      <Card
+        horizontal
+        avatar={<Avatar src='https://picsum.photos/seed/p2/200' size='xl' status='busy' />}
+        title='Dr. Emily Chen'
+        description='Orchestral director and chamber music expert. PhD from Juilliard School.'
+      />,
+      <Card
+        horizontal
+        avatar={<Avatar src='https://picsum.photos/seed/p3/200' size='xl' online />}
+        title='Sarkis Baghdassarian'
+        description='Concertmaster of the Lupine Symphony. Renowned for rich vibrato and technical precision.'
+      />,
+    ];
+
+    return (
+      <div css={css}>
+        <section>
+          <div class='section-title'>Product Showreel (Arrows + Dots)</div>
+          <div class='carousel-container'>
+            <Carousel {...args}>{productCards}</Carousel>
+          </div>
+        </section>
+
+        <section>
+          <div class='section-title'>Instructor Highlights (Dots Only)</div>
+          <div class='carousel-container'>
+            <Carousel showDots={true} showArrows={false} autoplay={args.autoplay}>
+              {profileCards}
+            </Carousel>
+          </div>
+        </section>
+
+        <section>
+          <div class='section-title'>Mixed Content Carousel</div>
+          <div class='carousel-container'>
+            <Carousel showDots={false} showArrows={true} autoplay={args.autoplay}>
+              <div
+                style={{
+                  height: '300px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f4f8)',
+                  color: 'var(--primary-color, #2c3e50)',
+                  fontSize: '24px',
+                }}
+              >
+                Custom HTML Slide 1
+              </div>
+              <Card
+                title='Integrated Card Slide'
+                description='This card is directly integrated as a slide in the carousel.'
+                cover={
+                  <img src='https://picsum.photos/seed/m1/800/400' style={{ height: '200px', objectFit: 'cover' }} />
+                }
+              />
+              <div
+                style={{
+                  height: '300px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: 'var(--success-bg-color, #e8f5e9)',
+                  color: 'var(--success-color, #2e7d32)',
+                  fontSize: '24px',
+                }}
+              >
+                Custom HTML Slide 3
+              </div>
+            </Carousel>
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { Carousel } from 'lupine.components/component-pool';
+
+<Carousel showDots={true} showArrows={true} autoplay={true} interval={4000}>
+  <div class="slide">Slide 1</div>
+  <div class="slide">Slide 2</div>
+</Carousel>
+`,
+};

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

@@ -1,127 +1,127 @@
-import { Cascader } from './cascader';
-import { DemoStory } from '../../demo/demo-types';
-
-export const cascaderDemo: DemoStory<any> = {
-  id: 'cascaderDemo',
-  text: 'Cascader',
-  args: {
-    type: 'title',
-    showCircle: false,
-  },
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['title', 'ellipsis'],
-    },
-    showCircle: {
-      control: 'boolean',
-    },
-  },
-  render: (args: any) => {
-    const css = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '32px',
-      padding: '32px',
-      maxWidth: '600px',
-      margin: '0 auto',
-
-      '.demo-section': {
-        border: '1px solid var(--secondary-border-color)',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        backgroundColor: 'var(--primary-bg-color)',
-      },
-      '.section-label': {
-        padding: '16px',
-        backgroundColor: 'var(--secondary-bg-color)',
-        borderBottom: '1px solid var(--secondary-border-color)',
-        fontSize: '14px',
-        fontWeight: 'bold',
-        color: 'var(--secondary-color)',
-      },
-    };
-
-    return (
-      <div css={css}>
-        <section class='demo-section'>
-          <div class='section-label'>Interactive Demo</div>
-          <div style={{ padding: args.type === 'ellipsis' ? '12px' : '0' }}>
-            <Cascader
-              type={args.type}
-              showCircle={args.showCircle}
-              title='Interactive Cascader'
-              description='Change the controls on the right to see this component update in real-time.'
-              defaultOpen={true}
-              key={`${args.type}-${args.showCircle}`}
-            >
-              <div style={{ padding: '10px', backgroundColor: 'var(--secondary-bg-color)', borderRadius: '4px' }}>
-                <p>This section is dynamic!</p>
-                <p>
-                  Current Type: <strong>{args.type}</strong>
-                </p>
-                <p>
-                  Show Circle: <strong>{args.showCircle ? 'Yes' : 'No'}</strong>
-                </p>
-              </div>
-            </Cascader>
-          </div>
-        </section>
-
-        <section class='demo-section'>
-          <div class='section-label'>Accordion Group (Mixed Styles)</div>
-          <Cascader
-            title='Account Settings'
-            description='Manage your profile and security'
-            group='settings'
-            showCircle={args.showCircle}
-            defaultOpen={true}
-            key={`s1-${args.showCircle}`}
-          >
-            <p>Username: Admin</p>
-          </Cascader>
-          <Cascader
-            title='Privacy Policy'
-            description='Learn how we handle your data'
-            group='settings'
-            showCircle={args.showCircle}
-            key={`s2-${args.showCircle}`}
-          >
-            <p>Your privacy is important to us.</p>
-          </Cascader>
-        </section>
-
-        <section class='demo-section'>
-          <div class='section-label'>Ellipsis Mode (Inline Expand)</div>
-          <div style={{ padding: '12px' }}>
-            <Cascader
-              type='ellipsis'
-              showCircle={args.showCircle}
-              key={`e1-${args.showCircle}`}
-              description='Lupine.js is a lightweight, high-performance web framework designed for modern agent-centric applications. It provides a rich set of UI components and a robust state management system that works seamlessly across different environments. By leveraging reactive principles and a clean component model, Lupine.js allows developers to build complex user interfaces with minimal boilerplate code.'
-            >
-              <p>Additional details for the ellipsis item.</p>
-            </Cascader>
-          </div>
-        </section>
-      </div>
-    );
-  },
-  code: `import { Cascader } from 'lupine.components/component-pool';
-
-<Cascader 
-  title="Account Settings" 
-  description="Manage your profile"
-  group="settings"
->
-  <p>Content goes here...</p>
-</Cascader>
-
-<Cascader 
-  type="ellipsis"
-  description="Lupine.js is a lightweight, high-performance web framework..."
->
-  <p>Expanded content</p>
-</Cascader>
-`,
-};
+import { Cascader } from './cascader';
+import { DemoStory } from '../../demo/demo-types';
+
+export const cascaderDemo: DemoStory<any> = {
+  id: 'cascaderDemo',
+  text: 'Cascader',
+  args: {
+    type: 'title',
+    showCircle: false,
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['title', 'ellipsis'],
+    },
+    showCircle: {
+      control: 'boolean',
+    },
+  },
+  render: (args: any) => {
+    const css = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px',
+      padding: '32px',
+      maxWidth: '600px',
+      margin: '0 auto',
+
+      '.demo-section': {
+        border: '1px solid var(--secondary-border-color)',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        backgroundColor: 'var(--primary-bg-color)',
+      },
+      '.section-label': {
+        padding: '16px',
+        backgroundColor: 'var(--secondary-bg-color)',
+        borderBottom: '1px solid var(--secondary-border-color)',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        color: 'var(--secondary-color)',
+      },
+    };
+
+    return (
+      <div css={css}>
+        <section class='demo-section'>
+          <div class='section-label'>Interactive Demo</div>
+          <div style={{ padding: args.type === 'ellipsis' ? '12px' : '0' }}>
+            <Cascader
+              type={args.type}
+              showCircle={args.showCircle}
+              title='Interactive Cascader'
+              description='Change the controls on the right to see this component update in real-time.'
+              defaultOpen={true}
+              key={`${args.type}-${args.showCircle}`}
+            >
+              <div style={{ padding: '10px', backgroundColor: 'var(--secondary-bg-color)', borderRadius: '4px' }}>
+                <p>This section is dynamic!</p>
+                <p>
+                  Current Type: <strong>{args.type}</strong>
+                </p>
+                <p>
+                  Show Circle: <strong>{args.showCircle ? 'Yes' : 'No'}</strong>
+                </p>
+              </div>
+            </Cascader>
+          </div>
+        </section>
+
+        <section class='demo-section'>
+          <div class='section-label'>Accordion Group (Mixed Styles)</div>
+          <Cascader
+            title='Account Settings'
+            description='Manage your profile and security'
+            group='settings'
+            showCircle={args.showCircle}
+            defaultOpen={true}
+            key={`s1-${args.showCircle}`}
+          >
+            <p>Username: Admin</p>
+          </Cascader>
+          <Cascader
+            title='Privacy Policy'
+            description='Learn how we handle your data'
+            group='settings'
+            showCircle={args.showCircle}
+            key={`s2-${args.showCircle}`}
+          >
+            <p>Your privacy is important to us.</p>
+          </Cascader>
+        </section>
+
+        <section class='demo-section'>
+          <div class='section-label'>Ellipsis Mode (Inline Expand)</div>
+          <div style={{ padding: '12px' }}>
+            <Cascader
+              type='ellipsis'
+              showCircle={args.showCircle}
+              key={`e1-${args.showCircle}`}
+              description='Lupine.js is a lightweight, high-performance web framework designed for modern agent-centric applications. It provides a rich set of UI components and a robust state management system that works seamlessly across different environments. By leveraging reactive principles and a clean component model, Lupine.js allows developers to build complex user interfaces with minimal boilerplate code.'
+            >
+              <p>Additional details for the ellipsis item.</p>
+            </Cascader>
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { Cascader } from 'lupine.components/component-pool';
+
+<Cascader 
+  title="Account Settings" 
+  description="Manage your profile"
+  group="settings"
+>
+  <p>Content goes here...</p>
+</Cascader>
+
+<Cascader 
+  type="ellipsis"
+  description="Lupine.js is a lightweight, high-performance web framework..."
+>
+  <p>Expanded content</p>
+</Cascader>
+`,
+};