lupine.components 1.1.54 → 1.1.56

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 uuware
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 uuware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.54",
+  "version": "1.1.56",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/aspect-ratio/aspect-ratio-demo.tsx

@@ -1,103 +1,103 @@
-import { DemoStory } from '../../demo/demo-types';
-import { AspectRatio, AspectRatioProps } from './aspect-ratio';
-
-export const aspectRatioDemo: DemoStory<AspectRatioProps> = {
-  id: 'aspect-ratio',
-  text: 'AspectRatio',
-  args: {
-    ratio: 16 / 9,
-    children: <div />,
-  },
-  argTypes: {
-    ratio: {
-      control: 'select',
-      options: [16 / 9, 4 / 3, 1, 9 / 16],
-      description: 'Aspect ratio (width / height)',
-    },
-  },
-  render: (args) => {
-    return (
-      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px', maxWidth: '600px' }}>
-        <div>
-          <h3 style={{ marginBottom: '8px' }}>16 / 9 (Video)</h3>
-          <AspectRatio ratio={16 / 9}>
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
-                borderRadius: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'var(--secondary-color, #6b7280)',
-                fontSize: '14px',
-              }}
-            >
-              16:9 Content
-            </div>
-          </AspectRatio>
-        </div>
-
-        <div>
-          <h3 style={{ marginBottom: '8px' }}>4 / 3 (Classic Photo)</h3>
-          <AspectRatio ratio={4 / 3}>
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
-                borderRadius: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'var(--secondary-color, #6b7280)',
-                fontSize: '14px',
-              }}
-            >
-              4:3 Content
-            </div>
-          </AspectRatio>
-        </div>
-
-        <div>
-          <h3 style={{ marginBottom: '8px' }}>1 / 1 (Square)</h3>
-          <AspectRatio ratio={1}>
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
-                borderRadius: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'var(--secondary-color, #6b7280)',
-                fontSize: '14px',
-              }}
-            >
-              1:1 Content
-            </div>
-          </AspectRatio>
-        </div>
-      </div>
-    );
-  },
-  code: `import { AspectRatio } from 'lupine.components/component-pool';
-
-// Video embed (16:9)
-<AspectRatio ratio={16 / 9}>
-  <iframe src="..." style={{ width: '100%', height: '100%', border: 'none' }} />
-</AspectRatio>
-
-// Image (4:3)
-<AspectRatio ratio={4 / 3}>
-  <img src="..." style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-</AspectRatio>
-
-// Square
-<AspectRatio ratio={1}>
-  <img src="..." style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-</AspectRatio>
-`,
-};
+import { DemoStory } from '../../demo/demo-types';
+import { AspectRatio, AspectRatioProps } from './aspect-ratio';
+
+export const aspectRatioDemo: DemoStory<AspectRatioProps> = {
+  id: 'aspect-ratio',
+  text: 'AspectRatio',
+  args: {
+    ratio: 16 / 9,
+    children: <div />,
+  },
+  argTypes: {
+    ratio: {
+      control: 'select',
+      options: [16 / 9, 4 / 3, 1, 9 / 16],
+      description: 'Aspect ratio (width / height)',
+    },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px', maxWidth: '600px' }}>
+        <div>
+          <h3 style={{ marginBottom: '8px' }}>16 / 9 (Video)</h3>
+          <AspectRatio ratio={16 / 9}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'var(--secondary-color, #6b7280)',
+                fontSize: '14px',
+              }}
+            >
+              16:9 Content
+            </div>
+          </AspectRatio>
+        </div>
+
+        <div>
+          <h3 style={{ marginBottom: '8px' }}>4 / 3 (Classic Photo)</h3>
+          <AspectRatio ratio={4 / 3}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'var(--secondary-color, #6b7280)',
+                fontSize: '14px',
+              }}
+            >
+              4:3 Content
+            </div>
+          </AspectRatio>
+        </div>
+
+        <div>
+          <h3 style={{ marginBottom: '8px' }}>1 / 1 (Square)</h3>
+          <AspectRatio ratio={1}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'var(--secondary-color, #6b7280)',
+                fontSize: '14px',
+              }}
+            >
+              1:1 Content
+            </div>
+          </AspectRatio>
+        </div>
+      </div>
+    );
+  },
+  code: `import { AspectRatio } from 'lupine.components/component-pool';
+
+// Video embed (16:9)
+<AspectRatio ratio={16 / 9}>
+  <iframe src="..." style={{ width: '100%', height: '100%', border: 'none' }} />
+</AspectRatio>
+
+// Image (4:3)
+<AspectRatio ratio={4 / 3}>
+  <img src="..." style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+</AspectRatio>
+
+// Square
+<AspectRatio ratio={1}>
+  <img src="..." style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+</AspectRatio>
+`,
+};

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

@@ -1,127 +1,127 @@
-import { Avatar, AvatarGroup } from './avatar';
-import { DemoStory } from '../../demo/demo-types';
-
-export const avatarDemo: DemoStory<any> = {
-  id: 'avatarDemo',
-  text: 'Avatar',
-  args: {
-    maxCount: 3,
-    size: 'md',
-    shape: 'circle',
-  },
-  argTypes: {
-    maxCount: {
-      control: 'number',
-      description: 'Maximum visible avatars in a group',
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size of the avatars',
-    },
-    shape: {
-      control: 'select',
-      options: ['circle', 'rounded', 'square'],
-      description: 'Shape of the avatars',
-    },
-  },
-  render: (args: any) => {
-    const css = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '24px',
-      padding: '24px',
-      '.section-title': {
-        fontSize: '18px',
-        fontWeight: 'bold',
-        marginBottom: '12px',
-        color: 'var(--primary-color)',
-      },
-      '.demo-row': {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '16px',
-        alignItems: 'center',
-      },
-    };
-
-    return (
-      <div css={css}>
-        {/* Controllable Standalone */}
-        <section>
-          <div class='section-title'>
-            Controlled by Panel (Size: {args.size}, Shape: {args.shape})
-          </div>
-          <div class='demo-row'>
-            <Avatar size={args.size} shape={args.shape} src='https://i.pravatar.cc/150?u=99' online />
-            <Avatar size={args.size} shape={args.shape} initials='AD' />
-          </div>
-        </section>
-
-        {/* Sizes */}
-        <section>
-          <div class='section-title'>Sizes (Static)</div>
-          <div class='demo-row'>
-            <Avatar size='xs' initials='XS' />
-            <Avatar size='sm' initials='SM' />
-            <Avatar size='md' initials='MD' />
-            <Avatar size='lg' initials='LG' />
-            <Avatar size='xl' initials='XL' />
-          </div>
-        </section>
-
-        {/* Shapes */}
-        <section>
-          <div class='section-title'>Shapes (Static)</div>
-          <div class='demo-row'>
-            <Avatar shape='circle' initials='C' />
-            <Avatar shape='rounded' initials='R' />
-            <Avatar shape='square' initials='S' />
-          </div>
-        </section>
-
-        {/* Status */}
-        <section>
-          <div class='section-title'>Status Indicators</div>
-          <div class='demo-row'>
-            <Avatar size='md' src='https://i.pravatar.cc/150?u=3' status='online' />
-            <Avatar size='md' src='https://i.pravatar.cc/150?u=4' status='away' />
-            <Avatar size='md' src='https://i.pravatar.cc/150?u=5' status='busy' />
-            <Avatar size='md' src='https://i.pravatar.cc/150?u=6' status='offline' />
-          </div>
-        </section>
-
-        {/* Group */}
-        <section>
-          <div class='section-title'>
-            Avatar Group (maxCount: {args.maxCount}, size: {args.size})
-          </div>
-          <div class='demo-row'>
-            <AvatarGroup maxCount={args.maxCount} size={args.size}>
-              <Avatar src='https://i.pravatar.cc/150?u=7' />
-              <Avatar src='https://i.pravatar.cc/150?u=8' />
-              <Avatar src='https://i.pravatar.cc/150?u=9' />
-              <Avatar src='https://i.pravatar.cc/150?u=10' />
-              <Avatar src='https://i.pravatar.cc/150?u=11' />
-              <Avatar src='https://i.pravatar.cc/150?u=12' />
-            </AvatarGroup>
-          </div>
-        </section>
-      </div>
-    );
-  },
-  code: `import { Avatar, AvatarGroup } from 'lupine.components/component-pool';
-
-// Standalone
-<Avatar size="md" shape="circle" src="..." status="online" />
-<Avatar size="lg" initials="AD" />
-
-// Group
-<AvatarGroup maxCount={3}>
-  <Avatar src="..." />
-  <Avatar src="..." />
-  <Avatar src="..." />
-  <Avatar src="..." />
-</AvatarGroup>
-`,
-};
+import { Avatar, AvatarGroup } from './avatar';
+import { DemoStory } from '../../demo/demo-types';
+
+export const avatarDemo: DemoStory<any> = {
+  id: 'avatarDemo',
+  text: 'Avatar',
+  args: {
+    maxCount: 3,
+    size: 'md',
+    shape: 'circle',
+  },
+  argTypes: {
+    maxCount: {
+      control: 'number',
+      description: 'Maximum visible avatars in a group',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Size of the avatars',
+    },
+    shape: {
+      control: 'select',
+      options: ['circle', 'rounded', 'square'],
+      description: 'Shape of the avatars',
+    },
+  },
+  render: (args: any) => {
+    const css = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px',
+      padding: '24px',
+      '.section-title': {
+        fontSize: '18px',
+        fontWeight: 'bold',
+        marginBottom: '12px',
+        color: 'var(--primary-color)',
+      },
+      '.demo-row': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '16px',
+        alignItems: 'center',
+      },
+    };
+
+    return (
+      <div css={css}>
+        {/* Controllable Standalone */}
+        <section>
+          <div class='section-title'>
+            Controlled by Panel (Size: {args.size}, Shape: {args.shape})
+          </div>
+          <div class='demo-row'>
+            <Avatar size={args.size} shape={args.shape} src='https://i.pravatar.cc/150?u=99' online />
+            <Avatar size={args.size} shape={args.shape} initials='AD' />
+          </div>
+        </section>
+
+        {/* Sizes */}
+        <section>
+          <div class='section-title'>Sizes (Static)</div>
+          <div class='demo-row'>
+            <Avatar size='xs' initials='XS' />
+            <Avatar size='sm' initials='SM' />
+            <Avatar size='md' initials='MD' />
+            <Avatar size='lg' initials='LG' />
+            <Avatar size='xl' initials='XL' />
+          </div>
+        </section>
+
+        {/* Shapes */}
+        <section>
+          <div class='section-title'>Shapes (Static)</div>
+          <div class='demo-row'>
+            <Avatar shape='circle' initials='C' />
+            <Avatar shape='rounded' initials='R' />
+            <Avatar shape='square' initials='S' />
+          </div>
+        </section>
+
+        {/* Status */}
+        <section>
+          <div class='section-title'>Status Indicators</div>
+          <div class='demo-row'>
+            <Avatar size='md' src='https://i.pravatar.cc/150?u=3' status='online' />
+            <Avatar size='md' src='https://i.pravatar.cc/150?u=4' status='away' />
+            <Avatar size='md' src='https://i.pravatar.cc/150?u=5' status='busy' />
+            <Avatar size='md' src='https://i.pravatar.cc/150?u=6' status='offline' />
+          </div>
+        </section>
+
+        {/* Group */}
+        <section>
+          <div class='section-title'>
+            Avatar Group (maxCount: {args.maxCount}, size: {args.size})
+          </div>
+          <div class='demo-row'>
+            <AvatarGroup maxCount={args.maxCount} size={args.size}>
+              <Avatar src='https://i.pravatar.cc/150?u=7' />
+              <Avatar src='https://i.pravatar.cc/150?u=8' />
+              <Avatar src='https://i.pravatar.cc/150?u=9' />
+              <Avatar src='https://i.pravatar.cc/150?u=10' />
+              <Avatar src='https://i.pravatar.cc/150?u=11' />
+              <Avatar src='https://i.pravatar.cc/150?u=12' />
+            </AvatarGroup>
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { Avatar, AvatarGroup } from 'lupine.components/component-pool';
+
+// Standalone
+<Avatar size="md" shape="circle" src="..." status="online" />
+<Avatar size="lg" initials="AD" />
+
+// Group
+<AvatarGroup maxCount={3}>
+  <Avatar src="..." />
+  <Avatar src="..." />
+  <Avatar src="..." />
+  <Avatar src="..." />
+</AvatarGroup>
+`,
+};