tharaday 0.8.4 → 0.8.7

package/src/components/Slider/Slider.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
 import { Input } from '../Input/Input.tsx';
@@ -81,16 +81,10 @@ export const Slider = ({
   const resolvedPair = value != null ? normalizeToPair(value, min, max) : internalPair;
   const [startValue, endValue] = resolvedPair;
 
-  const [startInputValue, setStartInputValue] = useState(String(startValue));
-  const [endInputValue, setEndInputValue] = useState(String(endValue));
-
-  useEffect(() => {
-    setStartInputValue(String(startValue));
-  }, [startValue]);
-
-  useEffect(() => {
-    setEndInputValue(String(endValue));
-  }, [endValue]);
+  const [editingStart, setEditingStart] = useState<string | null>(null);
+  const [editingEnd, setEditingEnd] = useState<string | null>(null);
+  const startDisplayValue = editingStart ?? String(startValue);
+  const endDisplayValue = editingEnd ?? String(endValue);
   const showValueText = isDual ? `${startValue} - ${endValue}` : String(startValue);
   const rangeSpan = Math.max(max - min, 1);
   const leftPercent = ((startValue - min) / rangeSpan) * 100;
@@ -169,7 +163,12 @@ export const Slider = ({
           step={step}
           value={startValue}
           onChange={(event) => {
-            const next = alignToStep(toNumber(event.target.value, min), min, endValue, step);
+            const next = alignToStep(
+              toNumber(event.target.value, min),
+              min,
+              isDual ? endValue : max,
+              step
+            );
             emitChange([next, endValue]);
           }}
         />
@@ -199,8 +198,8 @@ export const Slider = ({
             type="number"
             inputMode="decimal"
             size={size}
-            value={startInputValue}
-            onChange={(event) => setStartInputValue(event.target.value)}
+            value={startDisplayValue}
+            onChange={(event) => setEditingStart(event.target.value)}
             min={min}
             max={isDual ? endValue : max}
             step={step}
@@ -210,10 +209,12 @@ export const Slider = ({
             fullWidth
             onBlur={(event) => {
               commitStartInput(event.target.value);
+              setEditingStart(null);
             }}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 commitStartInput(event.currentTarget.value);
+                setEditingStart(null);
               }
             }}
           />
@@ -223,8 +224,8 @@ export const Slider = ({
               type="number"
               inputMode="decimal"
               size={size}
-              value={endInputValue}
-              onChange={(event) => setEndInputValue(event.target.value)}
+              value={endDisplayValue}
+              onChange={(event) => setEditingEnd(event.target.value)}
               min={startValue}
               max={max}
               step={step}
@@ -232,10 +233,12 @@ export const Slider = ({
               fullWidth
               onBlur={(event) => {
                 commitEndInput(event.target.value);
+                setEditingEnd(null);
               }}
               onKeyDown={(event) => {
                 if (event.key === 'Enter') {
                   commitEndInput(event.currentTarget.value);
+                  setEditingEnd(null);
                 }
               }}
             />

package/src/components/Text/Text.types.ts

@@ -1,8 +1,6 @@
 import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 
-import type { BoxMargin, BoxPadding } from '../Box/Box.types.ts';
-
-export type { BoxMargin, BoxPadding };
+import type { SpacingProps } from '../Box/Box.types.ts';
 
 export type TextVariant =
   | 'h1'
@@ -19,58 +17,15 @@ export type TextVariant =
 
 export type TextAlign = 'left' | 'center' | 'right' | 'justify';
 export type FontWeight = 'regular' | 'medium' | 'bold';
-export type TextColor =
-  | 'main'
-  | 'subtle'
-  | 'subtle'
-  | 'on-brand'
-  | 'danger'
-  | 'success'
-  | 'warning'
-  | 'info';
+export type TextColor = 'main' | 'subtle' | 'on-brand' | 'danger' | 'success' | 'warning' | 'info';
 
-export interface TextProps extends HTMLAttributes<HTMLElement> {
-  /** Additional class name */
+export interface TextProps extends HTMLAttributes<HTMLElement>, SpacingProps {
   className?: string;
-  /** The content to display */
   children: ReactNode;
-  /** The typographic style to apply */
   variant?: TextVariant;
-  /** The semantic HTML element to render */
   as?: ElementType;
-  /** Text alignment */
   align?: TextAlign;
-  /** Font weight override */
   weight?: FontWeight;
-  /** Text color based on semantic tokens */
   color?: TextColor;
-  /** If true, the text will not wrap and show ellipsis */
   noWrap?: boolean;
-  margin?: BoxMargin;
-  /** Horizontal margin */
-  marginX?: BoxMargin;
-  /** Vertical margin */
-  marginY?: BoxMargin;
-  /** Top margin */
-  marginTop?: BoxMargin;
-  /** Bottom margin */
-  marginBottom?: BoxMargin;
-  /** Left margin */
-  marginLeft?: BoxMargin;
-  /** Right margin */
-  marginRight?: BoxMargin;
-  /** Padding */
-  padding?: BoxPadding;
-  /** Horizontal padding */
-  paddingX?: BoxPadding;
-  /** Vertical padding */
-  paddingY?: BoxPadding;
-  /** Top padding */
-  paddingTop?: BoxPadding;
-  /** Bottom padding */
-  paddingBottom?: BoxPadding;
-  /** Left padding */
-  paddingLeft?: BoxPadding;
-  /** Right padding */
-  paddingRight?: BoxPadding;
 }

package/vite.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [
     dts({
       include: ['src'],
-      tsConfigFilePath: './tsconfig.app.json',
+      tsconfigPath: './tsconfig.app.json',
     }),
   ],
   build: {

package/dist/components/Box/Box.types.d.ts

@@ -1,50 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-export declare type BoxPadding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14 | (string & {});
-export declare type BoxMargin = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14 | (string & {});
-export declare type BoxGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14 | (string & {});
-export declare type BoxDisplay = 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-block' | 'none';
-export declare type BoxFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export declare type BoxAlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end' | 'baseline';
-export declare type BoxJustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-export declare type BoxBackgroundColor = 'none' | 'main' | 'subtle' | 'info-subtle' | 'success-subtle' | 'warning-subtle' | 'danger-subtle';
-export declare type BoxBorderColor = 'main' | 'subtle' | 'danger' | 'warning' | 'success' | 'info';
-export declare type BoxBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
-export interface BoxProps extends HTMLAttributes<HTMLElement> {
-    children?: ReactNode;
-    as?: ElementType;
-    display?: BoxDisplay;
-    padding?: BoxPadding;
-    paddingX?: BoxPadding;
-    paddingY?: BoxPadding;
-    paddingTop?: BoxPadding;
-    paddingBottom?: BoxPadding;
-    paddingLeft?: BoxPadding;
-    paddingRight?: BoxPadding;
-    margin?: BoxMargin;
-    marginX?: BoxMargin;
-    marginY?: BoxMargin;
-    marginTop?: BoxMargin;
-    marginBottom?: BoxMargin;
-    marginLeft?: BoxMargin;
-    marginRight?: BoxMargin;
-    gap?: BoxGap;
-    flexDirection?: BoxFlexDirection;
-    alignItems?: BoxAlignItems;
-    justifyContent?: BoxJustifyContent;
-    className?: string;
-    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    flexGrow?: number | string;
-    flexShrink?: number | string;
-    flex?: number | string;
-    fullWidth?: boolean;
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
-    width?: string | number;
-    height?: string | number;
-    maxWidth?: string | number;
-    gridTemplateColumns?: string;
-    backgroundColor?: BoxBackgroundColor;
-    border?: boolean;
-    borderBottom?: boolean;
-    borderColor?: BoxBorderColor;
-    borderRadius?: BoxBorderRadius;
-}