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/components/overlays/Tooltip/Tooltip.tsx

@@ -50,7 +50,7 @@ const TooltipElement = tasty({
     },
     filter: {
       '': false,
-      light: 'drop-shadow(0 0 1px rgb(var(--dark-color-rgb) / 20%)',
+      light: 'drop-shadow(0 0 1px #dark.2)',
     },
   },
 });