feat(parser): new style parser

.cursor/rules/parser.mdc

@@ -0,0 +1,8 @@
+---
+description: If the task requires information about how styles are parsed in `tasty`.
+globs: 
+alwaysApply: false
+---
+The specification of the style parser is described in [parser.md](mdc:src/parser/parser.md)
+This part of the styles handling only covers the parsing of string values. Though, boolean and number styles can be converted to string.
+Style-2-state mapping and responsive values are handled separately in [styles.ts](mdc:src/tasty/utils/styles.ts) and [responsive.ts](mdc:src/tasty/utils/responsive.ts)

.cursor/rules/tasty.mdc

@@ -0,0 +1,6 @@
+---
+description: If it requires the understanding of `tasty` helper API.
+globs: 
+alwaysApply: false
+---
+The API of `tasty` helper is described in [tasty.md](mdc:tasty.md)

.size-limit.cjs

@@ -27,13 +27,13 @@ module.exports = [
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '23 kB',
+    limit: '24 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '12 kB',
+    limit: '13 kB',
   },
 ];

src/components/fields/Slider/RangeSlider.stories.tsx

@@ -42,3 +42,9 @@ WithoutValue.args = {
   label: 'Slider',
   showValueLabel: false,
 };
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  label: 'Slider',
+  orientation: 'vertical',
+};

src/components/fields/Slider/RangeSlider.tsx

@@ -1,11 +1,11 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 
 import { Gradation } from './Gradation';
 import { SliderBase, SliderBaseChildArguments } from './SliderBase';
 import { SliderThumb } from './SliderThumb';
 import { SliderTrack } from './SliderTrack';
 
-import type { DOMRef } from '@react-types/shared';
+import type { FocusableRef } from '@react-types/shared';
 import type { RangeValue } from '../../../shared';
 import type { CubeSliderBaseProps } from './types';
 
@@ -19,29 +19,40 @@ const INTL_MESSAGES = {
   maximum: 'Maximum',
 };
 
-function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
+function RangeSlider(
+  props: CubeRangeSliderProps,
+  ref: FocusableRef<HTMLDivElement>,
+) {
   let { isDisabled, styles, gradation, ...otherProps } = props;
 
+  // Create separate refs for each thumb to enable proper focus management
+  const minThumbInputRef = useRef<HTMLInputElement>(null);
+  const maxThumbInputRef = useRef<HTMLInputElement>(null);
+
   return (
-    <SliderBase {...(otherProps as CubeSliderBaseProps<number[]>)}>
+    <SliderBase ref={ref} {...(otherProps as CubeSliderBaseProps<number[]>)}>
       {({ trackRef, inputRef, state }: SliderBaseChildArguments) => {
         return (
           <>
             <Gradation state={state} ranges={[0, 1]} values={gradation} />
-            <SliderTrack state={state} isDisabled={isDisabled} />
+            <SliderTrack
+              state={state}
+              isDisabled={isDisabled}
+              orientation={props.orientation}
+            />
             <SliderThumb
               index={0}
               aria-label={INTL_MESSAGES['minimum']}
               state={state}
-              inputRef={inputRef}
+              inputRef={minThumbInputRef}
               trackRef={trackRef}
               isDisabled={isDisabled}
             />
             <SliderThumb
               index={1}
               aria-label={INTL_MESSAGES['maximum']}
               state={state}
-              inputRef={inputRef}
+              inputRef={maxThumbInputRef}
               trackRef={trackRef}
               isDisabled={isDisabled}
             />

src/components/fields/Slider/SliderTrack.tsx

@@ -34,7 +34,9 @@ export function SliderTrack(props: SliderTrackProps) {
               '--slider-range-start': `${selectedTrack[0] * 100}%`,
               '--slider-range-end': `${selectedTrack[1] * 100}%`,
             }
-          : {}
+          : {
+              '--slider-value': `${selectedTrack[0] * 100}%`,
+            }
       }
     />
   );

src/components/fields/Slider/elements.ts

@@ -1,6 +1,7 @@
 import { tasty } from '../../../tasty';
 
 export const SliderThumbElement = tasty({
+  qa: 'SliderThumb',
   styles: {
     top: '@slider-thumb-offset-top',
     left: '@slider-thumb-offset-left',
@@ -28,6 +29,7 @@ export const SliderThumbElement = tasty({
 });
 
 export const SliderTrackContainerElement = tasty({
+  qa: 'SliderTrackContainer',
   styles: {
     top: {
       '': '0',
@@ -51,21 +53,33 @@ export const SliderTrackContainerElement = tasty({
 
     '&::before': {
       content: '""',
-      display: {
-        '': 'none',
-        range: 'block',
-      },
+      display: 'block',
       position: 'absolute',
-      top: 0,
-      bottom: 0,
+      inset: {
+        '': 'auto 0 0 0',
+        horizontal: '0 auto 0 0',
+        range: 'auto 0 @slider-range-start 0',
+        'range & horizontal': '0 auto 0 @slider-range-start',
+      },
       fill: '#purple',
-      left: '@slider-range-start',
-      width: '(@slider-range-end - @slider-range-start)',
+      width: {
+        '': 'auto',
+        horizontal: '@slider-value',
+        range: 'auto',
+        'range & horizontal': '(@slider-range-end - @slider-range-start)',
+      },
+      height: {
+        '': '@slider-value',
+        horizontal: 'auto',
+        range: '(@slider-range-end - @slider-range-start)',
+        'range & horizontal': 'auto',
+      },
     },
   },
 });
 
 export const SliderGradationElement = tasty({
+  qa: 'SliderGradation',
   styles: {
     position: 'absolute',
     top: '2x',
@@ -78,6 +92,7 @@ export const SliderGradationElement = tasty({
 });
 
 export const SliderGradeElement = tasty({
+  qa: 'SliderGrade',
   styles: {
     display: 'grid',
     width: 'max 0',
@@ -88,6 +103,7 @@ export const SliderGradeElement = tasty({
 });
 
 export const SliderControlsElement = tasty({
+  qa: 'SliderControls',
   styles: {
     position: 'relative',
     height: {
@@ -96,7 +112,7 @@ export const SliderControlsElement = tasty({
     },
     width: {
       '': '2x',
-      horizontal: '100% - 2x',
+      horizontal: '(100% - 2x)',
     },
 
     '@slider-thumb-offset-top': {
@@ -130,7 +146,7 @@ export const SliderElement = tasty({
     },
 
     alignItems: 'center',
-    flexDirection: {
+    flow: {
       '': 'column',
       inputs: 'row',
     },

src/components/layout/Prefix.tsx

@@ -55,7 +55,7 @@ export const Prefix = forwardRef(function Prefix(
       styles={styles}
       style={{
         // @ts-ignore
-        '--prefix-gap': parseStyle(outerGap).value,
+        '--prefix-gap': parseStyle(outerGap).output,
       }}
     >
       {children}

src/components/layout/Suffix.tsx

@@ -53,7 +53,7 @@ export const Suffix = forwardRef(function Suffix(
       ref={ref}
       styles={styles}
       style={{
-        '--suffix-gap': parseStyle(outerGap).value,
+        '--suffix-gap': parseStyle(outerGap).output,
       }}
     >
       {children}

src/parser/classify.ts

@@ -0,0 +1,174 @@
+import {
+  COLOR_FUNCS,
+  RE_HEX,
+  RE_NUMBER,
+  RE_UNIT_NUM,
+  VALUE_KEYWORDS,
+} from './const';
+import { StyleParser } from './parser';
+import { Bucket, ParserOptions, ProcessedStyle } from './types';
+
+export function classify(
+  raw: string,
+  opts: ParserOptions,
+  recurse: (str: string) => ProcessedStyle,
+): { bucket: Bucket; processed: string } {
+  const token = raw.trim();
+  if (!token) return { bucket: Bucket.Mod, processed: '' };
+
+  // Quoted string literals should be treated as value tokens (e.g., "" for content)
+  if (
+    (token.startsWith('"') && token.endsWith('"')) ||
+    (token.startsWith("'") && token.endsWith("'"))
+  ) {
+    return { bucket: Bucket.Value, processed: token };
+  }
+
+  // 0. Direct var(--*-color) token
+  const varColorMatch = token.match(/^var\(--([a-z0-9-]+)-color\)$/);
+  if (varColorMatch) {
+    return { bucket: Bucket.Color, processed: token };
+  }
+
+  // 1. URL
+  if (token.startsWith('url(')) {
+    return { bucket: Bucket.Value, processed: token };
+  }
+
+  // 2. Custom property
+  if (token[0] === '@') {
+    const match = token.match(/^@\(([a-z0-9-_]+)\s*,\s*(.*)\)$/);
+    if (match) {
+      const [, name, fallback] = match;
+      const processedFallback = recurse(fallback).output;
+      return {
+        bucket: Bucket.Value,
+        processed: `var(--${name}, ${processedFallback})`,
+      };
+    }
+    const identMatch = token.match(/^@([a-z0-9-_]+)$/);
+    if (identMatch) {
+      const name = identMatch[1];
+      const processed = `var(--${name})`;
+      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;
+      return {
+        bucket: bucketType,
+        processed,
+      };
+    }
+    // invalid custom property → modifier
+  }
+
+  // 3. Hash colors (with optional alpha suffix e.g., #purple.5)
+  if (token[0] === '#' && token.length > 1) {
+    // alpha form: #name.alpha
+    const alphaMatch = token.match(/^#([a-z0-9-]+)\.([0-9]+)$/i);
+    if (alphaMatch) {
+      const [, base, rawAlpha] = alphaMatch;
+      let alpha: string;
+      if (rawAlpha === '0') alpha = '0';
+      else alpha = `.${rawAlpha}`;
+      return {
+        bucket: Bucket.Color,
+        processed: `rgb(var(--${base}-color-rgb) / ${alpha})`,
+      };
+    }
+
+    // hyphenated names like #dark-05 should keep full name
+
+    const name = token.slice(1);
+    // valid hex → treat as hex literal with fallback
+    if (RE_HEX.test(name)) {
+      return {
+        bucket: Bucket.Color,
+        processed: `var(--${name}-color, #${name})`,
+      };
+    }
+    // simple color name token → css variable lookup with rgb fallback
+    return { bucket: Bucket.Color, processed: `var(--${name}-color)` };
+  }
+
+  // 4 & 5. Functions
+  const openIdx = token.indexOf('(');
+  if (openIdx > 0 && token.endsWith(')')) {
+    const fname = token.slice(0, openIdx);
+    const inner = token.slice(openIdx + 1, -1); // without ()
+
+    if (COLOR_FUNCS.has(fname)) {
+      // Process inner to expand nested colors or units.
+      const argProcessed = recurse(inner).output.replace(/,\s+/g, ','); // color funcs expect no spaces after commas
+      return { bucket: Bucket.Color, processed: `${fname}(${argProcessed})` };
+    }
+
+    // user function (provided via opts)
+    if (opts.funcs && fname in opts.funcs) {
+      // split by top-level commas within inner
+      const tmp = new StyleParser(opts).process(inner); // fresh parser w/ same opts but no cache share issues
+      const argProcessed = opts.funcs[fname](tmp.groups);
+      return { bucket: Bucket.Value, processed: argProcessed };
+    }
+
+    // generic: process inner and rebuild
+    const argProcessed = recurse(inner).output;
+    return { bucket: Bucket.Value, processed: `${fname}(${argProcessed})` };
+  }
+
+  // 6. Auto-calc group
+  if (token[0] === '(' && token[token.length - 1] === ')') {
+    const inner = token.slice(1, -1);
+    const innerProcessed = recurse(inner).output;
+    return { bucket: Bucket.Value, processed: `calc(${innerProcessed})` };
+  }
+
+  // 7. Unit number
+  const um = token.match(RE_UNIT_NUM);
+  if (um) {
+    const unit = um[1];
+    const numericPart = parseFloat(token.slice(0, -unit.length));
+    const handler = opts.units && opts.units[unit];
+    if (handler) {
+      if (typeof handler === 'string') {
+        // Special-case the common `x` → gap mapping used by tests.
+        const base = unit === 'x' ? 'var(--gap)' : handler;
+        if (numericPart === 1) {
+          return { bucket: Bucket.Value, processed: base };
+        }
+        return {
+          bucket: Bucket.Value,
+          processed: `calc(${numericPart} * ${base})`,
+        };
+      } else {
+        const inner = handler(numericPart);
+        // Avoid double wrapping if handler already returns a calc(...)
+        return {
+          bucket: Bucket.Value,
+          processed: inner.startsWith('calc(') ? inner : `calc(${inner})`,
+        };
+      }
+    }
+  }
+
+  // 7b. Unknown numeric+unit → treat as literal value (e.g., 1fr)
+  if (/^[+-]?(?:\d*\.\d+|\d+)[a-z%]+$/.test(token)) {
+    return { bucket: Bucket.Value, processed: token };
+  }
+
+  // 7c. Plain unit-less numbers should be treated as value tokens so that
+  // code such as `scrollbar={10}` resolves correctly.
+  if (RE_NUMBER.test(token)) {
+    return { bucket: Bucket.Value, processed: token };
+  }
+
+  // 8. Literal value keywords
+  if (VALUE_KEYWORDS.has(token)) {
+    return { bucket: Bucket.Value, processed: token };
+  }
+
+  // 8b. Special keyword colors
+  if (token === 'transparent' || token === 'currentcolor') {
+    return { bucket: Bucket.Color, processed: token };
+  }
+
+  // 9. Fallback modifier
+  return { bucket: Bucket.Mod, processed: token };
+}