@shohojdhara/atomix 0.3.13 → 0.3.14

package/src/components/Toggle/Toggle.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { TOGGLE } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
-import { AtomixGlassProps } from '../../lib/types/components';
+import { AtomixGlassProps, BaseComponentProps } from '../../lib/types/components';
 
-export interface ToggleProps {
+export interface ToggleProps extends BaseComponentProps {
   /**
-   * Whether the toggle is initially on
+   * Whether the toggle is checked (controlled)
    */
-  initialOn?: boolean;
+  checked?: boolean;
 
   /**
-   * Callback when the toggle is turned on
+   * Whether the toggle is initially checked (uncontrolled)
+   * @default false
    */
-  onToggleOn?: () => void;
+  defaultChecked?: boolean;
 
   /**
-   * Callback when the toggle is turned off
+   * Callback when the toggle state changes
    */
-  onToggleOff?: () => void;
+  onChange?: (checked: boolean) => void;
 
   /**
    * Whether the toggle is disabled
@@ -25,14 +26,14 @@ export interface ToggleProps {
   disabled?: boolean;
 
   /**
-   * Additional CSS class for the toggle
+   * Accessibility label
    */
-  className?: string;
+  'aria-label'?: string;
 
   /**
-   * Inline style for the component
+   * Accessibility description
    */
-  style?: React.CSSProperties;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect for the toggle
@@ -45,29 +46,36 @@ export interface ToggleProps {
  * Toggle component for switching between two states
  */
 export const Toggle: React.FC<ToggleProps> = ({
-  initialOn = false,
-  onToggleOn,
-  onToggleOff,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
   disabled = false,
   className = '',
   style,
   glass,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
 }) => {
-  const [isOn, setIsOn] = useState(initialOn);
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  // Sync internal state with defaultChecked if it changes (standard uncontrolled behavior)
+  // Actually, standard behavior is only using defaultChecked on mount, but sometimes syncing is needed.
+  // For now, let's keep it simple.
 
   // Handle toggle click
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     if (disabled) return;
 
-    const newState = !isOn;
-    setIsOn(newState);
+    const nextChecked = !isChecked;
 
-    if (newState) {
-      if (onToggleOn) onToggleOn();
-    } else {
-      if (onToggleOff) onToggleOff();
+    if (!isControlled) {
+      setInternalChecked(nextChecked);
     }
-  };
+
+    onChange?.(nextChecked);
+  }, [disabled, isChecked, isControlled, onChange]);
 
   // Handle key down events
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -79,16 +87,25 @@ export const Toggle: React.FC<ToggleProps> = ({
     }
   };
 
+  const toggleClass = [
+    'c-toggle',
+    isChecked && TOGGLE.CLASSES.IS_ON,
+    disabled && 'is-disabled',
+    className,
+  ].filter(Boolean).join(' ');
+
   const toggleContent = (
     <div
-      className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
+      className={toggleClass}
       style={style}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       role="switch"
-      aria-checked={isOn}
+      aria-checked={isChecked}
       tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
     >
       <div className="c-toggle__switch"></div>
     </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -132,7 +132,7 @@ export const Tooltip: React.FC<TooltipProps> = memo(({
 
   return (
     <div
-      className="u-position-relative u-d-inline-block"
+      className="u-position-relative u-inline-block"
       style={style}
       {...wrapperProps}
     >

package/src/layouts/Grid/Grid.stories.tsx

@@ -59,8 +59,8 @@ const DemoCard: React.FC<{
         variant === 'secondary' ? 'u-bg-success-subtle' : ''
       } ${variant === 'accent' ? 'u-bg-info-subtle' : ''}`}
     >
-      <div className="u-d-flex u-flex-column u-h-100" style={{ minHeight: heightStyles[height] }}>
-        <div className="u-flex-grow-1 u-d-flex u-align-items-center u-justify-content-center">
+      <div className="u-flex u-flex-column u-h-100" style={{ minHeight: heightStyles[height] }}>
+        <div className="u-flex-grow-1 u-flex u-items-center u-justify-center">
           <div className="u-text-center">{children}</div>
         </div>
       </div>
@@ -71,7 +71,7 @@ const DemoCard: React.FC<{
 const CodeSnippet: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <Card className="u-mb-4">
     <pre
-      className="u-bg-dark u-text-light u-p-3 u-rounded u-fs-sm u-fw-normal u-overflow-auto"
+      className="u-bg-dark u-text-light u-p-3 u-rounded u-text-sm u-font-normal u-overflow-auto"
       style={{ fontFamily: 'monospace' }}
     >
       {children}
@@ -90,7 +90,7 @@ export const GettingStarted: Story = {
     <div className="u-mb-8">
       <div className="u-mb-6">
         <h1 className="u-mb-3 u-text-brand-emphasis">Grid System</h1>
-        <p className="u-mb-4 u-text-secondary-emphasis u-fs-lg">
+        <p className="u-mb-4 u-text-secondary-emphasis u-text-lg">
           A responsive 12-column grid system for creating flexible layouts.
         </p>
         <Callout variant="info" className="u-mb-4">
@@ -181,20 +181,20 @@ export const LayoutPatterns: Story = {
         <Grid className="u-mb-4">
           <GridCol xs={12} md={3}>
             <DemoCard variant="accent" height="lg">
-              <div className="u-fs-lg u-fw-bold">Sidebar</div>
-              <div className="u-fs-sm u-mt-2">Navigation, filters, etc.</div>
+              <div className="u-text-lg u-font-bold">Sidebar</div>
+              <div className="u-text-sm u-mt-2">Navigation, filters, etc.</div>
             </DemoCard>
           </GridCol>
           <GridCol xs={12} md={9}>
             <DemoCard height="lg">
-              <div className="u-fs-lg u-fw-bold">Main Content</div>
-              <div className="u-fs-sm u-mt-2">Primary content area</div>
+              <div className="u-text-lg u-font-bold">Main Content</div>
+              <div className="u-text-sm u-mt-2">Primary content area</div>
             </DemoCard>
           </GridCol>
         </Grid>
 
         <Card className="u-mb-6">
-          <div className="u-d-flex u-flex-wrap u-gap-2">
+          <div className="u-flex u-flex-wrap u-gap-2">
             <Button variant="primary">Save Changes</Button>
             <Button variant="secondary">Cancel</Button>
           </div>
@@ -211,8 +211,8 @@ export const LayoutPatterns: Story = {
         <Grid className="u-mb-4">
           <GridCol xs={12}>
             <DemoCard variant="accent" height="md">
-              <div className="u-fs-lg u-fw-bold">Hero Section</div>
-              <div className="u-fs-sm u-mt-2">Full-width banner</div>
+              <div className="u-text-lg u-font-bold">Hero Section</div>
+              <div className="u-text-sm u-mt-2">Full-width banner</div>
             </DemoCard>
           </GridCol>
         </Grid>
@@ -220,20 +220,20 @@ export const LayoutPatterns: Story = {
         <Grid className="u-mb-4">
           <GridCol xs={12} sm={6} lg={4}>
             <DemoCard variant="secondary">
-              <div className="u-fs-md u-fw-bold">Feature 1</div>
-              <div className="u-fs-sm u-mt-2">Description of feature 1</div>
+              <div className="u-text-md u-font-bold">Feature 1</div>
+              <div className="u-text-sm u-mt-2">Description of feature 1</div>
             </DemoCard>
           </GridCol>
           <GridCol xs={12} sm={6} lg={4}>
             <DemoCard variant="secondary">
-              <div className="u-fs-md u-fw-bold">Feature 2</div>
-              <div className="u-fs-sm u-mt-2">Description of feature 2</div>
+              <div className="u-text-md u-font-bold">Feature 2</div>
+              <div className="u-text-sm u-mt-2">Description of feature 2</div>
             </DemoCard>
           </GridCol>
           <GridCol xs={12} sm={12} lg={4}>
             <DemoCard variant="secondary">
-              <div className="u-fs-md u-fw-bold">Feature 3</div>
-              <div className="u-fs-sm u-mt-2">Description of feature 3</div>
+              <div className="u-text-md u-font-bold">Feature 3</div>
+              <div className="u-text-sm u-mt-2">Description of feature 3</div>
             </DemoCard>
           </GridCol>
         </Grid>
@@ -247,8 +247,8 @@ export const LayoutPatterns: Story = {
         <Grid className="u-mb-4">
           <GridCol xs={12} md={8} offsetMd={2}>
             <DemoCard height="lg">
-              <div className="u-fs-lg u-fw-bold">Article Content</div>
-              <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">
+              <div className="u-text-lg u-font-bold">Article Content</div>
+              <div className="u-text-sm u-text-secondary-emphasis u-mt-2">
                 Centered, readable width
               </div>
             </DemoCard>
@@ -345,19 +345,19 @@ export const ColumnSizing: Story = {
           <GridCol xs={12} sm={6} md={4} lg="auto">
             <DemoCard variant="secondary">
               <div>Responsive</div>
-              <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=auto</div>
+              <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=auto</div>
             </DemoCard>
           </GridCol>
           <GridCol xs={12} sm={6} md={4} lg="auto">
             <DemoCard variant="secondary">
               <div>Responsive</div>
-              <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=auto</div>
+              <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=auto</div>
             </DemoCard>
           </GridCol>
           <GridCol xs={12} sm={12} md={4} lg="auto">
             <DemoCard variant="secondary">
               <div>Responsive</div>
-              <div className="u-fs-sm u-mt-2">xs=12, sm=12, md=4, lg=auto</div>
+              <div className="u-text-sm u-mt-2">xs=12, sm=12, md=4, lg=auto</div>
             </DemoCard>
           </GridCol>
         </Grid>
@@ -428,8 +428,8 @@ export const ColumnOffsets: Story = {
         <Grid className="u-mb-4">
           <GridCol xs={12} sm={6} offsetSm={3} md={4} offsetMd={4} lg={3} offsetLg={3}>
             <DemoCard variant="secondary">
-              <div className="u-fs-md u-fw-bold">Responsive Offsets</div>
-              <div className="u-fs-sm u-mt-2">Changes at each breakpoint</div>
+              <div className="u-text-md u-font-bold">Responsive Offsets</div>
+              <div className="u-text-sm u-mt-2">Changes at each breakpoint</div>
             </DemoCard>
           </GridCol>
         </Grid>
@@ -457,8 +457,8 @@ export const Containers: Story = {
 
         <Container className="u-mb-4">
           <DemoCard variant="accent" height="md">
-            <div className="u-fs-lg u-fw-bold">Default Container</div>
-            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">
+            <div className="u-text-lg u-font-bold">Default Container</div>
+            <div className="u-text-sm u-text-secondary-emphasis u-mt-2">
               Responsive max-width, centered
             </div>
           </DemoCard>
@@ -474,8 +474,8 @@ export const Containers: Story = {
 
         <Container type="fluid" className="u-mb-4">
           <DemoCard variant="secondary" height="md">
-            <div className="u-fs-lg u-fw-bold">Fluid Container</div>
-            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">Full viewport width</div>
+            <div className="u-text-lg u-font-bold">Fluid Container</div>
+            <div className="u-text-sm u-text-secondary-emphasis u-mt-2">Full viewport width</div>
           </DemoCard>
         </Container>
       </div>
@@ -549,7 +549,7 @@ export const AlignmentAndSpacing: Story = {
         </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">justify-content="start"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="start"</h3>
           <Row justifyContent="start" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -561,7 +561,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">justify-content="center"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="center"</h3>
           <Row justifyContent="center" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -573,7 +573,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
             justify-content="between"
           </h3>
           <Row justifyContent="between" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
@@ -587,7 +587,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">justify-content="around"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="around"</h3>
           <Row justifyContent="around" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -607,7 +607,7 @@ export const AlignmentAndSpacing: Story = {
         </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">align-items="start"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">align-items="start"</h3>
           <Row
             alignItems="start"
             className="u-mb-4 u-bg-brand-subtle u-rounded u-p-3"
@@ -626,7 +626,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">align-items="center"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">align-items="center"</h3>
           <Row
             alignItems="center"
             className="u-mb-4 u-bg-brand-subtle u-rounded u-p-3"
@@ -645,7 +645,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">align-items="end"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">align-items="end"</h3>
           <Row
             alignItems="end"
             className="u-mb-4 u-bg-brand-subtle u-rounded u-p-3"
@@ -670,7 +670,7 @@ export const AlignmentAndSpacing: Story = {
         <p className="u-mb-4 u-text-secondary-emphasis">Remove spacing between columns:</p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">With gutters (default)</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">With gutters (default)</h3>
           <Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={4}>
               <DemoCard variant="secondary">Column 1</DemoCard>
@@ -685,7 +685,7 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">No gutters</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">No gutters</h3>
           <Row noGutters className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={4}>
               <DemoCard variant="accent">Column 1</DemoCard>
@@ -867,38 +867,38 @@ export const BreakpointReference: Story = {
       <Grid className="u-mb-6">
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 1</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 1</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 2</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 2</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 3</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 3</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 4</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 4</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 5</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 5</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
         <GridCol xs={12} sm={6} md={4} lg={3} xl={2}>
           <DemoCard variant="secondary">
-            <div className="u-fw-bold">Column 6</div>
-            <div className="u-fs-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
+            <div className="u-font-bold">Column 6</div>
+            <div className="u-text-sm u-mt-2">xs=12, sm=6, md=4, lg=3, xl=2</div>
           </DemoCard>
         </GridCol>
       </Grid>

package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx

@@ -275,7 +275,7 @@ export const ProgressiveImageLoading: Story = {
           <h4 className="u-mb-2">Loading Progress</h4>
           {totalCount > 0 && (
             <div className="u-mb-2">
-              <div className="u-d-flex u-justify-content-between u-mb-1">
+              <div className="u-flex u-justify-between u-mb-1">
                 <span>
                   Loading images: {loadedCount} of {totalCount}
                 </span>
@@ -356,7 +356,7 @@ export const MixedContent: Story = {
           <div className="u-p-4 u-border u-rounded u-bg-brand-subtle u-h-100">
             <h4 className="u-mb-3">Custom Content</h4>
             <p>This is a custom content block using utility classes.</p>
-            <div className="u-d-flex u-justify-content-between u-mt-3">
+            <div className="u-flex u-justify-between u-mt-3">
               <span className="u-badge u-badge-primary">New</span>
               <span className="u-badge u-badge-secondary">Featured</span>
             </div>

package/src/lib/composables/useAccordion.ts

@@ -59,10 +59,19 @@ export function useAccordion(
    */
   const toggle = (): void => {
     if (!defaultProps.disabled) {
-      if (isControlled) {
-        defaultProps.onOpenChange && defaultProps.onOpenChange(!isOpen);
+      const nextOpen = !isOpen;
+
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+
+      defaultProps.onOpenChange?.(nextOpen);
+
+      // Call legacy handlers
+      if (nextOpen) {
+        defaultProps.onOpen?.();
       } else {
-        setInternalOpen(prev => !prev);
+        defaultProps.onClose?.();
       }
     }
   };

package/src/lib/composables/useBreadcrumb.ts

@@ -5,7 +5,7 @@ interface BreadcrumbOptions {
   items: BreadcrumbItem[];
   divider?: React.ReactNode;
   className?: string;
-  ariaLabel?: string;
+  'aria-label'?: string;
 }
 
 /**
@@ -19,7 +19,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
     items: [],
     divider: BREADCRUMB.DEFAULTS.DIVIDER,
     className: '',
-    ariaLabel: 'Breadcrumb',
+    'aria-label': 'Breadcrumb',
     ...initialOptions,
   };
 

package/src/lib/composables/useCallout.ts

@@ -9,8 +9,8 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
   // Default callout properties
   const defaultProps: Partial<CalloutProps> = {
     variant: 'primary',
-    oneLine: false,
-    toast: false,
+    compact: false,
+    isToast: false,
     glass: false,
     ...initialProps,
   };
@@ -23,18 +23,18 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
   const generateCalloutClass = (props: Partial<CalloutProps>): string => {
     const {
       variant = defaultProps.variant,
-      oneLine = defaultProps.oneLine,
-      toast = defaultProps.toast,
+      compact = defaultProps.compact,
+      isToast = defaultProps.isToast,
       glass = defaultProps.glass,
       className = '',
     } = props;
 
-    const oneLineClass = oneLine ? 'c-callout--oneline' : '';
-    const toastClass = toast ? 'c-callout--toast' : '';
+    const compactClass = compact ? 'c-callout--compact' : '';
+    const toastClass = isToast ? 'c-callout--toast' : '';
     const variantClass = variant ? `c-callout--${variant}` : '';
     const glassClass = glass ? 'c-callout--glass' : '';
 
-    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${glassClass} ${className}`.trim();
+    return `c-callout ${variantClass} ${compactClass} ${toastClass} ${glassClass} ${className}`.trim();
   };
 
   /**

package/src/lib/composables/useNavbar.ts

@@ -17,7 +17,7 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
     backdrop: false,
     closeOnOutsideClick: true,
     closeOnEscape: true,
-    ariaLabel: 'Main navigation',
+    'aria-label': 'Main navigation',
     ...initialProps,
   };
 

package/src/lib/constants/components.ts

@@ -79,7 +79,7 @@ export const CALLOUT = {
   CLOSE_BTN_CLASS: 'c-callout__close-btn',
   VARIANT_PREFIX: 'c-callout--',
   CLASSES: {
-    ONELINE: 'c-callout--oneline',
+    COMPACT: 'c-callout--compact',
     TOAST: 'c-callout--toast',
     HIDE: 'is-hide',
   },

package/src/lib/storybook/InteractiveDemo.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+interface ControlOption {
+  type: 'select' | 'slider' | 'text' | 'checkbox';
+  label: string;
+  value: any;
+  onChange: (value: any) => void;
+  options?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+interface InteractiveDemoProps {
+  controls: ControlOption[];
+  children: React.ReactNode;
+}
+
+export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
+  controls,
+  children,
+}) => {
+  const renderControl = (control: ControlOption, index: number) => {
+    const baseId = `control-${index}`;
+    
+    switch (control.type) {
+      case 'select':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}
+            </label>
+            <select
+              id={baseId}
+              value={control.value}
+              onChange={(e) => control.onChange(e.target.value)}
+              className="w-full px-3 py-2 border rounded-lg"
+            >
+              {control.options?.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+        
+      case 'slider':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}: {control.value}
+            </label>
+            <input
+              id={baseId}
+              type="range"
+              min={control.min}
+              max={control.max}
+              step={control.step}
+              value={control.value}
+              onChange={(e) => control.onChange(Number(e.target.value))}
+              className="w-full"
+            />
+          </div>
+        );
+        
+      case 'text':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}
+            </label>
+            <input
+              id={baseId}
+              type="text"
+              value={control.value}
+              onChange={(e) => control.onChange(e.target.value)}
+              className="w-full px-3 py-2 border rounded-lg"
+            />
+          </div>
+        );
+        
+      case 'checkbox':
+        return (
+          <div key={baseId} className="mb-4">
+            <label className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={control.value}
+                onChange={(e) => control.onChange(e.target.checked)}
+                className="rounded"
+              />
+              <span className="text-sm font-medium">{control.label}</span>
+            </label>
+          </div>
+        );
+        
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+        {controls.map(renderControl)}
+      </div>
+      <div className="border-t pt-6">
+        {children}
+      </div>
+    </div>
+  );
+};