@semiont/react-ui 0.5.6 → 0.5.8

package/dist/integrations/css-modules-helper.d.ts

@@ -0,0 +1,118 @@
+import React from 'react';
+
+/**
+ * CSS Modules Helper for Semiont Components
+ *
+ * This helper provides utilities for integrating Semiont components
+ * with CSS Modules while preserving the data-attribute architecture.
+ */
+
+/**
+ * Creates a className builder for Semiont components with CSS Modules
+ *
+ * @param styles - The CSS Modules styles object
+ * @param baseClass - The base Semiont class name (e.g., 'semiont-button')
+ * @returns A function that builds the className string
+ */
+declare function createSemiontClassName(styles: Record<string, string>, baseClass: string): (_dataAttributes: Record<string, string | boolean | undefined>, additionalClasses?: string) => string;
+/**
+ * Helper to generate data attributes object from component props
+ *
+ * @param props - Component props
+ * @returns Data attributes object
+ */
+declare function generateDataAttributes(props: {
+    variant?: string;
+    size?: string;
+    loading?: boolean;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    orientation?: string;
+    attached?: boolean;
+    spacing?: string;
+    [key: string]: any;
+}): Record<string, string | undefined>;
+/**
+ * Merges data attributes into props object
+ *
+ * @param props - Original props
+ * @param dataAttributes - Data attributes to merge
+ * @returns Merged props object
+ */
+declare function mergeDataAttributes<T extends Record<string, any>>(props: T, dataAttributes: Record<string, string | undefined>): T;
+/**
+ * Example wrapper component for CSS Modules integration
+ *
+ * Usage:
+ * ```tsx
+ * import styles from './CustomButton.module.css';
+ * import { Button } from '@semiont/react-ui';
+ * import { withCSSModules } from '@semiont/react-ui/integrations';
+ *
+ * const CustomButton = withCSSModules(Button, styles, 'button');
+ * ```
+ */
+declare function withCSSModules<P extends {
+    className?: string;
+}>(Component: React.ComponentType<P>, styles: Record<string, string>, baseClassName: string): (props: P) => React.JSX.Element;
+/**
+ * CSS Modules configuration helper for build tools
+ *
+ * This provides the necessary configuration for CSS Modules
+ * to work with Semiont's data-attribute selectors
+ */
+declare const cssModulesConfig: {
+    postcss: {
+        plugins: {
+            postcssPlugin: string;
+            Once(root: any): void;
+        }[];
+    };
+    webpack: {
+        cssLoader: {
+            modules: {
+                localIdentName: string;
+                getLocalIdent: (_context: any, _localIdentName: string, localName: string) => string | null;
+            };
+        };
+    };
+    vite: {
+        css: {
+            modules: {
+                generateScopedName: string;
+                scopeBehaviour: "local";
+                globalModulePaths: RegExp[];
+            };
+        };
+    };
+};
+/**
+ * Type definitions for CSS Modules with Semiont components
+ */
+interface SemiontCSSModules {
+    button?: string;
+    'button-content'?: string;
+    'button-icon'?: string;
+    'button-icon-left'?: string;
+    'button-icon-right'?: string;
+    'button-spinner'?: string;
+    'button-group'?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Helper to type CSS Modules imports
+ *
+ * Usage:
+ * ```tsx
+ * import { defineCSSModules } from '@semiont/react-ui/integrations';
+ * import rawStyles from './Button.module.css';
+ *
+ * const styles = defineCSSModules<SemiontCSSModules>(rawStyles);
+ * ```
+ */
+declare function defineCSSModules<T extends SemiontCSSModules>(styles: Record<string, string>): T;
+
+export { createSemiontClassName, cssModulesConfig, defineCSSModules, generateDataAttributes, mergeDataAttributes, withCSSModules };
+export type { SemiontCSSModules };

package/dist/integrations/css-modules-helper.js

@@ -0,0 +1,117 @@
+'use client';
+import {
+  clsx
+} from "../chunk-XUDKYAVC.js";
+import "../chunk-YBGN4ACY.js";
+
+// src/integrations/css-modules-helper.tsx
+import { jsx } from "react/jsx-runtime";
+function createSemiontClassName(styles, baseClass) {
+  return function buildClassName(_dataAttributes, additionalClasses) {
+    const classes = [baseClass];
+    if (styles[baseClass]) {
+      classes.push(styles[baseClass]);
+    }
+    if (additionalClasses) {
+      classes.push(additionalClasses);
+    }
+    return clsx(...classes);
+  };
+}
+function generateDataAttributes(props) {
+  return {
+    "data-variant": props.variant,
+    "data-size": props.size,
+    "data-loading": props.loading ? "true" : void 0,
+    "data-full-width": props.fullWidth ? "true" : void 0,
+    "data-icon-only": props.iconOnly ? "true" : void 0,
+    "data-active": props.active ? "true" : void 0,
+    "data-disabled": props.disabled ? "true" : void 0,
+    "data-orientation": props.orientation,
+    "data-attached": props.attached ? "true" : void 0,
+    "data-spacing": props.attached ? void 0 : props.spacing
+  };
+}
+function mergeDataAttributes(props, dataAttributes) {
+  const merged = { ...props };
+  Object.entries(dataAttributes).forEach(([key, value]) => {
+    if (value !== void 0) {
+      merged[key] = value;
+    }
+  });
+  return merged;
+}
+function withCSSModules(Component, styles, baseClassName) {
+  return function WrappedComponent(props) {
+    const className = clsx(
+      baseClassName,
+      styles[baseClassName],
+      props.className
+    );
+    return /* @__PURE__ */ jsx(Component, { ...props, className });
+  };
+}
+var cssModulesConfig = {
+  // PostCSS config for CSS Modules
+  postcss: {
+    plugins: [
+      // Preserve data-attribute selectors
+      {
+        postcssPlugin: "preserve-data-attributes",
+        Once(root) {
+          root.walkRules((rule) => {
+            if (rule.selector.includes("[data-")) {
+              rule.selector = rule.selector.replace(
+                /\.([a-zA-Z][a-zA-Z0-9-_]*)/g,
+                (_match, className) => {
+                  return `:global(.${className})`;
+                }
+              );
+            }
+          });
+        }
+      }
+    ]
+  },
+  // Webpack config for CSS Modules
+  webpack: {
+    cssLoader: {
+      modules: {
+        // Custom naming for CSS Modules
+        localIdentName: "[name]__[local]___[hash:base64:5]",
+        // Preserve data-attribute selectors
+        getLocalIdent: (_context, _localIdentName, localName) => {
+          if (localName.startsWith("semiont-")) {
+            return localName;
+          }
+          return null;
+        }
+      }
+    }
+  },
+  // Vite config for CSS Modules
+  vite: {
+    css: {
+      modules: {
+        // Custom naming for CSS Modules
+        generateScopedName: "[name]__[local]___[hash:base64:5]",
+        // Preserve specific selectors
+        scopeBehaviour: "local",
+        // Global patterns
+        globalModulePaths: [/semiont-.*\.css$/]
+      }
+    }
+  }
+};
+function defineCSSModules(styles) {
+  return styles;
+}
+export {
+  createSemiontClassName,
+  cssModulesConfig,
+  defineCSSModules,
+  generateDataAttributes,
+  mergeDataAttributes,
+  withCSSModules
+};
+//# sourceMappingURL=css-modules-helper.js.map

package/dist/integrations/css-modules-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/integrations/css-modules-helper.tsx"],"sourcesContent":["/**\n * CSS Modules Helper for Semiont Components\n *\n * This helper provides utilities for integrating Semiont components\n * with CSS Modules while preserving the data-attribute architecture.\n */\n\nimport React from 'react';\nimport { clsx } from 'clsx';\n\n/**\n * Creates a className builder for Semiont components with CSS Modules\n *\n * @param styles - The CSS Modules styles object\n * @param baseClass - The base Semiont class name (e.g., 'semiont-button')\n * @returns A function that builds the className string\n */\nexport function createSemiontClassName(\n  styles: Record<string, string>,\n  baseClass: string\n) {\n  return function buildClassName(\n    _dataAttributes: Record<string, string | boolean | undefined>,\n    additionalClasses?: string\n  ): string {\n    const classes = [baseClass];\n\n    // Map the base class to its CSS Module equivalent if it exists\n    if (styles[baseClass]) {\n      classes.push(styles[baseClass]);\n    }\n\n    // Add any additional classes\n    if (additionalClasses) {\n      classes.push(additionalClasses);\n    }\n\n    return clsx(...classes);\n  };\n}\n\n/**\n * Helper to generate data attributes object from component props\n *\n * @param props - Component props\n * @returns Data attributes object\n */\nexport function generateDataAttributes(props: {\n  variant?: string;\n  size?: string;\n  loading?: boolean;\n  fullWidth?: boolean;\n  iconOnly?: boolean;\n  active?: boolean;\n  disabled?: boolean;\n  orientation?: string;\n  attached?: boolean;\n  spacing?: string;\n  [key: string]: any;\n}): Record<string, string | undefined> {\n  return {\n    'data-variant': props.variant,\n    'data-size': props.size,\n    'data-loading': props.loading ? 'true' : undefined,\n    'data-full-width': props.fullWidth ? 'true' : undefined,\n    'data-icon-only': props.iconOnly ? 'true' : undefined,\n    'data-active': props.active ? 'true' : undefined,\n    'data-disabled': props.disabled ? 'true' : undefined,\n    'data-orientation': props.orientation,\n    'data-attached': props.attached ? 'true' : undefined,\n    'data-spacing': props.attached ? undefined : props.spacing,\n  };\n}\n\n/**\n * Merges data attributes into props object\n *\n * @param props - Original props\n * @param dataAttributes - Data attributes to merge\n * @returns Merged props object\n */\nexport function mergeDataAttributes<T extends Record<string, any>>(\n  props: T,\n  dataAttributes: Record<string, string | undefined>\n): T {\n  const merged: Record<string, any> = { ...props };\n\n  Object.entries(dataAttributes).forEach(([key, value]) => {\n    if (value !== undefined) {\n      merged[key] = value;\n    }\n  });\n\n  return merged as T;\n}\n\n/**\n * Example wrapper component for CSS Modules integration\n *\n * Usage:\n * ```tsx\n * import styles from './CustomButton.module.css';\n * import { Button } from '@semiont/react-ui';\n * import { withCSSModules } from '@semiont/react-ui/integrations';\n *\n * const CustomButton = withCSSModules(Button, styles, 'button');\n * ```\n */\nexport function withCSSModules<P extends { className?: string }>(\n  Component: React.ComponentType<P>,\n  styles: Record<string, string>,\n  baseClassName: string\n) {\n  return function WrappedComponent(props: P) {\n    const className = clsx(\n      baseClassName,\n      styles[baseClassName],\n      props.className\n    );\n\n    return <Component {...props} className={className} />;\n  };\n}\n\n/**\n * CSS Modules configuration helper for build tools\n *\n * This provides the necessary configuration for CSS Modules\n * to work with Semiont's data-attribute selectors\n */\nexport const cssModulesConfig = {\n  // PostCSS config for CSS Modules\n  postcss: {\n    plugins: [\n      // Preserve data-attribute selectors\n      {\n        postcssPlugin: 'preserve-data-attributes',\n        Once(root: any) {\n          root.walkRules((rule: any) => {\n            // Don't hash data-attribute selectors\n            if (rule.selector.includes('[data-')) {\n              rule.selector = rule.selector.replace(\n                /\\.([a-zA-Z][a-zA-Z0-9-_]*)/g,\n                (_match: string, className: string) => {\n                  // Keep the class name but mark it as global\n                  return `:global(.${className})`;\n                }\n              );\n            }\n          });\n        },\n      },\n    ],\n  },\n\n  // Webpack config for CSS Modules\n  webpack: {\n    cssLoader: {\n      modules: {\n        // Custom naming for CSS Modules\n        localIdentName: '[name]__[local]___[hash:base64:5]',\n        // Preserve data-attribute selectors\n        getLocalIdent: (\n          _context: any,\n          _localIdentName: string,\n          localName: string\n        ) => {\n          // Don't hash Semiont base classes\n          if (localName.startsWith('semiont-')) {\n            return localName;\n          }\n          // Use default hashing for other classes\n          return null;\n        },\n      },\n    },\n  },\n\n  // Vite config for CSS Modules\n  vite: {\n    css: {\n      modules: {\n        // Custom naming for CSS Modules\n        generateScopedName: '[name]__[local]___[hash:base64:5]',\n        // Preserve specific selectors\n        scopeBehaviour: 'local' as const,\n        // Global patterns\n        globalModulePaths: [/semiont-.*\\.css$/],\n      },\n    },\n  },\n};\n\n/**\n * Type definitions for CSS Modules with Semiont components\n */\nexport interface SemiontCSSModules {\n  button?: string;\n  'button-content'?: string;\n  'button-icon'?: string;\n  'button-icon-left'?: string;\n  'button-icon-right'?: string;\n  'button-spinner'?: string;\n  'button-group'?: string;\n  [key: string]: string | undefined;\n}\n\n/**\n * Helper to type CSS Modules imports\n *\n * Usage:\n * ```tsx\n * import { defineCSSModules } from '@semiont/react-ui/integrations';\n * import rawStyles from './Button.module.css';\n *\n * const styles = defineCSSModules<SemiontCSSModules>(rawStyles);\n * ```\n */\nexport function defineCSSModules<T extends SemiontCSSModules>(\n  styles: Record<string, string>\n): T {\n  return styles as T;\n}"],"mappings":";;;;;;;AAwHW;AAvGJ,SAAS,uBACd,QACA,WACA;AACA,SAAO,SAAS,eACd,iBACA,mBACQ;AACR,UAAM,UAAU,CAAC,SAAS;AAG1B,QAAI,OAAO,SAAS,GAAG;AACrB,cAAQ,KAAK,OAAO,SAAS,CAAC;AAAA,IAChC;AAGA,QAAI,mBAAmB;AACrB,cAAQ,KAAK,iBAAiB;AAAA,IAChC;AAEA,WAAO,KAAK,GAAG,OAAO;AAAA,EACxB;AACF;AAQO,SAAS,uBAAuB,OAYA;AACrC,SAAO;AAAA,IACL,gBAAgB,MAAM;AAAA,IACtB,aAAa,MAAM;AAAA,IACnB,gBAAgB,MAAM,UAAU,SAAS;AAAA,IACzC,mBAAmB,MAAM,YAAY,SAAS;AAAA,IAC9C,kBAAkB,MAAM,WAAW,SAAS;AAAA,IAC5C,eAAe,MAAM,SAAS,SAAS;AAAA,IACvC,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC3C,oBAAoB,MAAM;AAAA,IAC1B,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC3C,gBAAgB,MAAM,WAAW,SAAY,MAAM;AAAA,EACrD;AACF;AASO,SAAS,oBACd,OACA,gBACG;AACH,QAAM,SAA8B,EAAE,GAAG,MAAM;AAE/C,SAAO,QAAQ,cAAc,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACvD,QAAI,UAAU,QAAW;AACvB,aAAO,GAAG,IAAI;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAcO,SAAS,eACd,WACA,QACA,eACA;AACA,SAAO,SAAS,iBAAiB,OAAU;AACzC,UAAM,YAAY;AAAA,MAChB;AAAA,MACA,OAAO,aAAa;AAAA,MACpB,MAAM;AAAA,IACR;AAEA,WAAO,oBAAC,aAAW,GAAG,OAAO,WAAsB;AAAA,EACrD;AACF;AAQO,IAAM,mBAAmB;AAAA;AAAA,EAE9B,SAAS;AAAA,IACP,SAAS;AAAA;AAAA,MAEP;AAAA,QACE,eAAe;AAAA,QACf,KAAK,MAAW;AACd,eAAK,UAAU,CAAC,SAAc;AAE5B,gBAAI,KAAK,SAAS,SAAS,QAAQ,GAAG;AACpC,mBAAK,WAAW,KAAK,SAAS;AAAA,gBAC5B;AAAA,gBACA,CAAC,QAAgB,cAAsB;AAErC,yBAAO,YAAY,SAAS;AAAA,gBAC9B;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,SAAS;AAAA,IACP,WAAW;AAAA,MACT,SAAS;AAAA;AAAA,QAEP,gBAAgB;AAAA;AAAA,QAEhB,eAAe,CACb,UACA,iBACA,cACG;AAEH,cAAI,UAAU,WAAW,UAAU,GAAG;AACpC,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,MAAM;AAAA,IACJ,KAAK;AAAA,MACH,SAAS;AAAA;AAAA,QAEP,oBAAoB;AAAA;AAAA,QAEpB,gBAAgB;AAAA;AAAA,QAEhB,mBAAmB,CAAC,kBAAkB;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AACF;AA2BO,SAAS,iBACd,QACG;AACH,SAAO;AACT;","names":[]}

package/dist/integrations/styled-components-theme.d.ts

@@ -0,0 +1,258 @@
+import * as styled_components from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+
+/**
+ * Semiont Design Tokens
+ *
+ * Core design tokens for the Semiont design system.
+ * These tokens provide the foundation for all component styling
+ * and can be consumed via JavaScript or CSS variables.
+ */
+declare const tokens: {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        semantic: {
+            error: string;
+            errorLight: string;
+            errorDark: string;
+            warning: string;
+            warningLight: string;
+            warningDark: string;
+            success: string;
+            successLight: string;
+            successDark: string;
+            info: string;
+            infoLight: string;
+            infoDark: string;
+        };
+        neutral: {
+            0: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            inverse: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+            inverse: string;
+        };
+    };
+    spacing: {
+        0: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    typography: {
+        fontFamily: {
+            sans: string;
+            mono: string;
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+        };
+        fontWeight: {
+            thin: number;
+            light: number;
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+            black: number;
+        };
+        lineHeight: {
+            none: number;
+            tight: number;
+            snug: number;
+            normal: number;
+            relaxed: number;
+            loose: number;
+        };
+    };
+    borderRadius: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
+    shadows: {
+        none: string;
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        inner: string;
+    };
+    transitions: {
+        duration: {
+            fast: string;
+            base: string;
+            slow: string;
+            slower: string;
+        };
+        timing: {
+            linear: string;
+            ease: string;
+            easeIn: string;
+            easeOut: string;
+            easeInOut: string;
+        };
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+};
+
+/**
+ * Semiont theme object for styled-components
+ */
+declare const semiontTheme: DefaultTheme;
+/**
+ * Type augmentation for styled-components DefaultTheme
+ */
+declare module 'styled-components' {
+    interface DefaultTheme {
+        colors: typeof tokens.colors & {
+            error: string;
+            errorLight: string;
+            errorDark: string;
+            warning: string;
+            warningLight: string;
+            warningDark: string;
+            success: string;
+            successLight: string;
+            successDark: string;
+            info: string;
+            infoLight: string;
+            infoDark: string;
+        };
+        spacing: typeof tokens.spacing;
+        typography: typeof tokens.typography;
+        borderRadius: typeof tokens.borderRadius;
+        shadows: typeof tokens.shadows;
+        transitions: typeof tokens.transitions;
+        breakpoints: typeof tokens.breakpoints;
+    }
+}
+/**
+ * CSS mixins for common component patterns
+ */
+declare const semiontMixins: {
+    /**
+     * Button base styles
+     */
+    buttonBase: styled_components.RuleSet<object>;
+    /**
+     * Button variant styles
+     */
+    buttonVariant: (variant: string) => styled_components.RuleSet<object>;
+    /**
+     * Button size styles
+     */
+    buttonSize: (size: string) => styled_components.RuleSet<object>;
+    /**
+     * Focus ring styles
+     */
+    focusRing: (color?: string) => styled_components.RuleSet<object>;
+    /**
+     * Truncate text with ellipsis
+     */
+    truncate: styled_components.RuleSet<object>;
+    /**
+     * Screen reader only
+     */
+    srOnly: styled_components.RuleSet<object>;
+    /**
+     * Responsive media query helpers
+     */
+    media: {
+        sm: (styles: any) => styled_components.RuleSet<object>;
+        md: (styles: any) => styled_components.RuleSet<object>;
+        lg: (styles: any) => styled_components.RuleSet<object>;
+        xl: (styles: any) => styled_components.RuleSet<object>;
+        '2xl': (styles: any) => styled_components.RuleSet<object>;
+    };
+};
+/**
+ * Global styles for Semiont components
+ */
+declare const SemiontGlobalStyles: styled_components.RuleSet<object>;
+/**
+ * Helper function to create styled Semiont components
+ *
+ * Usage:
+ * ```tsx
+ * import styled from 'styled-components';
+ * import { createStyledSemiontButton } from '@semiont/react-ui/integrations';
+ *
+ * const StyledButton = createStyledSemiontButton(styled);
+ * ```
+ */
+declare function createStyledSemiontButton(styled: any): any;
+
+export { SemiontGlobalStyles, createStyledSemiontButton, semiontMixins, semiontTheme };