@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,168 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-<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

@@ -1,258 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

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