@shohojdhara/atomix 0.3.2 → 0.3.4

package/src/lib/utils/componentUtils.ts

@@ -0,0 +1,163 @@
+/**
+ * Component Utilities
+ * 
+ * Helper functions for component development with the new customization system
+ */
+
+import React from 'react';
+import type { PartStyleProps } from '../types/partProps';
+import { cssVarsToStyle } from '../theme/cssVariableMapper';
+
+/**
+ * Merge multiple class names
+ */
+export function mergeClassNames(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Apply part styles to element props
+ */
+export function applyPartStyles<T extends { className?: string; style?: React.CSSProperties }>(
+  baseProps: T,
+  partStyles?: PartStyleProps
+): T {
+  if (!partStyles) return baseProps;
+
+  return {
+    ...baseProps,
+    className: mergeClassNames(baseProps.className, partStyles.className),
+    style: { ...baseProps.style, ...partStyles.style },
+  };
+}
+
+/**
+ * Create style object from CSS variables
+ */
+export function createCSSVarStyle(
+  cssVars?: Record<string, string | number>,
+  baseStyle?: React.CSSProperties
+): React.CSSProperties {
+  if (!cssVars) return baseStyle || {};
+  
+  const varStyle = cssVarsToStyle(cssVars);
+  return { ...varStyle, ...baseStyle };
+}
+
+/**
+ * Merge component props with customization
+ */
+export interface MergePropsOptions {
+  className?: string;
+  style?: React.CSSProperties;
+  cssVars?: Record<string, string | number>;
+  parts?: Record<string, PartStyleProps>;
+}
+
+export function mergeComponentProps<T extends { className?: string; style?: React.CSSProperties }>(
+  baseProps: T,
+  customization: MergePropsOptions
+): T {
+  const { className, style, cssVars, parts } = customization;
+
+  // Merge CSS variables into style
+  const cssVarStyle = cssVars ? cssVarsToStyle(cssVars) : {};
+
+  return {
+    ...baseProps,
+    className: mergeClassNames(baseProps.className, className),
+    style: {
+      ...cssVarStyle,
+      ...baseProps.style,
+      ...style,
+    },
+  };
+}
+
+/**
+ * Get part styles from parts object
+ */
+export function getPartStyles(
+  parts: Record<string, PartStyleProps> | undefined,
+  partName: string
+): PartStyleProps | undefined {
+  return parts?.[partName];
+}
+
+/**
+ * Create element props with part styles
+ */
+export function createPartProps<T extends { className?: string; style?: React.CSSProperties }>(
+  baseClassName: string,
+  partStyles?: PartStyleProps,
+  additionalProps?: Partial<T>
+): T {
+  return {
+    ...additionalProps,
+    className: mergeClassNames(baseClassName, partStyles?.className),
+    style: { ...partStyles?.style, ...(additionalProps as any)?.style },
+  } as T;
+}
+
+/**
+ * Check if component has customization
+ */
+export function hasCustomization(props: {
+  parts?: any;
+  cssVars?: any;
+  slots?: any;
+}): boolean {
+  return Boolean(props.parts || props.cssVars || props.slots);
+}
+
+/**
+ * Create data attributes for debugging
+ */
+export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
+  if (process.env.NODE_ENV !== 'development') return {};
+  
+  return {
+    'data-component': componentName,
+    ...(variant && { 'data-variant': variant }),
+  };
+}
+
+/**
+ * Generate a UUID v4
+ */
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Check if a URL is a YouTube URL
+ */
+export function isYouTubeUrl(url: string): boolean {
+  const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+  return youtubeRegex.test(url);
+}
+
+/**
+ * Extract YouTube video ID from URL
+ */
+export function extractYouTubeId(url: string): string | null {
+  if (!isYouTubeUrl(url)) return null;
+  
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/.*[?&]v=([^&\n?#]+)/,
+  ];
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+  
+  return null;
+}

package/src/lib/utils/index.ts

@@ -1,61 +1,21 @@
-// Export DOM utilities
-export * from './dom';
-
-// Export other utilities as needed
-
-// Export icon utilities
-export * from './icons';
-
-import classNames from 'classnames';
-
 /**
- * Class name utility function to conditionally join classNames together.
- * This is a wrapper around the 'classnames' library and supports all its features:
- * - Strings and numbers
- * - Arrays (including nested arrays)
- * - Objects (keys are class names, values are truthy/falsy conditions)
- * - Mixed types
- *
- * @example
- * cn('foo', 'bar'); // 'foo bar'
- * cn('foo', { bar: true }); // 'foo bar'
- * cn({ 'foo-bar': true }); // 'foo-bar'
- * cn(['foo', { bar: true }]); // 'foo bar'
+ * Utility Functions Exports
  */
-export function cn(...args: any[]): string {
-  return classNames(...args);
-}
 
-/**
- * Generate a UUID v4 compatible string without relying on Node.js crypto
- * This is a browser-compatible alternative to the uuid package
- * @returns A UUID v4 compatible string
- */
-export function generateUUID(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
+export {
+  mergeClassNames,
+  applyPartStyles,
+  createCSSVarStyle,
+  mergeComponentProps,
+  getPartStyles,
+  createPartProps,
+  hasCustomization,
+  createDebugAttrs,
+  generateUUID,
+  isYouTubeUrl,
+  extractYouTubeId,
+} from './componentUtils';
 
-/**
- * Extract YouTube video ID from various YouTube URL formats
- * @param url - YouTube URL
- * @returns YouTube video ID or null if not found
- */
-export function extractYouTubeId(url: string): string | null {
-  const regex =
-    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
-  const match = url.match(regex);
-  return match ? (match[1] as string) : null;
-}
-
-/**
- * Check if a URL is a YouTube URL
- * @param url - URL to check
- * @returns True if the URL is a YouTube URL
- */
-export function isYouTubeUrl(url: string): boolean {
-  return /(?:youtube\.com|youtu\.be)/.test(url);
-}
+export type {
+  MergePropsOptions,
+} from './componentUtils';

package/src/styles/01-settings/_settings.colors.scss

@@ -12,16 +12,16 @@ $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
 // Primitives Primary Colors
-$primary-1: #f2e8fd !default;
-$primary-2: #e4d0fa !default;
-$primary-3: #d0b2f5 !default;
-$primary-4: #b88cef !default;
-$primary-5: #9c63e9 !default;
-$primary-6: #7c3aed !default; // Balanced primary purple
-$primary-7: #6425ca !default;
-$primary-8: #501ba6 !default;
-$primary-9: #3c1583 !default;
-$primary-10: #2a0e60 !default;
+$primary-1: #fff9e6 !default;
+$primary-2: #fff4cc !default; 
+$primary-3: #ffe699 !default; 
+$primary-4: #ffd966 !default; 
+$primary-5: #ffcc33 !default; 
+$primary-6: #ffb800 !default; // Balanced primary - main brand color (WCAG AA compliant)
+$primary-7: #e6a600 !default; 
+$primary-8: #cc9400 !default; 
+$primary-9: #b38200 !default; 
+$primary-10: #997000 !default; 
 
 // Primitives Red Colors
 $red-1: #fef2f2 !default;

package/src/styles/01-settings/_settings.navbar.scss

@@ -24,7 +24,7 @@ $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
 
 // Mobile toggler
-$navbar-toggler-size: 30px !default;
+$navbar-toggler-size: 2rem !default; 
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;

package/src/styles/01-settings/_settings.tooltip.scss

@@ -11,7 +11,7 @@ $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 
 $tooltip-font-size: typography.$font-size-xs !default;
 $tooltip-font-weight: typography.$font-weight-normal !default;
-$tooltip-color: var(--#{config.$prefix}invert-text) !default;
+$tooltip-color: var(--#{config.$prefix}body-bg) !default;
 
 $tooltip-border-radius: borderRadius.$border-radius !default;
 $tooltip-border-width: null !default;

package/src/styles/03-generic/_generated-root.css

@@ -0,0 +1,5 @@
+/* AUTO-GENERATED - DO NOT EDIT MANUALLY */
+
+:root {
+  --atomix-colors-primary-main: #3b82f6;
+}

package/src/styles/06-components/_components.navbar.scss

@@ -48,6 +48,12 @@
     max-width: var(--#{$prefix}navbar-container-max-width);
     padding: 0 var(--#{$prefix}navbar-padding-x);
     margin: 0 auto;
+    gap: var(--#{$prefix}navbar-padding-x);
+
+    @include media.media-down('md') {
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+    }
   }
 
   // 3. Element Styles (BEM Elements)
@@ -72,6 +78,7 @@
   }
 
   &__toggler {
+    position: relative;
     display: none;
     align-items: center;
     justify-content: center;
@@ -99,17 +106,13 @@
 
     &-icon {
       position: relative;
-      display: inline-block;
-      width: 1.5em;
-      height: 1.5em;
-      vertical-align: middle;
 
       &::before,
       &::after,
       & {
         position: absolute;
         height: 2px;
-        width: 100%;
+        width: var(--#{$prefix}navbar-toggler-size);
         background-color: var(--#{$prefix}navbar-toggler-color);
         border-radius: 1px;
         transition: transform 0.15s ease;
@@ -228,6 +231,10 @@
       #{$root}__collapse {
         display: flex !important;
       }
+
+      #{$root}__toggler {
+        display: none !important;
+      }
     }
   }
 

package/src/styles/06-components/_components.tooltip.scss

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.background' as *;
+@use '../01-settings/settings.z-layers' as *;
 
 .c-tooltip {
   $root: &;
@@ -20,59 +21,14 @@
   --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
   --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
   --#{$prefix}tooltip-offset: #{rem($tooltip-arrow-size)}; // Default offset
+  --#{$prefix}z-index-tooltip: #{$z-index-tooltip};
 
   position: absolute;
   width: max-content;
   height: max-content;
   max-width: var(--#{$prefix}tooltip-max-width);
   pointer-events: none; // Wrapper shouldn't block clicks, but content might
-  z-index: 1000;
-
-  // Base positioning logic
-  &--top,
-  &--top-left,
-  &--top-right {
-    bottom: calc(100% + var(--#{$prefix}tooltip-offset));
-    transform-origin: bottom center;
-  }
-
-  &--bottom,
-  &--bottom-left,
-  &--bottom-right {
-    top: calc(100% + var(--#{$prefix}tooltip-offset));
-    transform-origin: top center;
-  }
-
-  &--left {
-    right: calc(100% + var(--#{$prefix}tooltip-offset));
-    top: 50%;
-    transform: translateY(-50%);
-    transform-origin: right center;
-  }
-
-  &--right {
-    left: calc(100% + var(--#{$prefix}tooltip-offset));
-    top: 50%;
-    transform: translateY(-50%);
-    transform-origin: left center;
-  }
-
-  // Horizontal alignment for top/bottom
-  &--top,
-  &--bottom {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &--top-left,
-  &--bottom-left {
-    left: 0;
-  }
-
-  &--top-right,
-  &--bottom-right {
-    right: 0;
-  }
+  z-index: var(--#{$prefix}z-index-tooltip);
 
   &__content {
     position: relative;
@@ -106,50 +62,44 @@
     position: absolute;
     width: var(--#{$prefix}tooltip-arrow-size);
     height: var(--#{$prefix}tooltip-arrow-size);
+    border-radius: calc(
+      (var(--#{$prefix}tooltip-arrow-size) - var(--#{$prefix}tooltip-border-radius)) / 2
+    );
     @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
     transform: rotate(45deg);
   }
 
-  // Arrow positioning
-  &--top &__arrow,
-  &--top-left &__arrow,
-  &--top-right &__arrow {
-    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-  }
-
-  &--bottom &__arrow,
-  &--bottom-left &__arrow,
-  &--bottom-right &__arrow {
-    top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-  }
-
-  &--left &__arrow {
-    right: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-  }
-
+  &--left &__arrow,
   &--right &__arrow {
-    left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
+    transform: rotate(45deg);
   }
 
-  // Arrow horizontal alignment
-  &--top &__arrow,
-  &--bottom &__arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
+  &--top &__arrow {
+    transform: rotate(45deg);
   }
 
-  &--top-left &__arrow,
-  &--bottom-left &__arrow {
-    left: var(--#{$prefix}tooltip-arrow-size);
+  &--bottom &__arrow {
+    transform: rotate(225deg);
   }
 
-  &--top-right &__arrow,
-  &--bottom-right &__arrow {
-    right: var(--#{$prefix}tooltip-arrow-size);
+  &--glass {
+    z-index: unset;
+    #{$root}__content {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.4
+      );
+    }
+    #{$root}__arrow {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.4
+      );
+      clip-path: polygon(0 100%, 100% 100%, 100% 0);
+      backdrop-filter: var(--atomix-glass-container-backdrop);
+    }
   }
-}
+}