@flikk/ui 1.0.0-beta.15 → 1.0.0-beta.16

package/dist/components/forms/Switch/Switch.js

@@ -34,7 +34,9 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
     };
     // Label and description content
-    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: id, state: state, children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
+    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
+                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: id, state: state, children: label })) : (label)), description &&
+                (typeof description === "string" ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
     // Build data attributes for state-based styling
     const trackDataState = isDisabled
         ? "disabled"
@@ -43,8 +45,14 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
             : isChecked
                 ? "checked"
                 : "unchecked";
+    const filterId = `switch-liquid-lens-${id}`;
     // Switch toggle component
-    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("input", { ref: ref, type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsx(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 } }) })] }));
+    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("input", { ref: ref, type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }), jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsxs(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb, ""), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                backdropFilter: "blur(0.6px)",
+                                WebkitBackdropFilter: "blur(0.6px)",
+                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
+                                boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
+                            }, "aria-hidden": "true" })] }) })] }));
     return (jsxs("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest, children: [labelContent, switchToggle] }));
 });
 Switch.displayName = "Switch";

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

@@ -3,8 +3,8 @@
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "w-12 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)]",
-    thumb: "w-7 h-5 rounded-full shadow-real-md  bg-gradient-to-b from-neutral-100 via-neutral-200 to-neutral-50 border-t border-[var(--color-white)]/80 ",
+    track: "w-12 h-6 rounded-full cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
+    thumb: "w-7 h-5 rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
     description: "text-base text-[var(--color-text-muted)] -mt-1.5",
 };
 /**

package/dist/components/forms/index.d.ts

@@ -69,9 +69,6 @@ export * from "./ColorPicker";
 export { SelectableCard } from "./SelectableCard";
 export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard";
 export { selectableCardTheme } from "./SelectableCard";
-export { TransferList } from "./TransferList";
-export type { TransferListProps, TransferListItem, TransferListSize, TransferListTheme, } from "./TransferList";
-export { transferListTheme } from "./TransferList";
 export { Mention } from "./Mention";
 export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention";
 export { mentionTheme } from "./Mention";

package/dist/components/forms/index.js

@@ -65,8 +65,6 @@ export { ColorPickerPresets } from './ColorPicker/ColorPickerPresets.js';
 export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './ColorPicker/colorUtils.js';
 export { SelectableCard } from './SelectableCard/SelectableCard.js';
 export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';
-export { TransferList } from './TransferList/TransferList.js';
-export { transferListTheme } from './TransferList/TransferList.theme.js';
 export { Mention } from './Mention/Mention.js';
 export { mentionTheme } from './Mention/Mention.theme.js';
 export { CronInput } from './CronInput/CronInput.js';

package/dist/index.js

@@ -205,7 +205,6 @@ export { Timeline } from './components/data-display/Timeline/Timeline.js';
 export { Toast } from './components/core/Toast/Toast.js';
 export { ToastProvider, useToastContext } from './components/core/Toast/ToastProvider.js';
 export { Tooltip } from './components/core/Tooltip/Tooltip.js';
-export { TransferList } from './components/forms/TransferList/TransferList.js';
 export { Tree } from './components/core/Tree/Tree.js';
 export { TypeWriter } from './components/core/Message/TypeWriter.js';
 export { XAxis } from './components/charts/shared/ChartAxis/XAxis.js';
@@ -263,7 +262,6 @@ export { tagTheme } from './components/core/Tag/Tag.theme.js';
 export { textareaTheme } from './components/forms/Textarea/Textarea.theme.js';
 export { timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
 export { toastTheme } from './components/core/Toast/Toast.theme.js';
-export { transferListTheme } from './components/forms/TransferList/TransferList.theme.js';
 export { treeTheme } from './components/core/Tree/Tree.theme.js';
 export { useChartAccessibility } from './components/charts/hooks/useChartAccessibility.js';
 export { useChartTheme } from './components/charts/hooks/useChartTheme.js';