@oalacea/chaosui 0.5.0 → 0.5.1

package/buttons/tension-bar/css/tension-bar.module.css

@@ -0,0 +1,204 @@
+/* tension-bar - Barre de tension/progression dramatique */
+.container {
+  width: 100%;
+  position: relative;
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+}
+
+.labels {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.labelLeft {
+  color: var(--chaos-bone-dark, #666);
+}
+
+.labelRight {
+  color: var(--chaos-blood, #ff0040);
+}
+
+.track {
+  height: 8px;
+  background: var(--chaos-iron, #222);
+  position: relative;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: var(--chaos-blood, #ff0040);
+  transition: width 0.5s ease-out;
+  position: relative;
+}
+
+.fill::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* Percentage display */
+.percentage {
+  position: absolute;
+  right: 0;
+  top: -1.5rem;
+  font-size: 0.7rem;
+  color: var(--chaos-blood, #ff0040);
+  font-weight: bold;
+}
+
+/* Markers */
+.markers {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.3rem;
+}
+
+.marker {
+  width: 1px;
+  height: 6px;
+  background: var(--chaos-iron, #333);
+}
+
+.markerActive {
+  background: var(--chaos-blood, #ff0040);
+}
+
+/* Variant: gold */
+.variantGold .fill {
+  background: linear-gradient(to right, var(--chaos-gold-dark, #8b7017), var(--chaos-gold, #c9a227));
+}
+
+.variantGold .labelRight,
+.variantGold .percentage {
+  color: var(--chaos-gold, #c9a227);
+}
+
+.variantGold .markerActive {
+  background: var(--chaos-gold, #c9a227);
+}
+
+/* Variant: danger (pulsing when high) */
+.variantDanger .fill {
+  background: var(--chaos-blood, #ff0040);
+}
+
+.variantDanger.high .fill {
+  animation: dangerPulse 0.5s ease-in-out infinite;
+}
+
+.variantDanger.high .track {
+  animation: dangerGlow 0.5s ease-in-out infinite;
+}
+
+@keyframes dangerPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes dangerGlow {
+  0%, 100% { box-shadow: 0 0 5px var(--chaos-blood, #ff0040); }
+  50% { box-shadow: 0 0 15px var(--chaos-blood, #ff0040); }
+}
+
+/* Variant: segmented */
+.variantSegmented .track {
+  display: flex;
+  gap: 2px;
+  background: transparent;
+}
+
+.segment {
+  flex: 1;
+  height: 8px;
+  background: var(--chaos-iron, #222);
+  transition: background 0.3s;
+}
+
+.segmentFilled {
+  background: var(--chaos-blood, #ff0040);
+}
+
+/* Variant: dramatic (with cracks) */
+.variantDramatic .track {
+  height: 12px;
+  background: 
+    linear-gradient(135deg, transparent 10%, var(--chaos-iron, #222) 10%, var(--chaos-iron, #222) 90%, transparent 90%);
+}
+
+.variantDramatic .fill::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: 
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 10px,
+      rgba(0, 0, 0, 0.2) 10px,
+      rgba(0, 0, 0, 0.2) 12px
+    );
+}
+
+/* Size variants */
+.sizeSm .track,
+.sizeSm .segment {
+  height: 4px;
+}
+
+.sizeLg .track,
+.sizeLg .segment {
+  height: 16px;
+}
+
+/* With text inside */
+.withText .track {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.innerText {
+  position: absolute;
+  left: 1rem;
+  font-size: 0.7rem;
+  color: var(--chaos-bone, #e8e8e8);
+  z-index: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Animated stripes */
+.animated .fill {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--chaos-blood, #ff0040),
+    var(--chaos-blood, #ff0040) 10px,
+    var(--chaos-blood-dark, #cc0033) 10px,
+    var(--chaos-blood-dark, #cc0033) 20px
+  );
+  background-size: 200% 100%;
+  animation: stripeMove 1s linear infinite;
+}
+
+@keyframes stripeMove {
+  0% { background-position: 0 0; }
+  100% { background-position: 28px 0; }
+}

package/buttons/tension-bar/tailwind/index.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface TensionBarProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  labelLeft?: string;
+  labelRight?: string;
+  showPercentage?: boolean;
+  showMarkers?: boolean;
+  markerCount?: number;
+  variant?: 'default' | 'gold' | 'danger' | 'segmented' | 'dramatic';
+  size?: 'sm' | 'md' | 'lg';
+  innerText?: string;
+  animated?: boolean;
+  dangerThreshold?: number;
+}
+
+const sizeHeights: Record<string, string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-4',
+};
+
+const variantColors: Record<string, { fill: string; text: string }> = {
+  default: { fill: 'bg-red-500', text: 'text-red-500' },
+  gold: { fill: 'bg-gradient-to-r from-amber-700 to-amber-500', text: 'text-amber-500' },
+  danger: { fill: 'bg-red-500', text: 'text-red-500' },
+  segmented: { fill: 'bg-red-500', text: 'text-red-500' },
+  dramatic: { fill: 'bg-red-500', text: 'text-red-500' },
+};
+
+export const TensionBar = forwardRef<HTMLDivElement, TensionBarProps>(
+  ({ value, max = 100, labelLeft, labelRight, showPercentage = false, showMarkers = false, markerCount = 10, variant = 'default', size = 'md', innerText, animated = false, dangerThreshold = 80, className, ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const isHigh = variant === 'danger' && percentage >= dangerThreshold;
+    const colors = variantColors[variant];
+    const height = sizeHeights[size];
+
+    const renderSegmented = () => {
+      const filledCount = Math.floor((percentage / 100) * markerCount);
+      return (
+        <div className="flex gap-0.5">
+          {Array.from({ length: markerCount }).map((_, i) => (
+            <div 
+              key={i} 
+              className={`
+                flex-1 ${height} transition-colors
+                ${i < filledCount ? colors.fill : 'bg-gray-800'}
+              `}
+            />
+          ))}
+        </div>
+      );
+    };
+
+    return (
+      <div ref={ref} className={`w-full relative font-mono ${className || ''}`} {...props}>
+        {(labelLeft || labelRight) && (
+          <div className="flex justify-between mb-2 text-[0.65rem] tracking-[0.2em] uppercase">
+            <span className="text-gray-500">{labelLeft}</span>
+            <span className={colors.text}>{labelRight}</span>
+          </div>
+        )}
+        
+        <div className={`
+          relative overflow-hidden bg-gray-800
+          ${innerText ? 'h-8 flex items-center px-4' : height}
+          ${isHigh ? 'animate-pulse shadow-[0_0_10px_#ff0040]' : ''}
+        `}>
+          {innerText && (
+            <span className="absolute left-4 text-xs text-stone-200 uppercase tracking-widest z-10">
+              {innerText}
+            </span>
+          )}
+          
+          {variant === 'segmented' ? (
+            renderSegmented()
+          ) : (
+            <div 
+              className={`
+                h-full transition-[width] duration-500 ease-out relative
+                ${colors.fill}
+                ${animated ? 'bg-[length:200%_100%] animate-[stripeMove_1s_linear_infinite] bg-[repeating-linear-gradient(45deg,#ff0040,#ff0040_10px,#cc0033_10px,#cc0033_20px)]' : ''}
+              `}
+              style={{ width: `${percentage}%` }}
+            >
+              <div className="absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-r from-transparent to-white/30 animate-pulse" />
+            </div>
+          )}
+          
+          {showPercentage && (
+            <span className={`absolute -top-6 right-0 text-xs font-bold ${colors.text}`}>
+              {Math.round(percentage)}%
+            </span>
+          )}
+        </div>
+
+        {showMarkers && variant !== 'segmented' && (
+          <div className="flex justify-between mt-1">
+            {Array.from({ length: markerCount + 1 }).map((_, i) => {
+              const markerPercent = (i / markerCount) * 100;
+              return (
+                <div 
+                  key={i} 
+                  className={`
+                    w-px h-1.5 transition-colors
+                    ${markerPercent <= percentage ? colors.fill : 'bg-gray-700'}
+                  `}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+TensionBar.displayName = 'TensionBar';
+export default TensionBar;

package/decorative/inscription/css/index.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './inscription.module.css';
+
+export interface InscriptionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Text content */
+  children: ReactNode;
+  /** Carving style */
+  effect?: 'carved' | 'deepCarved' | 'embossed' | 'weathered' | 'ancient' | 'roman';
+  /** Stone color variant */
+  variant?: 'bone' | 'marble' | 'granite' | 'obsidian' | 'gold';
+  /** Text size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Add stone texture overlay */
+  textured?: boolean;
+  /** Add decorative border */
+  bordered?: boolean;
+  /** Add crack effect */
+  cracked?: boolean;
+  /** HTML tag to render */
+  as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+}
+
+export const Inscription = forwardRef<HTMLDivElement, InscriptionProps>(
+  (
+    {
+      children,
+      effect = 'carved',
+      variant = 'bone',
+      size = 'md',
+      textured = false,
+      bordered = false,
+      cracked = false,
+      as: Component = 'div',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const text = typeof children === 'string' ? children : '';
+
+    return (
+      <Component
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={`
+          ${styles.inscription}
+          ${styles[effect]}
+          ${styles[variant]}
+          ${styles[size]}
+          ${textured ? styles.textured : ''}
+          ${bordered ? styles.bordered : ''}
+          ${cracked ? styles.cracked : ''}
+          ${className || ''}
+        `}
+        data-text={text}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Inscription.displayName = 'Inscription';
+export default Inscription;

package/decorative/inscription/css/inscription.module.css

@@ -0,0 +1,160 @@
+.inscription {
+  --stone-color: #d4c5a9;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --highlight-color: rgba(255, 255, 255, 0.1);
+  
+  font-family: 'Cinzel', serif;
+  color: var(--stone-color);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  position: relative;
+}
+
+/* Carved/engraved effect */
+.carved {
+  text-shadow: 
+    1px 1px 1px var(--shadow-color),
+    -1px -1px 1px var(--highlight-color),
+    0 0 3px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 50%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+/* Deep engraved effect */
+.deepCarved {
+  text-shadow: 
+    2px 2px 2px var(--shadow-color),
+    -1px -1px 1px var(--highlight-color),
+    1px 1px 4px rgba(0, 0, 0, 0.4),
+    inset 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Raised/embossed effect */
+.embossed {
+  text-shadow: 
+    -1px -1px 1px var(--shadow-color),
+    1px 1px 1px var(--highlight-color),
+    0 0 5px rgba(255, 255, 255, 0.1);
+}
+
+/* Weathered stone effect */
+.weathered {
+  opacity: 0.7;
+  filter: blur(0.3px);
+  text-shadow: 
+    1px 1px 2px var(--shadow-color),
+    -1px -1px 1px var(--highlight-color),
+    0 0 8px rgba(0, 0, 0, 0.2);
+}
+
+.weathered::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.3;
+  filter: blur(1px);
+  transform: translate(1px, 1px);
+}
+
+/* Ancient/runic style */
+.ancient {
+  font-family: 'UnifrakturMaguntia', serif;
+  letter-spacing: 0.1em;
+  text-shadow: 
+    2px 2px 3px var(--shadow-color),
+    -1px -1px 2px var(--highlight-color);
+}
+
+/* Roman numerals style */
+.roman {
+  font-weight: 700;
+  letter-spacing: 0.3em;
+  text-shadow: 
+    1px 2px 2px var(--shadow-color),
+    -1px -1px 1px var(--highlight-color);
+}
+
+/* Stone texture overlay */
+.textured::after {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+/* Color variants */
+.bone { --stone-color: #d4c5a9; }
+.marble { --stone-color: #e8e8e8; }
+.granite { --stone-color: #6a6a6a; }
+.obsidian { --stone-color: #2a2a2a; --shadow-color: rgba(255, 255, 255, 0.2); --highlight-color: rgba(0, 0, 0, 0.3); }
+.gold { --stone-color: #c9a227; }
+
+/* Size variants */
+.xs { font-size: 0.75rem; letter-spacing: 0.15em; }
+.sm { font-size: 1rem; letter-spacing: 0.2em; }
+.md { font-size: 1.5rem; letter-spacing: 0.2em; }
+.lg { font-size: 2.5rem; letter-spacing: 0.25em; }
+.xl { font-size: 4rem; letter-spacing: 0.3em; }
+
+/* Decorative border */
+.bordered {
+  padding: 1em 1.5em;
+  border: 1px solid var(--stone-color);
+  position: relative;
+}
+
+.bordered::before,
+.bordered::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--stone-color);
+}
+
+.bordered::before {
+  top: -5px;
+  left: -5px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.bordered::after {
+  bottom: -5px;
+  right: -5px;
+  border-left: none;
+  border-top: none;
+}
+
+/* Crack effect */
+.cracked {
+  position: relative;
+}
+
+.cracked::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 30%;
+  width: 40%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(0, 0, 0, 0.3) 20%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0.3) 80%,
+    transparent 100%
+  );
+  transform: rotate(-5deg);
+}

package/decorative/inscription/tailwind/index.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface InscriptionProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  effect?: 'carved' | 'deepCarved' | 'embossed' | 'weathered' | 'ancient' | 'roman';
+  variant?: 'bone' | 'marble' | 'granite' | 'obsidian' | 'gold';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  textured?: boolean;
+  bordered?: boolean;
+  cracked?: boolean;
+  as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+}
+
+const variantColors = {
+  bone: 'text-stone-300',
+  marble: 'text-gray-200',
+  granite: 'text-gray-500',
+  obsidian: 'text-zinc-700',
+  gold: 'text-amber-500',
+};
+
+const sizeClasses = {
+  xs: 'text-xs tracking-[0.15em]',
+  sm: 'text-base tracking-[0.2em]',
+  md: 'text-2xl tracking-[0.2em]',
+  lg: 'text-4xl tracking-[0.25em]',
+  xl: 'text-6xl tracking-[0.3em]',
+};
+
+const effectStyles = {
+  carved: '[text-shadow:1px_1px_1px_rgba(0,0,0,0.5),-1px_-1px_1px_rgba(255,255,255,0.1),0_0_3px_rgba(0,0,0,0.3)]',
+  deepCarved: '[text-shadow:2px_2px_2px_rgba(0,0,0,0.5),-1px_-1px_1px_rgba(255,255,255,0.1),1px_1px_4px_rgba(0,0,0,0.4)]',
+  embossed: '[text-shadow:-1px_-1px_1px_rgba(0,0,0,0.5),1px_1px_1px_rgba(255,255,255,0.1),0_0_5px_rgba(255,255,255,0.1)]',
+  weathered: 'opacity-70 blur-[0.3px] [text-shadow:1px_1px_2px_rgba(0,0,0,0.5),-1px_-1px_1px_rgba(255,255,255,0.1),0_0_8px_rgba(0,0,0,0.2)]',
+  ancient: "font-['UnifrakturMaguntia',serif] tracking-[0.1em] [text-shadow:2px_2px_3px_rgba(0,0,0,0.5),-1px_-1px_2px_rgba(255,255,255,0.1)]",
+  roman: 'font-bold tracking-[0.3em] [text-shadow:1px_2px_2px_rgba(0,0,0,0.5),-1px_-1px_1px_rgba(255,255,255,0.1)]',
+};
+
+export const Inscription = forwardRef<HTMLDivElement, InscriptionProps>(
+  ({ children, effect = 'carved', variant = 'bone', size = 'md', textured = false, bordered = false, cracked = false, as: Component = 'div', className = '', ...props }, ref) => {
+    const text = typeof children === 'string' ? children : '';
+
+    return (
+      <Component
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={`
+          font-['Cinzel',serif] uppercase relative
+          ${variantColors[variant]}
+          ${sizeClasses[size]}
+          ${effectStyles[effect]}
+          ${bordered ? 'p-4 px-6 border border-current' : ''}
+          ${className}
+        `}
+        data-text={text}
+        {...props}
+      >
+        {children}
+
+        {textured && (
+          <span
+            className="absolute inset-[-10px] opacity-5 mix-blend-overlay pointer-events-none"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+            }}
+          />
+        )}
+
+        {bordered && (
+          <>
+            <span className="absolute -top-[5px] -left-[5px] w-2.5 h-2.5 border border-current border-r-0 border-b-0" />
+            <span className="absolute -bottom-[5px] -right-[5px] w-2.5 h-2.5 border border-current border-l-0 border-t-0" />
+          </>
+        )}
+
+        {cracked && (
+          <span
+            className="absolute top-1/2 left-[30%] w-[40%] h-px -rotate-[5deg]"
+            style={{
+              background: 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.3) 80%, transparent 100%)',
+            }}
+          />
+        )}
+      </Component>
+    );
+  }
+);
+
+Inscription.displayName = 'Inscription';
+export default Inscription;