cybercore-css 0.2.0

package/src/icons/svg/tech/sliders.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="4" y1="21" x2="4" y2="14"/>
+  <line x1="4" y1="10" x2="4" y2="3"/>
+  <line x1="12" y1="21" x2="12" y2="12"/>
+  <line x1="12" y1="8" x2="12" y2="3"/>
+  <line x1="20" y1="21" x2="20" y2="16"/>
+  <line x1="20" y1="12" x2="20" y2="3"/>
+  <line x1="1" y1="14" x2="7" y2="14"/>
+  <line x1="9" y1="8" x2="15" y2="8"/>
+  <line x1="17" y1="16" x2="23" y2="16"/>
+</svg>

package/src/icons/svg/tech/terminal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2"/>
+  <polyline points="6 9 9 12 6 15"/>
+  <line x1="12" y1="15" x2="18" y2="15"/>
+</svg>

package/src/icons/svg/tech/wifi-off.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="2" y1="2" x2="22" y2="22"/>
+  <path d="M8.5 16.5a5 5 0 0 1 7 0"/>
+  <path d="M5 12.55a11 11 0 0 1 5.5-2.5"/>
+  <path d="M13.5 10.05a11 11 0 0 1 5.5 2.5"/>
+  <circle cx="12" cy="20" r="1"/>
+</svg>

package/src/icons/svg/tech/wifi.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12.55a11 11 0 0 1 14 0"/>
+  <path d="M7.5 15.5a7 7 0 0 1 9 0"/>
+  <path d="M10 18.5a3 3 0 0 1 4 0"/>
+  <circle cx="12" cy="21" r="0.5"/>
+</svg>

package/src/icons/svg/tech/zap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+</svg>

package/src/icons/types.ts

@@ -0,0 +1,73 @@
+/**
+ * Cyber Icons - Type definitions
+ * Cyberpunk-themed SVG icon system for CYBERCORE CSS
+ */
+
+/**
+ * Icon style variants
+ * - outline: Stroke-based, default style (1.5px stroke)
+ * - solid: Filled icons for emphasis
+ * - duotone: Two-tone with primary and secondary colors
+ * - glitch: Animated/glitchy variant for cyber effects
+ */
+export type IconVariant = 'outline' | 'solid' | 'duotone' | 'glitch';
+
+/**
+ * SVG content for each variant
+ */
+export type IconVariants = {
+  [K in IconVariant]?: string;
+};
+
+export interface IconDefinition {
+  /** Unique identifier for the icon */
+  name: string;
+  /** Default SVG (outline variant) */
+  svg: string;
+  /** Additional style variants */
+  variants?: IconVariants;
+  /** Category for organization */
+  category: IconCategory;
+  /** Brief description of the icon's purpose */
+  description: string;
+  /** Suggested use cases */
+  tags: string[];
+}
+
+export type IconCategory =
+  | 'navigation'
+  | 'actions'
+  | 'media'
+  | 'communication'
+  | 'data'
+  | 'security'
+  | 'tech'
+  | 'files'
+  | 'status'
+  | 'social';
+
+export type IconSize = 16 | 20 | 24 | 32 | 48 | 64;
+
+export type IconColor = 'cyan' | 'magenta' | 'yellow' | 'green' | 'current';
+
+export interface IconProps {
+  /** Icon name from the registry */
+  name: string;
+  /** Size in pixels (default: 24) */
+  size?: IconSize;
+  /** Color variant (default: 'current') */
+  color?: IconColor;
+  /** Style variant (default: 'outline') */
+  variant?: IconVariant;
+  /** Additional CSS classes */
+  className?: string;
+  /** Accessibility label */
+  'aria-label'?: string;
+  /** Hide from screen readers (use when icon is decorative) */
+  'aria-hidden'?: boolean;
+}
+
+/**
+ * Icon registry mapping names to definitions
+ */
+export type IconRegistry = Record<string, IconDefinition>;

package/src/icons/utils.ts

@@ -0,0 +1,216 @@
+/**
+ * Cyber Icons Utilities
+ * Helper functions for rendering and working with icons
+ */
+
+import type { IconProps, IconColor, IconVariant, IconDefinition } from './types';
+import { icons, isIconRegistered, getIconDefinition } from './registry';
+
+/**
+ * Color map for CSS custom properties
+ */
+const COLOR_MAP: Record<IconColor, string> = {
+  cyan: 'var(--cyber-cyan-500, #00f0ff)',
+  magenta: 'var(--cyber-magenta-500, #ff00aa)',
+  yellow: 'var(--cyber-yellow-500, #f0ff00)',
+  green: 'var(--cyber-green-500, #00ff88)',
+  current: 'currentColor',
+};
+
+/**
+ * Check if an icon exists in the registry
+ */
+export function iconExists(name: string): boolean {
+  return isIconRegistered(name);
+}
+
+/**
+ * Check if an icon has a specific variant
+ */
+export function hasVariant(name: string, variant: IconVariant): boolean {
+  const definition = getIconDefinition(name);
+  if (!definition) return false;
+  if (variant === 'outline') return true; // Default variant always exists
+  return !!definition.variants?.[variant];
+}
+
+/**
+ * Get available variants for an icon
+ */
+export function getVariants(name: string): IconVariant[] {
+  const definition = getIconDefinition(name);
+  if (!definition) return [];
+
+  const variants: IconVariant[] = ['outline']; // Default always available
+  if (definition.variants) {
+    if (definition.variants.solid) variants.push('solid');
+    if (definition.variants.duotone) variants.push('duotone');
+    if (definition.variants.glitch) variants.push('glitch');
+  }
+  return variants;
+}
+
+/**
+ * Get the raw SVG string for an icon
+ * @param name Icon name
+ * @param variant Optional variant (default: 'outline')
+ */
+export function getIcon(name: string, variant: IconVariant = 'outline'): string | null {
+  const definition = getIconDefinition(name);
+  if (!definition) return null;
+
+  // Return requested variant or fall back to default
+  if (variant === 'outline' || !definition.variants?.[variant]) {
+    return definition.svg;
+  }
+
+  return definition.variants[variant] ?? definition.svg;
+}
+
+/**
+ * Render an icon with options
+ */
+export function renderIcon(name: string, options: Partial<IconProps> = {}): string {
+  const {
+    variant = 'outline',
+    size = 24,
+    color = 'current',
+    className = '',
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden = !ariaLabel,
+  } = options;
+
+  const svg = getIcon(name, variant);
+  if (!svg) {
+    console.warn(`[CyberIcons] Icon "${name}" not found in registry`);
+    return '';
+  }
+
+  // Build class list
+  const variantClass = variant !== 'outline' ? `cyber-icon--${variant}` : '';
+  const classes = ['cyber-icon', `cyber-icon--${name}`, variantClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  // Build style
+  const colorValue = COLOR_MAP[color] || color;
+  const style = `width: ${size}px; height: ${size}px; color: ${colorValue};`;
+
+  // Build accessibility attributes
+  const a11y = ariaHidden ? 'aria-hidden="true"' : `aria-label="${ariaLabel}" role="img"`;
+
+  // Inject attributes into SVG
+  return svg.replace('<svg', `<svg class="${classes}" style="${style}" ${a11y}`).trim();
+}
+
+/**
+ * Render an icon from its definition (tree-shakeable)
+ * Use this with direct icon imports for optimal bundle size
+ *
+ * @example
+ * import { renderIconDef } from 'cybercore-css/icons';
+ * import { terminal } from 'cybercore-css/icons/defs/tech';
+ *
+ * const html = renderIconDef(terminal, { size: 24, color: 'cyan' });
+ */
+export function renderIconDef(icon: IconDefinition, options: Partial<IconProps> = {}): string {
+  const {
+    variant = 'outline',
+    size = 24,
+    color = 'current',
+    className = '',
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden = !ariaLabel,
+  } = options;
+
+  // Get SVG for requested variant
+  let svg: string;
+  if (variant === 'outline' || !icon.variants?.[variant]) {
+    svg = icon.svg;
+  } else {
+    svg = icon.variants[variant] ?? icon.svg;
+  }
+
+  // Build class list
+  const variantClass = variant !== 'outline' ? `cyber-icon--${variant}` : '';
+  const classes = ['cyber-icon', `cyber-icon--${icon.name}`, variantClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  // Build style
+  const colorValue = COLOR_MAP[color] || color;
+  const style = `width: ${size}px; height: ${size}px; color: ${colorValue};`;
+
+  // Build accessibility attributes
+  const a11y = ariaHidden ? 'aria-hidden="true"' : `aria-label="${ariaLabel}" role="img"`;
+
+  // Inject attributes into SVG
+  return svg.replace('<svg', `<svg class="${classes}" style="${style}" ${a11y}`).trim();
+}
+
+/**
+ * Get SVG string from icon definition (tree-shakeable)
+ */
+export function getIconSvg(icon: IconDefinition, variant: IconVariant = 'outline'): string {
+  if (variant === 'outline' || !icon.variants?.[variant]) {
+    return icon.svg;
+  }
+  return icon.variants[variant] ?? icon.svg;
+}
+
+/**
+ * Create a sprite sheet of all icons (for embedding once in HTML)
+ */
+export function createSpriteSheet(): string {
+  const symbols = Object.entries(icons)
+    .map(([name, def]) => {
+      // Convert SVG to symbol
+      const symbolContent = def.svg.replace(/<svg[^>]*>/, '').replace('</svg>', '');
+      return `<symbol id="cyber-icon-${name}" viewBox="0 0 24 24">${symbolContent}</symbol>`;
+    })
+    .join('\n');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">\n${symbols}\n</svg>`;
+}
+
+/**
+ * Render icon using sprite reference (requires sprite sheet in DOM)
+ */
+export function renderIconRef(name: string, options: Partial<IconProps> = {}): string {
+  const {
+    size = 24,
+    color = 'current',
+    className = '',
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden = !ariaLabel,
+  } = options;
+
+  const classes = ['cyber-icon', `cyber-icon--${name}`, className].filter(Boolean).join(' ');
+
+  const colorValue = COLOR_MAP[color] || color;
+  const style = `width: ${size}px; height: ${size}px; color: ${colorValue};`;
+
+  const a11y = ariaHidden ? 'aria-hidden="true"' : `aria-label="${ariaLabel}" role="img"`;
+
+  return `<svg class="${classes}" style="${style}" ${a11y}>
+  <use href="#cyber-icon-${name}"/>
+</svg>`;
+}
+
+/**
+ * Get icon as data URI (for CSS background-image, etc.)
+ */
+export function getIconDataUri(name: string, color?: string): string | null {
+  let svg = getIcon(name);
+  if (!svg) return null;
+
+  // Replace currentColor if a specific color is provided
+  if (color) {
+    svg = svg.replace(/currentColor/g, color);
+  }
+
+  // Encode for data URI
+  const encoded = encodeURIComponent(svg).replace(/'/g, '%27').replace(/"/g, '%22');
+
+  return `data:image/svg+xml,${encoded}`;
+}

package/src/scss/components/_alerts.scss

@@ -0,0 +1,76 @@
+// ============================================================
+// Alerts Component
+// Notification alerts with icon badges
+// ============================================================
+
+@layer components {
+  .cyber-alert {
+    --alert-color: var(--cyber-cyan-500);
+
+    position: relative;
+    padding: var(--space-md);
+    padding-left: var(--space-xl);
+    border: var(--border-thin) solid var(--alert-color);
+    border-left: 4px solid var(--alert-color);
+    background: color-mix(in srgb, var(--alert-color) 10%, var(--color-bg-secondary));
+
+    // Icon badge via ::before pseudo-element
+    &::before {
+      content: "!";
+      position: absolute;
+      top: 50%;
+      left: var(--space-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-family: var(--font-display);
+      font-size: var(--text-sm);
+      font-weight: 700;
+      line-height: 1;
+      color: var(--cyber-void-500);
+      background: var(--alert-color);
+      transform: translateY(-50%);
+    }
+
+    // Alert title
+    &__title {
+      margin-bottom: var(--space-2xs);
+      font-family: var(--font-display);
+      font-size: var(--text-sm);
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--alert-color);
+    }
+
+    // --------------------------------------------------------
+    // Semantic Variants
+    // --------------------------------------------------------
+
+    &--warning {
+      --alert-color: var(--cyber-yellow-500);
+
+      &::before {
+        content: "\26A0"; // ⚠
+      }
+    }
+
+    &--error {
+      --alert-color: var(--cyber-magenta-500);
+
+      &::before {
+        content: "\2715"; // ✕
+      }
+    }
+
+    &--success {
+      --alert-color: var(--cyber-green-500);
+
+      &::before {
+        content: "\2713"; // ✓
+      }
+    }
+  }
+}

package/src/scss/components/_badges.scss

@@ -0,0 +1,198 @@
+// ============================================================
+// Badges Component
+// Inline pill badges with variants
+// ============================================================
+
+@layer components {
+  .cyber-badge {
+    display: inline-flex;
+    gap: var(--space-3xs);
+    align-items: center;
+    padding: var(--space-3xs) var(--space-sm);
+    border: var(--border-thin) solid var(--cyber-cyan-500);
+    border-radius: var(--radius-full);
+    font-family: var(--font-display);
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--cyber-cyan-500);
+    background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
+    transition:
+      background var(--transition-fast),
+      box-shadow var(--transition-fast);
+
+    // Icon support
+    svg,
+    &__icon {
+      flex-shrink: 0;
+      width: 0.875em;
+      height: 0.875em;
+    }
+
+    // --------------------------------------------------------
+    // Color Variants
+    // --------------------------------------------------------
+
+    &--magenta {
+      border-color: var(--cyber-magenta-500);
+      color: var(--cyber-magenta-500);
+      background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
+    }
+
+    &--yellow {
+      border-color: var(--cyber-yellow-500);
+      color: var(--cyber-yellow-500);
+      background: color-mix(in srgb, var(--cyber-yellow-500) 20%, transparent);
+    }
+
+    &--green {
+      border-color: var(--cyber-green-500);
+      color: var(--cyber-green-500);
+      background: color-mix(in srgb, var(--cyber-green-500) 20%, transparent);
+    }
+
+    &--chrome {
+      border-color: var(--cyber-chrome-500);
+      color: var(--cyber-chrome-300);
+      background: color-mix(in srgb, var(--cyber-chrome-500) 20%, transparent);
+    }
+
+    // --------------------------------------------------------
+    // Style Variants
+    // --------------------------------------------------------
+
+    &--filled {
+      border-color: var(--cyber-cyan-500);
+      color: var(--cyber-void-500);
+      background: var(--cyber-cyan-500);
+
+      &.cyber-badge--magenta {
+        border-color: var(--cyber-magenta-500);
+        background: var(--cyber-magenta-500);
+      }
+
+      &.cyber-badge--yellow {
+        border-color: var(--cyber-yellow-500);
+        background: var(--cyber-yellow-500);
+      }
+
+      &.cyber-badge--green {
+        border-color: var(--cyber-green-500);
+        background: var(--cyber-green-500);
+      }
+    }
+
+    &--ghost {
+      border-color: transparent;
+      background: transparent;
+
+      &:hover {
+        background: color-mix(in srgb, currentcolor 10%, transparent);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Pulse Animation Variant
+    // Uses box-shadow animation on the badge itself
+    // --------------------------------------------------------
+
+    &--pulse {
+      animation: badge-pulse 2s ease-in-out infinite;
+    }
+
+    // --------------------------------------------------------
+    // Size Variants
+    // --------------------------------------------------------
+
+    &--sm {
+      padding: 2px var(--space-2xs);
+      font-size: 0.625rem;
+    }
+
+    &--lg {
+      padding: var(--space-2xs) var(--space-sm);
+      font-size: var(--text-sm);
+    }
+
+    // --------------------------------------------------------
+    // Counter Badge (for notifications)
+    // --------------------------------------------------------
+
+    &--counter {
+      justify-content: center;
+      min-width: 1.5rem;
+      height: 1.5rem;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    // --------------------------------------------------------
+    // Status indicators
+    // --------------------------------------------------------
+
+    &--online {
+      border-color: var(--cyber-green-500);
+      color: var(--cyber-green-500);
+      background: color-mix(in srgb, var(--cyber-green-500) 20%, transparent);
+
+      &::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--cyber-green-500);
+        animation: badge-pulse 2s ease-in-out infinite;
+      }
+    }
+
+    &--offline {
+      border-color: var(--cyber-chrome-500);
+      color: var(--cyber-chrome-500);
+      background: color-mix(in srgb, var(--cyber-chrome-500) 20%, transparent);
+
+      &::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--cyber-chrome-500);
+      }
+    }
+
+    &--busy {
+      border-color: var(--cyber-magenta-500);
+      color: var(--cyber-magenta-500);
+      background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
+
+      &::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--cyber-magenta-500);
+        animation: badge-pulse 1s ease-in-out infinite;
+      }
+    }
+  }
+
+  // Pulse animation - box-shadow animation matching demo
+  @keyframes badge-pulse {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 currentcolor;
+    }
+
+    50% {
+      box-shadow: 0 0 0 6px transparent;
+    }
+  }
+
+  // Badge group
+  .cyber-badge-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--space-2xs);
+  }
+}