@1money/component-ui 0.0.1 → 0.0.2

package/es/styles/recipes/_variants.scss

@@ -1,110 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '../theme/scales' as scales;
-
-/// Build a hint string from the first variant's values for the missing keys.
-@function -om-variant-hint($template, $missing) {
-  $lines: '';
-
-  @each $key in $missing {
-    $val: if(map.has-key($template, '#{$key}'), map.get($template, '#{$key}'), '<value>');
-    $lines: $lines + '    #{$key}: #{$val}, ';
-  }
-
-  @return $lines;
-}
-
-/// Auto-generate a variant schema map from a component name and a list of token keys.
-/// Uses the system prefix from scales.$om-sys-prefix.
-@function om-variant-schema($component, $keys...) {
-  $schema: ();
-
-  @each $key in $keys {
-    $schema: map.set($schema, --#{scales.$om-sys-prefix}-#{$component}-#{$key}, '#{$key}');
-  }
-
-  @return $schema;
-}
-
-/// Validate that every variant contains all token keys required by the schema.
-/// Returns $variants unchanged; @errors on any missing key.
-@function -om-variant-validate($variants, $schema) {
-  $required-keys: map.values($schema);
-  $first-name: null;
-  $first-tokens: null;
-
-  @each $name, $tokens in $variants {
-    @if not $first-name {
-      $first-name: $name;
-      $first-tokens: $tokens;
-    }
-
-    $missing: ();
-
-    @each $key in $required-keys {
-      @if not map.has-key($tokens, '#{$key}') {
-        $missing: list.append($missing, $key);
-      }
-    }
-
-    @if list.length($missing) > 0 {
-      $hint: '';
-
-      @if $first-tokens and '#{$name}' != '#{$first-name}' {
-        $hint: ' Example from variant "#{$first-name}": #{-om-variant-hint($first-tokens, $missing)}';
-      }
-
-      @error 'Variant "#{$name}" is missing #{list.length($missing)} token(s): #{$missing}. Required keys: #{$required-keys}.#{$hint}';
-    }
-  }
-
-  @return $variants;
-}
-
-@function om-variant($variants, $name) {
-  $normalized-name: '#{$name}';
-
-  @if not map.has-key($variants, $normalized-name) {
-    @error 'Unknown variant "#{$normalized-name}". Available: #{map.keys($variants)}. Hint: add \'\"#{$normalized-name}\": (...)\' to your $variants map.';
-  }
-
-  @return map.get($variants, $normalized-name);
-}
-
-@function om-variant-value($tokens, $key) {
-  $normalized-key: '#{$key}';
-
-  @if not map.has-key($tokens, $normalized-key) {
-    @error 'Variant token map does not define "#{$normalized-key}". Available keys: #{map.keys($tokens)}. Hint: add \'#{$normalized-key}: <value>\' to this variant.';
-  }
-
-  @return map.get($tokens, $normalized-key);
-}
-
-@function om-variant-extend($base, $overrides) {
-  @return map.merge($base, $overrides);
-}
-
-@mixin om-variant-apply($schema, $tokens) {
-  @each $target, $source in $schema {
-    #{$target}: #{om-variant-value($tokens, $source)};
-  }
-}
-
-@mixin om-variant-default($variants, $name, $schema) {
-  $-validated: -om-variant-validate($variants, $schema);
-
-  @include om-variant-apply($schema, om-variant($variants, $name));
-}
-
-@mixin om-variant-classes($variants, $schema, $default: null, $selector-prefix: '&-') {
-  $-validated: -om-variant-validate($variants, $schema);
-
-  @each $name, $tokens in $variants {
-    @if not $default or '#{$default}' != '#{$name}' {
-      #{$selector-prefix}#{$name} {
-        @include om-variant-apply($schema, $tokens);
-      }
-    }
-  }
-}

package/es/styles/system/_index.scss

@@ -1,4 +0,0 @@
-// System entrypoint — sx engine and system-owned helpers.
-@forward './props';
-@forward './sx';
-@forward './public';

package/es/styles/system/_props.scss

@@ -1,95 +0,0 @@
-// System prop registry — maps shorthand/system keys to CSS properties, scales, and enum aliases.
-@use 'sass:map';
-
-$om-spacing-props: (
-  'p': (padding,),
-  'pt': (padding-top,),
-  'pr': (padding-right,),
-  'pb': (padding-bottom,),
-  'pl': (padding-left,),
-  'px': (padding-left, padding-right),
-  'py': (padding-top, padding-bottom),
-  'm': (margin,),
-  'mt': (margin-top,),
-  'mr': (margin-right,),
-  'mb': (margin-bottom,),
-  'ml': (margin-left,),
-  'mx': (margin-left, margin-right),
-  'my': (margin-top, margin-bottom),
-  'gap': (gap,),
-) !default;
-$om-enum-props: (
-  'd': (css: display, values: (flex, grid, block, inline, inline-flex, inline-block, none)),
-  'flex': (css: flex-direction, values: (row, column, row-reverse, column-reverse)),
-  'jc': (css: justify-content, values: (start, end, center, space-between, space-around, space-evenly)),
-  'ai': (css: align-items, values: (start, end, center, baseline, stretch)),
-  'fw': (css: flex-wrap, values: (wrap, nowrap, wrap-reverse)),
-) !default;
-$om-value-aliases: (
-  justify-content: (start: flex-start, end: flex-end),
-  align-items: (start: flex-start, end: flex-end),
-) !default;
-$om-sizing-props: (
-  'w': width,
-  'h': height,
-) !default;
-$om-scale-props: (
-  'radius': (css: border-radius, scale: radius),
-  'shadow': (css: box-shadow, scale: shadow),
-) !default;
-$om-color-props: (
-  'bg': (css: background-color, scale: bg),
-  'border': (css: border-color, scale: border),
-) !default;
-$om-system-aliases: (
-  'display': 'd',
-  'flexDirection': 'flex',
-  'justifyContent': 'jc',
-  'alignItems': 'ai',
-  'flexWrap': 'fw',
-  'width': 'w',
-  'height': 'h',
-  'borderRadius': 'radius',
-  'boxShadow': 'shadow',
-  'bgcolor': 'bg',
-  'bgColor': 'bg',
-  'borderColor': 'border',
-) !default;
-
-@function -om-build-system-props() {
-  $result: ();
-
-  // 1. Spacing — kind = scale, scale = spacing
-  @each $name, $css-props in $om-spacing-props {
-    $result: map.merge($result, ('#{$name}': (css: $css-props, kind: scale, flag: spacing, scale: spacing)));
-  }
-
-  // 2. Enum props — kind = enum
-  @each $name, $def in $om-enum-props {
-    $result: map.merge($result, ('#{$name}': (css: (map.get($def, css),), kind: enum, flag: layout, values: map.get($def, values))));
-  }
-
-  // 3. Sizing props — kind = scale, scale = sizing
-  @each $name, $css in $om-sizing-props {
-    $result: map.merge($result, ('#{$name}': (css: ($css,), kind: scale, flag: sizing, scale: sizing)));
-  }
-
-  // 4. Color props — kind = scale, with per-prop scale assignment
-  @each $name, $def in $om-color-props {
-    $result: map.merge($result, ('#{$name}': (css: (map.get($def, css),), kind: scale, flag: color, scale: map.get($def, scale))));
-  }
-
-  // 5. Scale props (radius, shadow) — kind = scale with named scale
-  @each $name, $def in $om-scale-props {
-    $result: map.merge($result, ('#{$name}': (css: (map.get($def, css),), kind: scale, flag: visual, scale: map.get($def, scale))));
-  }
-
-  // 6. Aliases — copy canonical entry under alias name
-  @each $alias, $canonical in $om-system-aliases {
-    $result: map.merge($result, ('#{$alias}': map.get($result, $canonical)));
-  }
-
-  @return $result;
-}
-
-$om-system-props: -om-build-system-props() !default;

package/es/styles/system/_public.scss

@@ -1,5 +0,0 @@
-@use './sx' as sx-engine;
-
-@mixin sx($config) {
-  @include sx-engine.om-sx($config);
-}

package/es/styles/system/_sx.scss

@@ -1,81 +0,0 @@
-// System style compiler — resolves `om-sx` config objects into concrete CSS declarations.
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use '../tokens' as tokens;
-@use '../theme/functions' as theme-functions;
-@use '../theme/breakpoints' as breakpoints;
-@use './props' as props;
-
-@function om-alias-value($css-prop, $value) {
-  $aliases: map.get(props.$om-value-aliases, $css-prop);
-
-  @if $aliases != null and map.has-key($aliases, $value) {
-    @return map.get($aliases, $value);
-  }
-
-  @return $value;
-}
-
-@function om-resolve-system-value($value, $config) {
-  @if not $value { @return null; }
-
-  @if map.get($config, kind) == enum {
-    @return om-alias-value(list.nth(map.get($config, css), 1), $value);
-  }
-
-  @return theme-functions.om-token(map.get($config, scale), $value);
-}
-
-@mixin om-apply-system-prop($prop, $value) {
-  @if $value {
-    $config: map.get(props.$om-system-props, $prop);
-
-    @if not $config {
-      #{$prop}: $value;
-    } @else {
-      $resolved: om-resolve-system-value($value, $config);
-
-      @each $css-prop in map.get($config, css) {
-        #{$css-prop}: $resolved;
-      }
-    }
-  }
-}
-
-/// Returns true if $key starts with `&`, indicating a selector nesting trigger.
-@function -om-is-selector-key($key) {
-  @return meta.type-of($key) == 'string' and string.slice($key, 1, 1) == '&';
-}
-
-@mixin om-sx($config) {
-  // Stage 1 — plain system props (skip breakpoints and selector keys).
-  @each $prop, $value in $config {
-    @if not map.has-key(tokens.$om-breakpoints, $prop) and not -om-is-selector-key($prop) {
-      @include om-apply-system-prop($prop, $value);
-    }
-  }
-
-  // Stage 2 — breakpoint nesting (unchanged).
-  @each $bp-name, $_bp-value in tokens.$om-breakpoints {
-    @if map.has-key($config, $bp-name) {
-      $responsive-value: map.get($config, $bp-name);
-
-      @if meta.type-of($responsive-value) == 'map' {
-        @include breakpoints.om-down($bp-name) {
-          @include om-sx($responsive-value);
-        }
-      }
-    }
-  }
-
-  // Stage 3 — selector nesting (&:hover, &:focus-visible, etc.).
-  @each $prop, $value in $config {
-    @if -om-is-selector-key($prop) and meta.type-of($value) == 'map' {
-      #{$prop} {
-        @include om-sx($value);
-      }
-    }
-  }
-}

package/es/styles/theme/_breakpoints.scss

@@ -1,95 +0,0 @@
-// Breakpoint helpers — responsive mixins built from token data.
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@use '../tokens' as tokens;
-
-@mixin om-assert-breakpoints-descending() {
-  $prev-value: null;
-
-  @each $bp-name, $bp-value in tokens.$om-breakpoints {
-    @if $prev-value and $bp-value >= $prev-value {
-      @error '$om-breakpoints must be ordered from large to small, e.g. lg -> md -> sm.';
-    }
-
-    $prev-value: $bp-value;
-  }
-}
-
-@include om-assert-breakpoints-descending;
-
-@function om-breakpoint($bp-name) {
-  @return map.get(tokens.$om-breakpoints, $bp-name);
-}
-
-// Subtract 0.02px (1px / 50) to avoid overlap with min-width queries at fractional browser zoom levels.
-@function om-max-width($value) {
-  @return $value - math.div(tokens.$om-breakpoint-step, 50);
-}
-
-@function om-next-breakpoint($bp-name) {
-  $keys: map.keys(tokens.$om-breakpoints);
-  $index: list.index($keys, $bp-name);
-
-  @if not $index or $index == list.length($keys) {
-    @return null;
-  }
-
-  @return list.nth($keys, $index + 1);
-}
-
-@mixin om-down($bp-name) {
-  $bp-value: om-breakpoint($bp-name);
-
-  @if $bp-value {
-    @media (max-width: om-max-width($bp-value)) {
-      @content;
-    }
-  }
-}
-
-@mixin om-up($bp-name) {
-  $bp-value: om-breakpoint($bp-name);
-
-  @if $bp-value {
-    @media (min-width: $bp-value) {
-      @content;
-    }
-  }
-}
-
-@mixin om-between($min-bp, $max-bp) {
-  $min-value: om-breakpoint($min-bp);
-  $max-value: om-breakpoint($max-bp);
-
-  @if $min-value and $max-value {
-    @media (min-width: $min-value) and (max-width: om-max-width($max-value)) {
-      @content;
-    }
-  }
-}
-
-@mixin om-only($bp-name) {
-  $bp-value: om-breakpoint($bp-name);
-  $next-bp-name: om-next-breakpoint($bp-name);
-
-  @if $bp-value {
-    @if not $next-bp-name {
-      @include om-down($bp-name) {
-        @content;
-      }
-    } @else {
-      $next-bp-value: om-breakpoint($next-bp-name);
-
-      @media (min-width: $next-bp-value) and (max-width: om-max-width($bp-value)) {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin om-respond($bp-name) {
-  @include om-down($bp-name) {
-    @content;
-  }
-}

package/es/styles/theme/_functions.scss

@@ -1,271 +0,0 @@
-// Theme functions — generate CSS variable references, themed accessors, and typography vars.
-@use 'sass:list';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:meta';
-@use './scales' as scales;
-@use '../tokens' as tokens;
-
-@function om-scale-map($scale-name) {
-  @return map.get(scales.$om-theme-scales, $scale-name);
-}
-
-@function om-scale-has($scale-name, $key) {
-  $scale: om-scale-map($scale-name);
-
-  @return $scale != null and map.has-key($scale, '#{$key}');
-}
-
-@function om-scale-value($scale-name, $key) {
-  $scale: om-scale-map($scale-name);
-
-  @if not $scale or not map.has-key($scale, '#{$key}') {
-    @return null;
-  }
-
-  @return map.get($scale, '#{$key}');
-}
-
-@function om-theme-var-name($scale-name, $key) {
-  @return --#{scales.$om-sys-prefix}-#{$scale-name}-#{$key};
-}
-
-@function -om-css-fallback($value) {
-  @return if(meta.type-of($value) == 'list', meta.inspect($value), $value);
-}
-
-@function om-theme-ref($scale-name, $key) {
-  $value: om-scale-value($scale-name, $key);
-
-  @if not $value {
-    @return null;
-  }
-
-  @return var(#{om-theme-var-name($scale-name, $key)}, #{-om-css-fallback($value)});
-}
-
-/// Generic token resolver — returns a CSS variable reference for scales listed in
-/// `$om-theme-css-var-scales`, or the raw scale value otherwise.
-@function om-token($scale-name, $key) {
-  @if not list.index(scales.$om-theme-css-var-scales, $scale-name) {
-    $raw: om-scale-value($scale-name, '#{$key}');
-
-    @if $raw {
-      @return $raw;
-    }
-
-    @error 'om-token: "#{$key}" is not defined in non-CSS-var scale "#{$scale-name}".';
-  }
-
-  $token: om-theme-ref($scale-name, '#{$key}');
-
-  @if $token { @return $token; }
-
-  @if $scale-name == spacing { @return tokens.om-spacing-value($key); }
-
-  @error 'om-token: "#{$key}" is not defined in scale "#{$scale-name}".';
-}
-
-/// Generic scale accessor — use for any registered scale without a dedicated function.
-/// Simple:   om(radius, 300)          → om-token(radius, 300)
-/// Semantic: om(bg, 'brand', 'hover') → om-token(bg, 'brand-hover')
-@function om($scale, $key, $variant: null) {
-  $resolved: if($variant, '#{$key}-#{$variant}', $key);
-
-  @return om-token($scale, $resolved);
-}
-
-@function om-spacing($value) { @return om-token(spacing, $value); }
-
-@function om-radius($key) { @return om-token(radius, $key); }
-
-@function om-shadow($key) { @return om-token(shadow, $key); }
-
-@function om-sizing($value) { @return om-token(sizing, $value); }
-
-@function om-component-height($key) {
-  $-value: tokens.om-component-height-token($key);
-
-  @return om-token(component-height, $key);
-}
-
-@mixin om-emit-theme-vars($selector: ':root') {
-  #{$selector} {
-    @each $scale-name in scales.$om-theme-css-var-scales {
-      $scale: om-scale-map($scale-name);
-
-      @each $key, $value in $scale {
-        #{om-theme-var-name($scale-name, $key)}: #{-om-css-fallback(om-scale-value($scale-name, $key))};
-      }
-    }
-  }
-}
-
-@function -om-typography-var-name($category, $size, $suffix) {
-  @return --#{scales.$om-sys-prefix}-#{$category}-#{$size}-#{$suffix};
-}
-
-@mixin om-emit-typography-vars($selector: ':root') {
-  $standard-props: (font-size, font-family, line-height, letter-spacing, font-weight);
-
-  #{$selector} {
-    @each $category, $sizes in tokens.$om-typography-categories {
-      @each $size, $entry in $sizes {
-        @each $prop in $standard-props {
-          $val: map.get($entry, $prop);
-
-          @if $val {
-            #{-om-typography-var-name($category, $size, $prop)}: #{$val};
-          }
-        }
-
-        @if map.has-key($entry, strong) {
-          $strong-weight: map.get(map.get($entry, strong), font-weight);
-
-          @if $strong-weight {
-            #{-om-typography-var-name($category, $size, strong-font-weight)}: #{$strong-weight};
-          }
-        }
-
-        @if map.has-key($entry, text-decoration) {
-          #{-om-typography-var-name($category, $size, text-decoration)}: #{map.get($entry, text-decoration)};
-        }
-
-        @if map.has-key($entry, text-decoration-skip-ink) {
-          #{-om-typography-var-name($category, $size, text-decoration-skip-ink)}: #{map.get($entry, text-decoration-skip-ink)};
-        }
-      }
-    }
-  }
-}
-
-@function om-font-size($category, $size) {
-  $-entry: tokens.om-typography($category, $size);
-
-  @return var(#{-om-typography-var-name($category, $size, font-size)});
-}
-
-@function om-line-height($category, $size) {
-  $-entry: tokens.om-typography($category, $size);
-
-  @return var(#{-om-typography-var-name($category, $size, line-height)});
-}
-
-@function -om-line-height-ratio($category, $size) {
-  $entry: tokens.om-typography($category, $size);
-  $line-height: map.get($entry, line-height);
-
-  @if meta.type-of($line-height) != 'number' {
-    @error 'Line-height for "#{$category}/#{$size}" must be a number.';
-  }
-
-  @if math.is-unitless($line-height) {
-    @return $line-height;
-  }
-
-  @if math.unit($line-height) == '%' {
-    @return math.div($line-height, 100%);
-  }
-
-  $font-size: map.get($entry, font-size);
-
-  @if meta.type-of($font-size) != 'number' or math.is-unitless($font-size) {
-    @error 'Font-size for "#{$category}/#{$size}" must be a sized number.';
-  }
-
-  @return math.div($line-height, $font-size);
-}
-
-@function om-line-height-px($category, $size) {
-  @return calc(#{om-font-size($category, $size)} * #{-om-line-height-ratio($category, $size)});
-}
-
-@function om-font-weight($category, $size) {
-  $-entry: tokens.om-typography($category, $size);
-
-  @return var(#{-om-typography-var-name($category, $size, font-weight)});
-}
-
-@function om-font-family($category, $size) {
-  $-entry: tokens.om-typography($category, $size);
-
-  @return var(#{-om-typography-var-name($category, $size, font-family)});
-}
-
-@function om-letter-spacing($category, $size) {
-  $-entry: tokens.om-typography($category, $size);
-
-  @return var(#{-om-typography-var-name($category, $size, letter-spacing)});
-}
-
-// stylelint-disable order/properties-order -- Mixin emits properties in Figma spec order, not CSS sort order.
-@mixin om-typography($category, $size, $strong: false) {
-  $entry: tokens.om-typography($category, $size);
-
-  font-size: var(#{-om-typography-var-name($category, $size, font-size)});
-  font-family: var(#{-om-typography-var-name($category, $size, font-family)});
-  line-height: var(#{-om-typography-var-name($category, $size, line-height)});
-  letter-spacing: var(#{-om-typography-var-name($category, $size, letter-spacing)});
-
-  @if $strong and map.has-key($entry, strong) {
-    font-weight: var(#{-om-typography-var-name($category, $size, strong-font-weight)});
-  } @else {
-    font-weight: var(#{-om-typography-var-name($category, $size, font-weight)});
-  }
-
-  @if map.has-key($entry, text-decoration) {
-    text-decoration: var(#{-om-typography-var-name($category, $size, text-decoration)});
-  }
-
-  @if map.has-key($entry, text-decoration-skip-ink) {
-    text-decoration-skip-ink: var(#{-om-typography-var-name($category, $size, text-decoration-skip-ink)});
-  }
-}
-
-// Semantic color accessors — resolve bg/text/icon/border keys to CSS variable references.
-@function om-bg($group, $variant: null) {
-  $key: if($variant, '#{$group}-#{$variant}', $group);
-
-  @return om-token(bg, $key);
-}
-
-@function om-text($group, $variant: null) {
-  $key: if($variant, '#{$group}-#{$variant}', $group);
-
-  @return om-token(text, $key);
-}
-
-@function om-icon($group, $variant: null) {
-  $key: if($variant, '#{$group}-#{$variant}', $group);
-
-  @return om-token(icon, $key);
-}
-
-@function om-border($group, $variant: null) {
-  $key: if($variant, '#{$group}-#{$variant}', $group);
-
-  @return om-token(border, $key);
-}
-
-// Semantic spacing aliases — validates allowed keys and resolves to primitive spacing tokens.
-@function -om-semantic-spacing-token($scale, $key, $scale-name) {
-  $normalized-key: '#{$key}';
-
-  @if not map.has-key($scale, $normalized-key) {
-    @error '#{$scale-name} does not define spacing token "#{$normalized-key}"';
-  }
-
-  @return map.get($scale, $normalized-key);
-}
-
-@function om-gap($key) {
-  @return om-spacing(-om-semantic-spacing-token(tokens.$om-gap-scale, $key, '$om-gap-scale'));
-}
-
-@function om-component-padding($key) {
-  @return om-spacing(-om-semantic-spacing-token(tokens.$om-component-padding-scale, $key, '$om-component-padding-scale'));
-}
-
-@function om-section-padding($key) {
-  @return om-spacing(-om-semantic-spacing-token(tokens.$om-section-padding-scale, $key, '$om-section-padding-scale'));
-}

package/es/styles/theme/_index.scss

@@ -1,6 +0,0 @@
-// Theme entrypoint — internal barrel for theme domain implementation.
-@forward './scales';
-@forward './functions';
-@forward './breakpoints';
-@forward './values';
-@forward './mixins';