@nuraly/lumenui 0.1.0

package/dist/src/components/button/button.style.js

@@ -0,0 +1,535 @@
+import { css } from 'lit';
+/**
+ * Button component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-button component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const buttonStyles = css `
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    border-color: var(--nuraly-color-border);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    font-family: var(--nuraly-font-family);
+    font-size: 0.875rem;
+    font-weight: var(--nuraly-font-weight-regular);
+    line-height: 1.125rem;
+    letter-spacing: 0.16px;
+    height: 3rem;
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
+    border: 1px solid transparent;
+    border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
+    background-color: var(--nuraly-color-background);
+    color: var(--nuraly-color-text);
+    text-decoration: none;
+    cursor: pointer;
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* Reset any inherited styles that might interfere with theme switching */
+    box-shadow: none;
+    text-shadow: none;
+    
+    &:focus {
+      /* outline: var(--nuraly-focus-outline); */
+      /* outline-offset: var(--nuraly-focus-outline-offset); */
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      /* Remove generic opacity - use specific disabled colors instead */
+    }
+
+    /* Icon styling */
+    nr-icon {
+      flex-shrink: 0;
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* Better text alignment */
+      vertical-align: middle;
+      line-height: 1;
+      /* Ensure icon inherits text color */
+      color: inherit;
+      /* Override any size attribute with CSS variable */
+      font-size: var(--nuraly-button-icon-size, 1rem) !important;
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      /* Inherit cursor from button */
+      cursor: inherit;
+      /* Prevent icon from being focusable */
+      pointer-events: none;
+    }
+
+    /* Icon focus state */
+    &:focus:not(:disabled) nr-icon {
+      opacity: 1;
+      filter: brightness(1.1);
+    }
+
+    /* Icon active state */
+    &:active:not(:disabled) nr-icon {
+      opacity: 0.9;
+      transform: scale(0.95);
+    }
+
+    /* Icon hover state */
+    &:hover:not(:disabled) nr-icon {
+      opacity: 1;
+    }
+
+    /* Icon spacing - use gap for cleaner spacing */
+    gap: 0.5rem;
+    
+    /* Ensure proper alignment of content */
+    #container, [part="container"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: inherit;
+    }
+  }
+
+  /* Primary Button - Carbon Design System compliant */
+  :host([type="primary"]) button {
+    background-color: var(--nuraly-color-button-primary);
+    border-color: var(--nuraly-color-button-primary);
+    color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
+
+    /* Ensure icons inherit the white text color for primary buttons */
+    nr-icon {
+      fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
+      color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
+      --nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-primary-hover);
+      border-color: var(--nuraly-color-button-primary-hover);
+      color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-primary-active);
+      border-color: var(--nuraly-color-button-primary-active);
+      color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
+      /* outline-offset: 2px; */
+      /* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Secondary Button - Carbon Design System compliant */
+  :host([type="secondary"]) button {
+    background-color: var(--nuraly-color-button-secondary);
+    border-color: var(--nuraly-color-button-secondary);
+    color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-secondary-hover);
+      border-color: var(--nuraly-color-button-secondary-hover);
+      color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-secondary-active);
+      border-color: var(--nuraly-color-button-secondary-active);
+      color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
+      /* outline-offset: 2px; */
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Default Button - Clean white/light style with defined border */
+  :host([type="default"]) button {
+    background-color: var(--nuraly-color-background, #ffffff);
+    border-color: var(--nuraly-color-border, #d0d0d0);
+    color: var(--nuraly-color-text, #161616);
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-background-hover, #f4f4f4);
+      border-color: var(--nuraly-color-border-hover, #a8a8a8);
+      color: var(--nuraly-color-text, #161616);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-background-active, #e0e0e0);
+      border-color: var(--nuraly-color-border-active, #8d8d8d);
+      color: var(--nuraly-color-text, #161616);
+    }
+
+    &:focus:not(:disabled) {
+      /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
+      /* outline-offset: 2px; */
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled, #f4f4f4);
+      border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
+      color: var(--nuraly-color-button-disabled-text, #c6c6c6);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Ghost Button - Transparent with border */
+  :host([type="ghost"]) button {
+    background-color: var(--nuraly-color-button-outline, transparent);
+    border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
+    color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
+      border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));
+      color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
+      border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));
+      color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1;
+    }
+  }
+
+  /* Danger Button - Carbon Design System compliant */
+  :host([type="danger"]) button {
+    background-color: var(--nuraly-color-button-danger);
+    border-color: var(--nuraly-color-button-danger);
+    color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
+
+    &:hover:not(:disabled) {
+      background-color: var(--nuraly-color-button-danger-hover);
+      border-color: var(--nuraly-color-button-danger-hover);
+      color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--nuraly-color-button-danger-active);
+      border-color: var(--nuraly-color-button-danger-active);
+      color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
+    }
+
+    &:focus:not(:disabled) {
+      /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
+      /* outline-offset: 2px; */
+      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
+    }
+
+    &:disabled {
+      background-color: var(--nuraly-color-button-disabled);
+      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
+      color: var(--nuraly-color-button-disabled-text);
+      cursor: not-allowed;
+      opacity: 1; /* Reset opacity for proper disabled state */
+    }
+  }
+
+  /* Default size when no size attribute is provided (medium) */
+  :host(:not([size])) button {
+    height: var(--nuraly-size-md);
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
+    min-width: var(--nuraly-button-min-width, 5rem);
+  }
+
+  /* Size variants */
+  :host([size="small"]) button {
+    height: var(--nuraly-size-sm);
+    padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);
+    font-size: 0.75rem;
+    min-width: var(--nuraly-button-min-width, 4.5rem);
+    gap: 0.375rem;
+  }
+
+  :host([size="small"]) button nr-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    font-size: 0.875rem !important;
+  }
+
+  :host([size="medium"]) button {
+    height: var(--nuraly-size-md);
+    padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));
+    min-width: var(--nuraly-button-min-width, 5rem);
+  }
+
+  :host([size="large"]) button {
+    height: var(--nuraly-size-lg);
+    padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));
+    font-size: 1rem;
+    min-width: var(--nuraly-button-min-width, 6rem);
+  }
+
+  :host([size="large"]) button nr-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem !important;
+  }
+
+  /* Full width */
+  :host([full-width]) {
+    width: 100%;
+  }
+
+  :host([full-width]) button {
+    width: 100%;
+  }
+
+  /* Loading state */
+  :host([loading]) button {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  /* Shape variants */
+
+  /* Round - Pill-shaped with rounded ends */
+  :host([shape="round"]) button {
+    border-radius: 9999px;
+    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);
+  }
+
+  :host([shape="round"][size="small"]) button {
+    padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);
+  }
+
+  :host([shape="round"][size="large"]) button {
+    padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);
+  }
+
+  /* Circle - Perfect circle for icon-only buttons */
+  :host([shape="circle"]) button {
+    border-radius: 50%;
+    min-width: auto;
+    width: var(--nuraly-size-md);
+    height: var(--nuraly-size-md);
+    aspect-ratio: 1;
+    padding: 0;
+  }
+
+  :host([shape="circle"][size="small"]) button {
+    width: var(--nuraly-size-sm);
+    height: var(--nuraly-size-sm);
+  }
+
+  :host([shape="circle"][size="medium"]) button {
+    width: var(--nuraly-size-md);
+    height: var(--nuraly-size-md);
+  }
+
+  :host([shape="circle"][size="large"]) button {
+    width: var(--nuraly-size-lg);
+    height: var(--nuraly-size-lg);
+  }
+
+  /* Enhanced Ripple Effect Animation - Theme-aware */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.6);
+    transform: scale(0);
+    animation: ripple-animation 0.6s linear;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  @keyframes ripple-animation {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    70% {
+      transform: scale(3);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  /* Ripple effect for different button types - Carbon Design System compliant */
+  :host([type="primary"]) .ripple {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  :host([type="secondary"]) .ripple {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  :host([type="default"]) .ripple {
+    background: var(--nuraly-color-text, #161616);
+    opacity: 0.1;
+  }
+
+  :host([type="ghost"]) .ripple {
+    background: var(--nuraly-color-button-primary, #0f62fe);
+    opacity: 0.2;
+  }
+
+  :host([type="danger"]) .ripple {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  /* Theme-specific ripple adjustments for dark theme */
+  [data-theme="carbon-dark"] :host([type="default"]) .ripple {
+    background: var(--nuraly-color-text, #f4f4f4);
+    opacity: 0.1;
+  }
+
+  [data-theme="carbon-dark"] :host([type="ghost"]) .ripple {
+    background: var(--nuraly-color-button-primary, #78a9ff);
+    opacity: 0.2;
+  }
+
+  [data-theme="carbon-dark"] :host([type="primary"]) .ripple {
+    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
+  }
+
+  [data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
+    background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
+  }
+
+  [data-theme="carbon-dark"] :host([type="danger"]) .ripple {
+    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
+  }
+
+  /* ========================================
+   * CARBON THEME SPECIFIC STYLING
+   * Enhanced padding and icon centering for Carbon Design System
+   * ======================================== */
+  
+  /* Carbon theme button styling - apply to all carbon themes */
+  :host([data-theme*="carbon"]) button,
+  [data-theme*="carbon"] :host button {
+    /* Better baseline alignment for icon and text */
+    align-items: center;
+    
+    /* Enhanced icon alignment and spacing for Carbon */
+    nr-icon {
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      /* Perfect vertical alignment with text baseline */
+      vertical-align: middle;
+      line-height: 1;
+    }
+    
+    /* Icon spacing for Carbon theme - improved approach */
+    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
+  }
+  
+  /* Specific Carbon theme selectors for better targeting */
+  [data-theme="carbon-light"] nr-button button,
+  [data-theme="carbon-dark"] nr-button button,
+  [data-theme="carbon"] nr-button button {
+    /* Better baseline alignment for icon and text */
+    align-items: center;
+    
+    /* Enhanced icon alignment and spacing for Carbon */
+    nr-icon {
+      width: var(--nuraly-button-icon-size, 1rem);
+      height: var(--nuraly-button-icon-size, 1rem);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      /* Perfect vertical alignment with text baseline */
+      vertical-align: middle;
+      line-height: 1;
+      /* Slight adjustment for perfect optical centering */
+      margin-top: -1px;
+    }
+    
+    /* Target the SVG inside nr-icon for better alignment */
+    nr-icon svg {
+      display: block;
+      margin: 0 auto;
+    }
+    
+    /* Icon spacing for Carbon theme */
+    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
+    
+    /* Ensure text is also properly centered */
+    span#container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      line-height: 1;
+    }
+    
+    /* Ensure slot content aligns properly */
+    slot#slot {
+      display: inline-block;
+      line-height: inherit;
+    }
+  }
+`;
+export const styles = buttonStyles;
+//# sourceMappingURL=button.style.js.map

package/dist/src/components/button/button.types.d.ts

@@ -0,0 +1,57 @@
+export declare const enum ButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+    Danger = "danger",
+    Ghost = "ghost",
+    Default = "default"
+}
+export declare const enum ButtonSize {
+    Small = "small",// 32px
+    Medium = "medium",// 40px (default)
+    Large = "large"
+}
+export declare const enum ButtonShape {
+    Default = "default",
+    Circle = "circle",
+    Round = "round"
+}
+export declare const enum IconPosition {
+    Left = "left",
+    Right = "right"
+}
+/**
+ * Enhanced icon configuration for buttons
+ */
+export interface ButtonIconConfig {
+    /** Icon name (required) */
+    name: string;
+    /** Icon type - solid or regular */
+    type?: 'solid' | 'regular';
+    /** Icon size override */
+    size?: string;
+    /** Icon color override */
+    color?: string;
+    /** Alternative text for accessibility */
+    alt?: string;
+    /** Custom attributes to pass to icon */
+    attributes?: Record<string, string>;
+}
+/**
+ * Union type for icon input - supports both simple string and enhanced config
+ */
+export type ButtonIcon = string | ButtonIconConfig;
+/**
+ * Array of icons (supports 1-2 icons)
+ */
+export type ButtonIcons = ButtonIcon[];
+/**
+ * Alternative icon configuration using positioned properties
+ */
+export interface ButtonIconsConfig {
+    /** Left icon configuration */
+    left?: ButtonIcon;
+    /** Right icon configuration */
+    right?: ButtonIcon;
+}
+export declare const EMPTY_STRING = "";
+//# sourceMappingURL=button.types.d.ts.map

package/dist/src/components/button/button.types.js

@@ -0,0 +1,2 @@
+export const EMPTY_STRING = '';
+//# sourceMappingURL=button.types.js.map

package/dist/src/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/button/index.js

@@ -0,0 +1,2 @@
+export * from './button.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/button/react.d.ts

@@ -0,0 +1,5 @@
+import { NrButtonElement } from './button.component.js';
+export declare const NrButton: import("@lit-labs/react").ReactWebComponent<NrButtonElement, {
+    click: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/button/react.js

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrButtonElement } from './button.component.js';
+export const NrButton = createComponent({
+    tagName: 'nr-button',
+    elementClass: NrButtonElement,
+    react: React,
+    events: {
+        click: 'click',
+    },
+});
+//# sourceMappingURL=react.js.map