@flikk/ui 1.0.0-beta.20 → 1.0.0-beta.21

package/dist/components/core/Tooltip/Tooltip.theme.js

@@ -1,6 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg " +
         "dark:bg-[var(--color-neutral-800)]/90 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 

package/dist/components/effects/Animated/Animated.animations.js

@@ -12,17 +12,36 @@ const ANIMATION_PRESETS = {
     slideLeft: { opacity: 0, x: -24 },
     slideRight: { opacity: 0, x: 24 },
 };
+const RESOLVED_VALUES = {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+};
+// Pre-compute visible states per preset (only keys that the preset actually animates)
+const VISIBLE_STATES = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, initial]) => {
+    const visible = {};
+    for (const k of Object.keys(initial)) {
+        visible[k] = RESOLVED_VALUES[k];
+    }
+    return [key, visible];
+}));
+// Pre-compute exit variants (same as hidden states)
+const EXIT_VARIANTS = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, value]) => [key, { ...value }]));
+// Pre-compute full variant sets for default transition (zero-allocation fast path)
+const DEFAULT_VARIANTS = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, initial]) => [
+    key,
+    {
+        hidden: { ...initial },
+        visible: { ...VISIBLE_STATES[key], transition: defaultSpringTransition },
+    },
+]));
 function getAnimationVariants(preset, customTransition) {
-    const initial = ANIMATION_PRESETS[preset];
+    if (!customTransition)
+        return DEFAULT_VARIANTS[preset];
     return {
-        hidden: { ...initial },
-        visible: {
-            opacity: 1,
-            y: 0,
-            x: 0,
-            scale: 1,
-            transition: customTransition !== null && customTransition !== void 0 ? customTransition : defaultSpringTransition,
-        },
+        hidden: { ...ANIMATION_PRESETS[preset] },
+        visible: { ...VISIBLE_STATES[preset], transition: customTransition },
     };
 }
 function getGroupVariants(stagger, delay) {
@@ -43,7 +62,7 @@ function getGroupVariants(stagger, delay) {
     };
 }
 function getExitVariant(preset) {
-    return { ...ANIMATION_PRESETS[preset] };
+    return EXIT_VARIANTS[preset];
 }
 
 export { ANIMATION_PRESETS, defaultSpringTransition, getAnimationVariants, getExitVariant, getGroupVariants };

package/dist/components/effects/Animated/Animated.d.ts

@@ -1,6 +1,6 @@
 import type { AnimatedContextValue, AnimatedGroupProps } from './Animated.types';
 export declare const useAnimatedContext: () => AnimatedContextValue | undefined;
 export declare const Animated: {
-    Group: ({ stagger, delay, as, children, className, ...props }: AnimatedGroupProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ animation, transition, as, delay, className, children, ...props }: import("./Animated.types").AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ stagger, delay, as, children, className, style, ...props }: AnimatedGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ animation, transition, as, delay, className, children, style, ...props }: import("./Animated.types").AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/effects/Animated/Animated.js

@@ -9,14 +9,14 @@ const AnimatedContext = createContext(undefined);
 const useAnimatedContext = () => {
     return useContext(AnimatedContext);
 };
-const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, ...props }) => {
+const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
+    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
+    const MotionComponent = useMemo(() => motion[as], [as]);
     if (shouldReduceMotion) {
         const Tag = as;
         return (jsx(Tag, { className: className, ...props, children: children }));
     }
-    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
-    const MotionComponent = motion[as];
     const motionProps = {
         initial: 'hidden',
         animate: 'visible',
@@ -24,6 +24,7 @@ const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, classNa
         variants: groupVariants,
         className: cn(className),
         ...props,
+        style: { willChange: 'transform, opacity', ...style },
     };
     return (jsx(AnimatedContext.Provider, { value: { isInsideGroup: true, stagger, delay }, children: jsx(AnimatePresence, { children: jsx(MotionComponent, { ...motionProps, children: children }) }) }));
 };

package/dist/components/effects/Animated/AnimatedItem.d.ts

@@ -1,2 +1,2 @@
 import type { AnimatedItemProps } from './Animated.types';
-export declare const AnimatedItem: ({ animation, transition, as, delay, className, children, ...props }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedItem: ({ animation, transition, as, delay, className, children, style, ...props }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Animated/AnimatedItem.js

@@ -5,20 +5,22 @@ import { cn } from '../../../utils/cn.js';
 import { useAnimatedContext } from './Animated.js';
 import { getAnimationVariants, getExitVariant } from './Animated.animations.js';
 
-const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, ...props }) => {
+const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
     const groupContext = useAnimatedContext();
+    const variants = useMemo(() => getAnimationVariants(animation, transition), [animation, transition]);
+    const exitState = useMemo(() => getExitVariant(animation), [animation]);
+    const MotionComponent = useMemo(() => motion[as], [as]);
     if (shouldReduceMotion) {
         const Tag = as;
         return (jsx(Tag, { className: className, ...props, children: children }));
     }
-    const variants = useMemo(() => getAnimationVariants(animation, transition), [animation, transition]);
-    const exitState = useMemo(() => getExitVariant(animation), [animation]);
     const motionProps = {
         variants,
         exit: exitState,
         className: cn(className),
         ...props,
+        style: { willChange: 'transform, opacity', ...style },
     };
     if (!groupContext) {
         motionProps.initial = 'hidden';
@@ -32,7 +34,6 @@ const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, cla
             };
         }
     }
-    const MotionComponent = motion[as];
     return (
     // @ts-expect-error -- polymorphic motion element type mismatch is safe at runtime
     jsx(MotionComponent, { ...motionProps, children: children }));

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -15,10 +15,6 @@ const checkboxTheme = {
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
         " " +
-        // Checked outline - light
-        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
-        // Checked outline - dark
-        "dark:checked:outline-[var(--color-primary-900)] " +
         // Focus visible - light
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
         // Focus visible - dark

package/dist/components/forms/Radio/Radio.animations.js

@@ -6,6 +6,8 @@ const radioDotVariants = {
     unchecked: {
         scale: 0,
         opacity: 0,
+        x: "-50%",
+        y: "-50%",
         transition: {
             duration: 0.15,
             ease: "easeOut",
@@ -14,6 +16,8 @@ const radioDotVariants = {
     checked: {
         scale: 1,
         opacity: 1,
+        x: "-50%",
+        y: "-50%",
         transition: {
             type: "spring",
             stiffness: 400,
@@ -26,8 +30,8 @@ const radioDotVariants = {
  * Reduced motion variants — instant opacity toggle, no scale
  */
 const reducedMotionDotVariants = {
-    unchecked: { opacity: 0 },
-    checked: { opacity: 1 },
+    unchecked: { opacity: 0, x: "-50%", y: "-50%" },
+    checked: { opacity: 1, x: "-50%", y: "-50%" },
 };
 
 export { radioDotVariants, reducedMotionDotVariants };

package/dist/components/forms/Radio/Radio.js

@@ -43,7 +43,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, isDisabled && "saturate-0 opacity-80", size === "sm" ? "size-2.5" : "size-3"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, radioTheme.dotSizes[size], isDisabled && "saturate-0 opacity-80"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

package/dist/components/forms/Radio/Radio.theme.js

@@ -11,13 +11,9 @@ const radioTheme = {
         // Default state - dark
         "dark:bg-[var(--color-background-tertiary)] " +
         // Checked state - light
-        "checked:border-[var(--color-primary)]  " +
+        "checked:border-[var(--color-primary)] checked:bg-white " +
         // Checked state - dark
-        "checked:bg-[var(--color-neutral-200)] " +
-        // Checked outline - light
-        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
-        // Checked outline - dark
-        "dark:checked:outline-[var(--color-primary-900)] " +
+        "dark:checked:bg-[var(--color-surface)] " +
         // Focus visible - light
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
         // Focus visible - dark
@@ -28,10 +24,14 @@ const radioTheme = {
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
-    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)]",
+    dotStyle: "absolute top-1/2 left-1/2 pointer-events-none rounded-full bg-[var(--color-primary)]",
+    dotSizes: {
+        sm: "size-2.5 mt-0.25",
+        md: "size-3",
+    },
     descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
     sizes: {
-        sm: "size-5 mt-0.25",
+        sm: "size-5 mt-0.5",
         md: "size-6",
     },
     // Group styles

package/dist/components/forms/Radio/Radio.types.d.ts

@@ -51,6 +51,7 @@ export interface RadioTheme {
     inputContainerStyle: string;
     inputStyle: string;
     dotStyle: string;
+    dotSizes: Record<RadioSize, string>;
     descriptionStyle: string;
     sizes: Record<RadioSize, string>;
     groupStyle?: string;