@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/components/Footer/FooterSection.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef } from 'react';
+import { FooterSectionProps } from '../../lib/types/components';
+
+/**
+ * FooterSection component provides a section within the footer for organizing links and content.
+ *
+ * @example
+ * ```tsx
+ * <FooterSection title="Products" icon={<ProductIcon />}>
+ *   <FooterLink href="/product1">Product 1</FooterLink>
+ *   <FooterLink href="/product2">Product 2</FooterLink>
+ * </FooterSection>
+ * ```
+ */
+export const FooterSection = forwardRef<HTMLDivElement, FooterSectionProps>(
+  (
+    {
+      title,
+      icon,
+      collapsible = false,
+      defaultCollapsed = false,
+      children,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+
+    const handleToggle = () => {
+      if (collapsible) {
+        setIsCollapsed(!isCollapsed);
+      }
+    };
+
+    const sectionClass = [
+      'c-footer__section',
+      collapsible && 'c-footer__section--collapsible',
+      isCollapsed && 'c-footer__section--collapsed',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div ref={ref} className={sectionClass} {...props}>
+        {title && (
+          <div className="c-footer__section-header">
+            {collapsible ? (
+              <button
+                type="button"
+                className="c-footer__section-toggle"
+                onClick={handleToggle}
+                aria-expanded={!isCollapsed}
+                aria-controls={`footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`}
+              >
+                {icon && <span className="c-footer__section-icon">{icon}</span>}
+                <h4 className="c-footer__section-title">{title}</h4>
+                <span className="c-footer__section-chevron">
+                  {isCollapsed ? '▼' : '▲'}
+                </span>
+              </button>
+            ) : (
+              <div className="c-footer__section-header-content">
+                {icon && <span className="c-footer__section-icon">{icon}</span>}
+                <h4 className="c-footer__section-title">{title}</h4>
+              </div>
+            )}
+          </div>
+        )}
+        <div
+          className="c-footer__section-content"
+          id={title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}` : undefined}
+          style={{
+            display: collapsible && isCollapsed ? 'none' : 'block',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+FooterSection.displayName = 'FooterSection';
+
+export default FooterSection;

package/src/components/Footer/FooterSocialLink.tsx

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import { FooterSocialLinkProps } from '../../lib/types/components';
+
+/**
+ * FooterSocialLink component provides styled social media links with platform-specific icons.
+ *
+ * @example
+ * ```tsx
+ * <FooterSocialLink platform="twitter" url="https://twitter.com/company" />
+ * <FooterSocialLink platform="custom" url="https://example.com" icon={<CustomIcon />} label="Custom Platform" />
+ * ```
+ */
+export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkProps>(
+  (
+    {
+      platform,
+      url,
+      icon,
+      label,
+      size = 'md',
+      variant = 'default',
+      disabled = false,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const getPlatformIcon = (platform: string) => {
+      const icons: Record<string, string> = {
+        facebook: '📘',
+        twitter: '🐦',
+        instagram: '📷',
+        linkedin: '💼',
+        youtube: '📺',
+        github: '🐙',
+        discord: '🎮',
+        tiktok: '🎵',
+        pinterest: '📌',
+        snapchat: '👻',
+        whatsapp: '💬',
+        telegram: '✈️',
+        reddit: '🤖',
+        twitch: '🎮',
+        spotify: '🎵',
+        dribbble: '🏀',
+        behance: '🎨',
+        medium: '📝',
+        dev: '👨‍💻',
+        codepen: '✏️',
+      };
+      return icons[platform] || '🔗';
+    };
+
+    const getPlatformLabel = (platform: string) => {
+      const labels: Record<string, string> = {
+        facebook: 'Facebook',
+        twitter: 'Twitter',
+        instagram: 'Instagram',
+        linkedin: 'LinkedIn',
+        youtube: 'YouTube',
+        github: 'GitHub',
+        discord: 'Discord',
+        tiktok: 'TikTok',
+        pinterest: 'Pinterest',
+        snapchat: 'Snapchat',
+        whatsapp: 'WhatsApp',
+        telegram: 'Telegram',
+        reddit: 'Reddit',
+        twitch: 'Twitch',
+        spotify: 'Spotify',
+        dribbble: 'Dribbble',
+        behance: 'Behance',
+        medium: 'Medium',
+        dev: 'Dev.to',
+        codepen: 'CodePen',
+      };
+      return labels[platform] || platform;
+    };
+
+    const linkClass = [
+      'c-footer__social-link',
+      `c-footer__social-link--${platform}`,
+      `c-footer__social-link--${size}`,
+      `c-footer__social-link--${variant}`,
+      disabled && 'c-footer__social-link--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const ariaLabel = label || `Follow us on ${getPlatformLabel(platform)}`;
+
+    return (
+      <a
+        ref={ref}
+        href={disabled ? undefined : url}
+        className={linkClass}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+        {...props}
+      >
+        <span className="c-footer__social-link-icon">
+          {icon || getPlatformIcon(platform)}
+        </span>
+        <span className="c-footer__social-link-label u-visually-hidden">
+          {ariaLabel}
+        </span>
+      </a>
+    );
+  }
+);
+
+FooterSocialLink.displayName = 'FooterSocialLink';
+
+export default FooterSocialLink;

package/src/components/Footer/README.md

@@ -0,0 +1,261 @@
+# Footer Component
+
+A comprehensive footer component with multiple layout options, social links, newsletter signup, and responsive design.
+
+## Features
+
+- **Multiple Layouts**: Columns, centered, minimal, and stacked layouts
+- **Social Media Integration**: Built-in support for 20+ social platforms
+- **Newsletter Signup**: Optional newsletter subscription form
+- **Responsive Design**: Mobile-first with collapsible sections
+- **Back to Top**: Optional smooth scroll to top functionality
+- **Accessibility**: WCAG 2.1 AA compliant with proper ARIA attributes
+- **Theme Support**: Multiple color variants and dark mode
+- **Sticky Footer**: Optional sticky positioning
+
+## Usage
+
+### Basic Footer
+
+```tsx
+import { Footer, FooterSection, FooterLink } from '@shohojdhara/atomix';
+
+<Footer
+  brand="My Company"
+  copyright="© 2024 My Company. All rights reserved."
+  socialLinks={[
+    { platform: 'twitter', url: 'https://twitter.com/company' },
+    { platform: 'facebook', url: 'https://facebook.com/company' }
+  ]}
+>
+  <FooterSection title="Products">
+    <FooterLink href="/product1">Product 1</FooterLink>
+    <FooterLink href="/product2">Product 2</FooterLink>
+  </FooterSection>
+  
+  <FooterSection title="Company">
+    <FooterLink href="/about">About Us</FooterLink>
+    <FooterLink href="/contact">Contact</FooterLink>
+  </FooterSection>
+</Footer>
+```
+
+### With Newsletter
+
+```tsx
+<Footer
+  brand="My Company"
+  copyright="© 2024 My Company. All rights reserved."
+  showNewsletter
+  newsletterTitle="Stay Updated"
+  newsletterDescription="Get the latest updates delivered to your inbox."
+  onNewsletterSubmit={(email) => console.log('Newsletter signup:', email)}
+>
+  {/* Footer sections */}
+</Footer>
+```
+
+### Collapsible Sections (Mobile)
+
+```tsx
+<FooterSection title="Products" collapsible defaultCollapsed>
+  <FooterLink href="/product1">Product 1</FooterLink>
+  <FooterLink href="/product2">Product 2</FooterLink>
+</FooterSection>
+```
+
+## Props
+
+### Footer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `brand` | `ReactNode` | - | Brand name or logo |
+| `brandLogo` | `string \| ReactNode` | - | Brand logo (image URL or React element) |
+| `brandDescription` | `ReactNode` | - | Brand description text |
+| `copyright` | `ReactNode` | - | Copyright text |
+| `layout` | `'columns' \| 'centered' \| 'minimal' \| 'stacked'` | `'columns'` | Footer layout variant |
+| `variant` | `ThemeColor` | `'primary'` | Color variant |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
+| `showNewsletter` | `boolean` | `false` | Whether to show newsletter signup |
+| `newsletterTitle` | `string` | `'Stay Updated'` | Newsletter section title |
+| `newsletterDescription` | `string` | - | Newsletter section description |
+| `newsletterPlaceholder` | `string` | `'Enter your email'` | Newsletter input placeholder |
+| `newsletterButtonText` | `string` | `'Subscribe'` | Newsletter submit button text |
+| `onNewsletterSubmit` | `(email: string) => void` | - | Newsletter submit handler |
+| `socialLinks` | `SocialLink[]` | `[]` | Social media links |
+| `showBackToTop` | `boolean` | `false` | Whether to show back to top button |
+| `backToTopText` | `string` | `'Back to Top'` | Back to top button text |
+| `onBackToTop` | `() => void` | - | Back to top click handler |
+| `showDivider` | `boolean` | `true` | Whether to show divider above bottom section |
+| `sticky` | `boolean` | `false` | Whether footer should be sticky |
+
+### FooterSection Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `ReactNode` | - | Section title |
+| `icon` | `ReactNode` | - | Section icon |
+| `collapsible` | `boolean` | `false` | Whether section is collapsible on mobile |
+| `defaultCollapsed` | `boolean` | `false` | Whether section is collapsed by default |
+| `children` | `ReactNode` | - | Section content |
+
+### FooterLink Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `href` | `string` | - | Link URL |
+| `icon` | `ReactNode` | - | Link icon |
+| `external` | `boolean` | `false` | Whether link opens in new tab |
+| `active` | `boolean` | `false` | Whether link is active |
+| `disabled` | `boolean` | `false` | Whether link is disabled |
+| `onClick` | `(event: MouseEvent) => void` | - | Link click handler |
+| `LinkComponent` | `React.ElementType` | - | Custom link component (e.g., React Router Link) |
+
+### Social Link Configuration
+
+```tsx
+interface SocialLink {
+  platform: SocialPlatform;
+  url: string;
+  icon?: ReactNode; // Custom icon override
+  label?: string;   // Custom accessibility label
+}
+```
+
+### Supported Social Platforms
+
+- `facebook`, `twitter`, `instagram`, `linkedin`
+- `youtube`, `github`, `discord`, `tiktok`
+- `pinterest`, `snapchat`, `whatsapp`, `telegram`
+- `reddit`, `twitch`, `spotify`, `dribbble`
+- `behance`, `medium`, `dev`, `codepen`
+- `custom` (for custom platforms with custom icons)
+
+## Layout Variants
+
+### Columns (Default)
+```tsx
+<Footer layout="columns">
+  {/* Sections arranged in responsive columns */}
+</Footer>
+```
+
+### Centered
+```tsx
+<Footer layout="centered">
+  {/* All content centered */}
+</Footer>
+```
+
+### Minimal
+```tsx
+<Footer layout="minimal" size="sm">
+  {/* Compact footer with minimal spacing */}
+</Footer>
+```
+
+### Stacked
+```tsx
+<Footer layout="stacked">
+  {/* Sections stacked vertically */}
+</Footer>
+```
+
+## Styling
+
+The Footer component uses CSS custom properties for theming:
+
+```css
+.c-footer {
+  --atomix-footer-bg: var(--atomix-surface);
+  --atomix-footer-color: var(--atomix-text);
+  --atomix-footer-padding-y: 3rem;
+  --atomix-footer-container-max-width: 1200px;
+}
+```
+
+### Custom Styling
+
+```scss
+.c-footer {
+  &--custom {
+    --atomix-footer-bg: #1a1a1a;
+    --atomix-footer-color: #ffffff;
+    
+    .c-footer__brand-name h3 {
+      color: #00ff88;
+    }
+  }
+}
+```
+
+## Accessibility
+
+- Semantic HTML structure with proper `<footer>` element
+- ARIA attributes for collapsible sections
+- Keyboard navigation support
+- Screen reader friendly
+- Focus management
+- High contrast support
+
+## Responsive Behavior
+
+- **Mobile**: Sections stack vertically, optional collapsible sections
+- **Tablet**: Responsive grid layout
+- **Desktop**: Multi-column layout with proper spacing
+
+## Examples
+
+### Complete Footer with All Features
+
+```tsx
+<Footer
+  brand="Atomix"
+  brandLogo="/logo.png"
+  brandDescription="A modern design system for building beautiful interfaces."
+  copyright="© 2024 Atomix. All rights reserved."
+  layout="columns"
+  variant="primary"
+  size="md"
+  showNewsletter
+  newsletterTitle="Stay in the Loop"
+  newsletterDescription="Get updates on new components and features."
+  onNewsletterSubmit={handleNewsletterSubmit}
+  socialLinks={[
+    { platform: 'github', url: 'https://github.com/company' },
+    { platform: 'twitter', url: 'https://twitter.com/company' },
+    { platform: 'discord', url: 'https://discord.gg/company' }
+  ]}
+  showBackToTop
+  showDivider
+>
+  <FooterSection title="Products" icon="🚀">
+    <FooterLink href="/components">Components</FooterLink>
+    <FooterLink href="/templates">Templates</FooterLink>
+    <FooterLink href="/themes">Themes</FooterLink>
+  </FooterSection>
+  
+  <FooterSection title="Resources" collapsible>
+    <FooterLink href="/docs">Documentation</FooterLink>
+    <FooterLink href="/guides">Guides</FooterLink>
+    <FooterLink href="/examples">Examples</FooterLink>
+    <FooterLink href="/blog" external>Blog</FooterLink>
+  </FooterSection>
+  
+  <FooterSection title="Support">
+    <FooterLink href="/help">Help Center</FooterLink>
+    <FooterLink href="/community">Community</FooterLink>
+    <FooterLink href="/contact">Contact Us</FooterLink>
+  </FooterSection>
+</Footer>
+```
+
+## Best Practices
+
+1. **Keep it organized**: Group related links in logical sections
+2. **Limit sections**: 3-5 sections work best for readability
+3. **Use meaningful labels**: Clear, descriptive link text
+4. **Consider mobile**: Test collapsible sections on mobile devices
+5. **Accessibility first**: Always provide proper ARIA labels
+6. **Performance**: Optimize social media icons and brand logos

package/src/components/Footer/index.ts

@@ -0,0 +1,13 @@
+export { Footer, default } from './Footer';
+export { FooterSection } from './FooterSection';
+export { FooterLink } from './FooterLink';
+export { FooterSocialLink } from './FooterSocialLink';
+export type {
+  FooterProps,
+  FooterSectionProps,
+  FooterLinkProps,
+  FooterSocialLinkProps,
+  FooterLayout,
+  SocialPlatform,
+  SocialLink,
+} from '../../lib/types/components';

package/src/components/Form/Checkbox.stories.tsx

@@ -32,6 +32,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the checkbox is in indeterminate state',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Checkbox>;
 
@@ -74,3 +78,100 @@ export const WithoutLabel: Story = {
     ariaLabel: 'Checkbox without visible label',
   },
 };
+
+// Glass variant
+export const Glass: Story = {
+  args: {
+    label: 'Glass Checkbox',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox {...args} />
+    </div>
+  ),
+};
+
+// Glass with custom settings
+export const GlassCustom: Story = {
+  args: {
+    label: 'Custom Glass Checkbox',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox {...args} />
+    </div>
+  ),
+};
+
+// Glass states
+export const GlassStates: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </style>
+      <div>
+        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          Glass Checkbox States
+        </h3>
+        <div className="u-d-flex u-flex-column u-gap-3">
+          <Checkbox label="Glass Checkbox" glass />
+          <Checkbox label="Glass Checked" checked glass />
+          <Checkbox label="Glass Disabled" disabled glass />
+          <Checkbox label="Glass Disabled and Checked" disabled checked glass />
+          <Checkbox label="Glass Valid" valid checked glass />
+          <Checkbox label="Glass Invalid" invalid glass />
+          <Checkbox label="Glass Indeterminate" indeterminate glass />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Checkbox.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CheckboxProps } from '../../lib/types/components';
 import { useCheckbox } from '../../lib/composables/useCheckbox';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Checkbox - A component for checkbox inputs
@@ -20,6 +21,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   indeterminate = false,
   ariaLabel,
   ariaDescribedBy,
+  glass,
 }) => {
   const { generateCheckboxClass, checkboxRef } = useCheckbox({
     indeterminate,
@@ -29,14 +31,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   });
 
   const checkboxClass = generateCheckboxClass({
-    className,
+    className: `${className} ${glass ? 'c-checkbox--glass' : ''}`.trim(),
     disabled,
     invalid,
     valid,
     indeterminate,
   });
 
-  return (
+  const checkboxContent = (
     <div className={checkboxClass}>
       <input
         ref={checkboxRef}
@@ -60,6 +62,28 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       )}
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for checkboxes
+    const defaultGlassProps = {
+      displacementScale: 40,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.3,
+      cornerRadius: 6,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {checkboxContent}
+      </AtomixGlass>
+    );
+  }
+
+  return checkboxContent;
 };
 
 export type { CheckboxProps };