@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/assets/fonts/HelveticaNeue/stylesheet.css

@@ -0,0 +1,181 @@
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue.eot');
+  src:
+    url('HelveticaNeue.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue.woff2') format('woff2'),
+    url('HelveticaNeue.woff') format('woff'),
+    url('HelveticaNeue.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-BoldItalic.eot');
+  src:
+    url('HelveticaNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-BoldItalic.woff2') format('woff2'),
+    url('HelveticaNeue-BoldItalic.woff') format('woff'),
+    url('HelveticaNeue-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Bold.eot');
+  src:
+    url('HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Bold.woff2') format('woff2'),
+    url('HelveticaNeue-Bold.woff') format('woff'),
+    url('HelveticaNeue-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-CondensedBlack.eot');
+  src:
+    url('HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-CondensedBlack.woff2') format('woff2'),
+    url('HelveticaNeue-CondensedBlack.woff') format('woff'),
+    url('HelveticaNeue-CondensedBlack.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Italic.eot');
+  src:
+    url('HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Italic.woff2') format('woff2'),
+    url('HelveticaNeue-Italic.woff') format('woff'),
+    url('HelveticaNeue-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-CondensedBold.eot');
+  src:
+    url('HelveticaNeue-CondensedBold.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-CondensedBold.woff2') format('woff2'),
+    url('HelveticaNeue-CondensedBold.woff') format('woff'),
+    url('HelveticaNeue-CondensedBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Light.eot');
+  src:
+    url('HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Light.woff2') format('woff2'),
+    url('HelveticaNeue-Light.woff') format('woff'),
+    url('HelveticaNeue-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-LightItalic.eot');
+  src:
+    url('HelveticaNeue-LightItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-LightItalic.woff2') format('woff2'),
+    url('HelveticaNeue-LightItalic.woff') format('woff'),
+    url('HelveticaNeue-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Thin.eot');
+  src:
+    url('HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Thin.woff2') format('woff2'),
+    url('HelveticaNeue-Thin.woff') format('woff'),
+    url('HelveticaNeue-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Medium.eot');
+  src:
+    url('HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Medium.woff2') format('woff2'),
+    url('HelveticaNeue-Medium.woff') format('woff'),
+    url('HelveticaNeue-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-MediumItalic.eot');
+  src:
+    url('HelveticaNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-MediumItalic.woff2') format('woff2'),
+    url('HelveticaNeue-MediumItalic.woff') format('woff'),
+    url('HelveticaNeue-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-UltraLightItalic.eot');
+  src:
+    url('HelveticaNeue-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-UltraLightItalic.woff2') format('woff2'),
+    url('HelveticaNeue-UltraLightItalic.woff') format('woff'),
+    url('HelveticaNeue-UltraLightItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-UltraLight.eot');
+  src:
+    url('HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-UltraLight.woff2') format('woff2'),
+    url('HelveticaNeue-UltraLight.woff') format('woff'),
+    url('HelveticaNeue-UltraLight.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-ThinItalic.eot');
+  src:
+    url('HelveticaNeue-ThinItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-ThinItalic.woff2') format('woff2'),
+    url('HelveticaNeue-ThinItalic.woff') format('woff'),
+    url('HelveticaNeue-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}

package/src/assets/svgs/atomix-logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="48" viewBox="0 0 100 48">
+  <!-- Atom icon -->
+  <g transform="translate(0, 8) scale(0.06)">
+    <path fill="#7c3aed" d="M256 398.8c-11.8 5.1-23.4 9.7-34.9 13.5c16.7 33.8 31 35.7 34.9 35.7s18.1-1.9 34.9-35.7c-11.4-3.9-23.1-8.4-34.9-13.5zM446 256c33 45.2 44.3 90.9 23.6 128c-20.2 36.3-62.5 49.3-115.2 43.2c-22 52.1-55.6 84.8-98.4 84.8s-76.4-32.7-98.4-84.8c-52.7 6.1-95-6.8-115.2-43.2C21.7 346.9 33 301.2 66 256c-33-45.2-44.3-90.9-23.6-128c20.2-36.3 62.5-49.3 115.2-43.2C179.6 32.7 213.2 0 256 0s76.4 32.7 98.4 84.8c52.7-6.1 95 6.8 115.2 43.2c20.7 37.1 9.4 82.8-23.6 128zm-65.8 67.4c-1.7 14.2-3.9 28-6.7 41.2c31.8 1.4 38.6-8.7 40.2-11.7c2.3-4.2 7-17.9-11.9-48.1c-6.8 6.3-14 12.5-21.6 18.6zm-6.7-175.9c2.8 13.1 5 26.9 6.7 41.2c7.6 6.1 14.8 12.3 21.6 18.6c18.9-30.2 14.2-44 11.9-48.1c-1.6-2.9-8.4-13-40.2-11.7zM290.9 99.7C274.1 65.9 259.9 64 256 64s-18.1 1.9-34.9 35.7c11.4 3.9 23.1 8.4 34.9 13.5c11.8-5.1 23.4-9.7 34.9-13.5zm-159 88.9c1.7-14.3 3.9-28 6.7-41.2c-31.8-1.4-38.6 8.7-40.2 11.7c-2.3 4.2-7 17.9 11.9 48.1c6.8-6.3 14-12.5 21.6-18.6zM110.2 304.8C91.4 335 96 348.7 98.3 352.9c1.6 2.9 8.4 13 40.2 11.7c-2.8-13.1-5-26.9-6.7-41.2c-7.6-6.1-14.8-12.3-21.6-18.6zM336 256a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zm-80-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+  </g>
+  
+  <!-- Atomix text -->
+  <text x="32" y="32" font-size="22" font-weight="700" fill="#7c3aed">Atomix</text>
+</svg>

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+import { ACCORDION } from '../../lib/constants/components';
+
+// Extract class names without the leading dots
+const ACCORDION_CLASS = ACCORDION.SELECTORS.ACCORDION.replace('.', '');
+const HEADER_CLASS = ACCORDION.SELECTORS.HEADER.replace('.', '');
+const PANEL_CLASS = ACCORDION.SELECTORS.PANEL.replace('.', '');
+const BODY_CLASS = ACCORDION.SELECTORS.BODY.replace('.', '');
+const IS_OPEN_CLASS = ACCORDION.CLASSES.IS_OPEN;
+const IS_DISABLED_CLASS = ACCORDION.CLASSES.IS_DISABLED;
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Accordion component follows Atomix guidelines for accessibility, styling, and state. It supports both controlled and uncontrolled modes, custom icons, and full keyboard navigation.',
+      },
+    },
+  },
+  argTypes: {
+    iconPosition: {
+      control: { type: 'radio' },
+      options: ['right', 'left'],
+      description: 'Position of the icon',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Whether the accordion is initially open',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the accordion is disabled',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the accordion',
+    },
+    children: {
+      control: 'text',
+      description: 'Content inside the accordion',
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Accordion (Closed)
+export const Default: Story = {
+  args: {
+    title: 'Accordion Title',
+    children: <p>This is the content of the accordion that appears when expanded.</p>,
+  },
+};
+
+// Open Accordion
+export const Open: Story = {
+  args: {
+    title: 'Open Accordion',
+    children: <p>This accordion is open, showing its content.</p>,
+    defaultOpen: true,
+  },
+};
+
+// Disabled Accordion
+export const Disabled: Story = {
+  args: {
+    title: 'Disabled Accordion',
+    children: <p>This accordion is disabled.</p>,
+    disabled: true,
+  },
+};
+
+// Icon on Left
+export const IconLeft: Story = {
+  args: {
+    title: 'Icon on Left',
+    children: <p>This accordion has the icon on the left side.</p>,
+    iconPosition: 'left',
+  },
+};
+
+// Custom Icon
+export const CustomIcon: Story = {
+  args: {
+    title: 'Custom Icon',
+    children: <p>This accordion uses a custom plus icon.</p>,
+    icon: (
+      <i className="c-accordion__icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="16" />
+          <line x1="8" y1="12" x2="16" y2="12" />
+        </svg>
+      </i>
+    ),
+  },
+};
+
+// Accordion Group
+export const AccordionGroup: Story = {
+  args: {
+    title: 'Accordion Group',
+    children: <p>Group example - see render function</p>,
+  },
+  render: () => (
+    <div>
+      <h2>Accordion Group</h2>
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '500px' }}>
+        <Accordion title="First Accordion" defaultOpen={true}>
+          <p>Content of the first accordion.</p>
+        </Accordion>
+
+        <Accordion title="Second Accordion">
+          <p>Content of the second accordion.</p>
+        </Accordion>
+
+        <Accordion title="Third Accordion">
+          <p>Content of the third accordion with more content.</p>
+          <p>Additional paragraph to demonstrate scrolling.</p>
+          <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+        </Accordion>
+      </div>
+    </div>
+  ),
+};
+
+// All Variants
+export const AllVariants: Story = {
+  args: {
+    title: 'All Variants',
+    children: <p>See render function for all variants</p>,
+  },
+  render: () => (
+    <div>
+      <h2>All Accordion Variants</h2>
+      <div className="u-d-flex u-flex-column u-gap-5">
+        <div>
+          <h3>Default</h3>
+          <Accordion title="Default Accordion">
+            <p>This is the default accordion.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Initially Open</h3>
+          <Accordion title="Initially Open Accordion" defaultOpen={true}>
+            <p>This accordion starts in the open state.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Disabled</h3>
+          <Accordion title="Disabled Accordion" disabled={true}>
+            <p>This accordion is disabled and cannot be interacted with.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Icon on Left</h3>
+          <Accordion title="Icon on Left" iconPosition="left">
+            <p>This accordion has its icon positioned on the left.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>Custom Icon</h3>
+          <Accordion
+            title="Custom Icon"
+            icon={
+              <i className="c-accordion__icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="16" />
+                  <line x1="8" y1="12" x2="16" y2="12" />
+                </svg>
+              </i>
+            }
+          >
+            <p>This accordion uses a custom plus icon.</p>
+          </Accordion>
+        </div>
+
+        <div>
+          <h3>With Rich Content</h3>
+          <Accordion title="Rich Content">
+            <div>
+              <h4>Section Title</h4>
+              <p>
+                This accordion contains rich HTML content including headings, paragraphs, and lists.
+              </p>
+              <ul>
+                <li>
+                  List item with <a href="#">link</a>
+                </li>
+                <li>
+                  List item with <strong>bold text</strong>
+                </li>
+                <li>
+                  List item with <em>italic text</em>
+                </li>
+              </ul>
+              <div className="u-p-3 u-mt-3 u-bg-light u-border-radius-1">
+                <code>This is a code block inside the accordion</code>
+              </div>
+            </div>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Controlled Accordion
+export const Controlled: Story = {
+  args: {
+    title: 'Controlled Accordion',
+    children: <p>This accordion is controlled by external state.</p>,
+  },
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div>
+        <button className="c-btn c-btn--primary u-mb-3" onClick={() => setOpen(prev => !prev)}>
+          Toggle Accordion (Controlled)
+        </button>
+        <Accordion title="Controlled Accordion" isOpen={open} onOpenChange={setOpen}>
+          <p>This accordion is controlled by external state.</p>
+        </Accordion>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
+      },
+    },
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,131 @@
+import React, { ReactNode, useId } from 'react';
+import { ACCORDION } from '../../lib/constants/components';
+import { useAccordion } from '../../lib/composables/useAccordion';
+import { BaseComponentProps, IconPosition } from '../../lib/types/components';
+
+/**
+ * Accordion component for showing/hiding content panels
+ */
+export interface AccordionProps extends BaseComponentProps {
+  /**
+   * Title of the accordion
+   */
+  title: string;
+
+  /**
+   * Content to be shown when accordion is expanded
+   */
+  children: ReactNode;
+
+  /**
+   * Whether the accordion is initially open
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Position of the icon (right or left)
+   */
+  iconPosition?: IconPosition;
+
+  /**
+   * Custom icon for the accordion
+   */
+  icon?: ReactNode;
+
+  /**
+   * Controlled open state (overrides defaultOpen)
+   */
+  isOpen?: boolean;
+
+  /**
+   * Callback when open state changes (for controlled mode)
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  isOpen: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  iconPosition = 'right',
+  icon,
+  className = '',
+}) => {
+  // Generate unique IDs for accessibility
+  const instanceId = useId();
+  const buttonId = `accordion-header-${instanceId}`;
+  const panelId = `accordion-panel-${instanceId}`;
+
+  // Use composable hook for logic/state
+  const {
+    state,
+    toggle,
+    updatePanelHeight,
+    panelRef,
+    contentRef,
+    generateClassNames,
+    generateHeaderClassNames,
+  } = useAccordion({
+    defaultOpen,
+    disabled,
+    iconPosition,
+    isOpen: controlledOpen,
+    onOpenChange,
+  });
+
+  // Default icon
+  const defaultIcon = (
+    <i className="c-accordion__icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </i>
+  );
+
+  return (
+    <div className={generateClassNames(className)}>
+      <button
+        id={buttonId}
+        className={generateHeaderClassNames()}
+        onClick={toggle}
+        aria-expanded={state.isOpen}
+        aria-controls={panelId}
+        disabled={disabled}
+        type="button"
+      >
+        <span className="c-accordion__title">{title}</span>
+        {icon || defaultIcon}
+      </button>
+      <div
+        id={panelId}
+        className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
+        ref={panelRef}
+        role="region"
+        aria-labelledby={buttonId}
+      >
+        <div className={ACCORDION.SELECTORS.BODY.replace('.', '')} ref={contentRef}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Set display name for debugging
+Accordion.displayName = 'Accordion';
+
+// Export as default
+export default Accordion;

package/src/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export { default } from './Accordion';
+export type { AccordionProps } from './Accordion';