lupine.components 1.1.22 → 1.1.24

package/package.json

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

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

@@ -0,0 +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>
+`,
+};

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

@@ -0,0 +1,41 @@
+import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps, VNode } from 'lupine.web';
+
+export type AspectRatioProps = {
+  class?: string;
+  style?: CssProps;
+  children: VNode<any>;
+  ratio?: number; // width/height ratio, e.g. 16/9, 4/3, 1. Defaults to 16/9
+};
+
+export const AspectRatio = (props: AspectRatioProps) => {
+  const css: CssProps = {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+
+    '.&-inner': {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+    },
+  };
+
+  const globalCssId = getGlobalStylesId(css);
+  bindGlobalStyle(globalCssId, css);
+
+  const ref: RefProps = {
+    globalCssId,
+  };
+
+  const ratio = props.ratio ?? 16 / 9;
+  // Use padding-top trick for broad browser support
+  // paddingTop = (1 / ratio) * 100%
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  return (
+    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={{ paddingTop, ...props.style }}>
+      <div class='&-inner'>{props.children}</div>
+    </div>
+  );
+};

package/src/component-pool/aspect-ratio/index.ts

@@ -0,0 +1,2 @@
+export * from './aspect-ratio';
+export * from './aspect-ratio-demo';

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

@@ -0,0 +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>
+`,
+};

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

@@ -0,0 +1,183 @@
+import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps } from 'lupine.web';
+import { HtmlVar } from 'lupine.components';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+
+export type AvatarProps = {
+  class?: string;
+  style?: CssProps;
+  src?: string;
+  initials?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  status?: AvatarStatus;
+  online?: boolean; // Shortcut for status="online"
+  [key: string]: any;
+};
+
+const avatarCss: CssProps = {
+  display: 'inline-block',
+  position: 'relative',
+  verticalAlign: 'middle',
+
+  // Inner wrapper for content clipping/border
+  '.&-content': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+    color: 'var(--secondary-color, #666)',
+    overflow: 'hidden',
+    border: '1px solid var(--secondary-border-color, #ddd)',
+    fontSize: '14px',
+    fontWeight: '500',
+    transition: 'all 0.2s ease',
+  },
+
+  '&.shape-circle .&-content': { borderRadius: '50%' },
+  '&.shape-rounded .&-content': { borderRadius: 'var(--border-radius-m, 8px)' },
+  '&.shape-square .&-content': { borderRadius: '0' },
+
+  '&.size-xs': { width: '24px', height: '24px' },
+  '&.size-sm': { width: '32px', height: '32px' },
+  '&.size-md': { width: '40px', height: '40px' },
+  '&.size-lg': { width: '48px', height: '48px' },
+  '&.size-xl': { width: '64px', height: '64px' },
+
+  '&.size-xs .&-content': { fontSize: '10px' },
+  '&.size-xl .&-content': { fontSize: '20px' },
+
+  '.&-img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+
+  '.&-status': {
+    position: 'absolute',
+    bottom: '0',
+    right: '0',
+    width: '25%',
+    height: '25%',
+    minWidth: '8px',
+    minHeight: '8px',
+    borderRadius: '50%',
+    border: '2px solid var(--primary-bg-color, #fff)',
+    backgroundColor: '#999',
+    zIndex: 1,
+  },
+
+  '.&-status.status-online': { backgroundColor: 'var(--success-color, #2ecc71)' },
+  '.&-status.status-offline': { backgroundColor: 'var(--secondary-border-color, #999)' },
+  '.&-status.status-busy': { backgroundColor: 'var(--error-color, #e74c3c)' },
+  '.&-status.status-away': { backgroundColor: 'var(--warning-color, #f39c12)' },
+};
+
+const groupCss: CssProps = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+
+  '.&-item': {
+    marginLeft: '-12px',
+    border: '2px solid var(--primary-bg-color, #fff)',
+    borderRadius: '50%',
+    zIndex: 0,
+  },
+  '.&-item:first-child': {
+    marginLeft: '0',
+  },
+  '.&-item:hover': {
+    zIndex: 1,
+  },
+};
+
+export const Avatar = (props: AvatarProps) => {
+  const size = props.size || 'md';
+  const shape = props.shape || 'circle';
+  const status = props.online ? 'online' : props.status;
+
+  const globalCssId = getGlobalStylesId(avatarCss);
+  bindGlobalStyle(globalCssId, avatarCss);
+
+  const renderInitials = () => <span>{props.initials || '?'}</span>;
+
+  const renderContent = () => {
+    if (props.src) {
+      return (
+        <img
+          class='&-img'
+          src={props.src}
+          onError={() => {
+            avatarContent.value = renderInitials();
+          }}
+        />
+      );
+    }
+    return renderInitials();
+  };
+
+  // Use HtmlVar to hold the actual renderable content
+  const avatarContent = new HtmlVar(renderContent());
+
+  const ref: RefProps = {
+    globalCssId,
+  };
+
+  return (
+    <div class={[`size-${size}`, `shape-${shape}`, props.class].join(' ').trim()} ref={ref} css={props.style}>
+      <div class='&-content'>{avatarContent.node}</div>
+      {status && <div class={['&-status', `status-${status}`].join(' ')}></div>}
+    </div>
+  );
+};
+
+export type AvatarGroupProps = {
+  class?: string;
+  style?: CssProps;
+  children?: any;
+  maxCount?: number;
+  size?: AvatarSize;
+};
+
+export const AvatarGroup = (props: AvatarGroupProps) => {
+  const globalCssId = getGlobalStylesId(groupCss);
+  bindGlobalStyle(globalCssId, groupCss);
+
+  const ref: RefProps = {
+    globalCssId,
+  };
+
+  const children = Array.isArray(props.children) ? props.children : [props.children];
+  const max = props.maxCount || children.length;
+  const visibleItems = children.slice(0, max);
+  const remaining = children.length - max;
+
+  const items = visibleItems.map((child: any) => {
+    if (child && typeof child === 'object' && child.props) {
+      if (props.size && !child.props.size) child.props.size = props.size;
+      child.props.class = [child.props.class, '&-item'].join(' ').trim();
+    }
+    return child;
+  });
+
+  if (remaining > 0) {
+    items.push(
+      <Avatar
+        class='&-item'
+        size={props.size || (visibleItems[0]?.props?.size as AvatarSize) || 'md'}
+        initials={`+${remaining}`}
+      />
+    );
+  }
+
+  return (
+    <div ref={ref} class={['&-group', props.class].join(' ').trim()} css={props.style}>
+      {items}
+    </div>
+  );
+};

package/src/component-pool/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './avatar-demo';

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

@@ -0,0 +1,121 @@
+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: '#ffffff',
+    bgColor: '#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: '#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: '#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: '#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: '#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/badge/badge.tsx

@@ -0,0 +1,103 @@
+import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps, VNode } from 'lupine.web';
+
+export type BadgeProps = {
+  class?: string;
+  style?: CssProps;
+  children?: any;
+
+  content?: number | string | VNode<any>;
+  max?: number;
+  dot?: boolean;
+  color?: string;
+  bgColor?: string;
+  onClick?: (e: MouseEvent) => void;
+};
+
+const badgeCss: CssProps = {
+  display: 'inline-flex',
+  position: 'relative',
+  verticalAlign: 'middle',
+
+  '.&-bubble': {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    transform: 'translate(50%, -50%)',
+    transformOrigin: '100% 0%',
+
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    padding: '0 6px',
+    height: '20px',
+    minWidth: '20px',
+    borderRadius: '10px',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+
+    backgroundColor: 'var(--danger-color, #e74c3c)',
+    color: '#ffffff',
+    boxShadow: '0 0 0 1px var(--primary-bg-color, #ffffff)',
+
+    zIndex: 10,
+  },
+
+  '.&-bubble.is-dot': {
+    padding: 0,
+    height: '8px',
+    minWidth: '8px',
+    width: '8px',
+    borderRadius: '50%',
+  },
+
+  '.&-bubble.is-standalone': {
+    position: 'relative',
+    transform: 'none',
+  },
+};
+
+export const Badge = (props: BadgeProps) => {
+  const globalCssId = getGlobalStylesId(badgeCss);
+  bindGlobalStyle(globalCssId, badgeCss);
+
+  const ref: RefProps = {
+    globalCssId,
+  };
+
+  let displayContent = props.content;
+
+  // Handle max value for numbers
+  if (typeof displayContent === 'number' && props.max && displayContent > props.max) {
+    displayContent = `${props.max}+`;
+  }
+
+  // Determine bubbling style
+  const bubbleStyle: any = {};
+  if (props.bgColor) bubbleStyle.backgroundColor = props.bgColor;
+  if (props.color) bubbleStyle.color = props.color;
+
+  const hasChildren = props.children && (Array.isArray(props.children) ? props.children.length > 0 : true);
+
+  const isSup = !props.dot && displayContent !== undefined && displayContent !== null && displayContent !== '';
+  const showBubble = props.dot || isSup;
+
+  return (
+    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={props.style} onClick={props.onClick}>
+      {/* The Anchor Element */}
+      {props.children}
+
+      {/* The floating Badge Bubble */}
+      {showBubble && (
+        <sup
+          class={['&-bubble', props.dot ? 'is-dot' : '', !hasChildren ? 'is-standalone' : ''].join(' ').trim()}
+          style={bubbleStyle}
+        >
+          {!props.dot && displayContent}
+        </sup>
+      )}
+    </div>
+  );
+};