@doscientos/ui 0.1.16 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +59 -43
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -6
- package/dist/index.d.ts +15 -6
- package/dist/index.js +59 -43
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2597,18 +2597,27 @@ var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
|
2597
2597
|
var switchSizes = {
|
|
2598
2598
|
sm: {
|
|
2599
2599
|
control: "h-4 w-[1.875rem] p-0.5",
|
|
2600
|
-
thumb: "h-3
|
|
2601
|
-
|
|
2600
|
+
thumb: "h-3",
|
|
2601
|
+
idleWidth: "0.75rem",
|
|
2602
|
+
activeWidth: "1rem",
|
|
2603
|
+
selectedOffset: "0.875rem",
|
|
2604
|
+
activeSelectedOffset: "0.625rem"
|
|
2602
2605
|
},
|
|
2603
2606
|
md: {
|
|
2604
2607
|
control: "h-5 w-9 p-0.5",
|
|
2605
|
-
thumb: "h-4
|
|
2606
|
-
|
|
2608
|
+
thumb: "h-4",
|
|
2609
|
+
idleWidth: "1rem",
|
|
2610
|
+
activeWidth: "1.25rem",
|
|
2611
|
+
selectedOffset: "1rem",
|
|
2612
|
+
activeSelectedOffset: "0.75rem"
|
|
2607
2613
|
},
|
|
2608
2614
|
lg: {
|
|
2609
2615
|
control: "h-6 w-11 p-0.5",
|
|
2610
|
-
thumb: "h-5
|
|
2611
|
-
|
|
2616
|
+
thumb: "h-5",
|
|
2617
|
+
idleWidth: "1.25rem",
|
|
2618
|
+
activeWidth: "1.5rem",
|
|
2619
|
+
selectedOffset: "1.25rem",
|
|
2620
|
+
activeSelectedOffset: "1rem"
|
|
2612
2621
|
}
|
|
2613
2622
|
};
|
|
2614
2623
|
function Switch({
|
|
@@ -2654,43 +2663,50 @@ function Switch({
|
|
|
2654
2663
|
className
|
|
2655
2664
|
),
|
|
2656
2665
|
...props,
|
|
2657
|
-
children: (state) =>
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
"
|
|
2663
|
-
|
|
2664
|
-
"
|
|
2665
|
-
"
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
"
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2666
|
+
children: (state) => {
|
|
2667
|
+
const isThumbActive = state.isHovered || state.isPressed;
|
|
2668
|
+
const thumbOffset = state.isSelected ? isThumbActive ? styles.activeSelectedOffset : styles.selectedOffset : "0";
|
|
2669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
2670
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2671
|
+
"span",
|
|
2672
|
+
{
|
|
2673
|
+
"aria-hidden": "true",
|
|
2674
|
+
"data-slot": "switch-control",
|
|
2675
|
+
className: cn(
|
|
2676
|
+
"relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-border bg-input shadow-inner",
|
|
2677
|
+
"transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
|
|
2678
|
+
"group-data-hovered/switch:bg-muted-foreground/25",
|
|
2679
|
+
"group-data-selected/switch:border-primary group-data-selected/switch:bg-primary",
|
|
2680
|
+
"group-data-selected/switch:group-data-hovered/switch:bg-primary/85",
|
|
2681
|
+
"group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/50",
|
|
2682
|
+
styles.control
|
|
2683
|
+
),
|
|
2684
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2685
|
+
"span",
|
|
2686
|
+
{
|
|
2687
|
+
"data-slot": "switch-thumb",
|
|
2688
|
+
style: {
|
|
2689
|
+
transform: `translate3d(${thumbOffset}, 0, 0)`,
|
|
2690
|
+
width: isThumbActive ? styles.activeWidth : styles.idleWidth
|
|
2691
|
+
},
|
|
2692
|
+
className: cn(
|
|
2693
|
+
"grid shrink-0 place-items-center rounded-full border border-border/60 bg-background text-[0.625rem] text-muted-foreground shadow-sm",
|
|
2694
|
+
"will-change-[transform,width] transition-[transform,width,background-color,color,border-color] duration-[240ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
|
|
2695
|
+
"group-data-selected/switch:border-primary-foreground/20",
|
|
2696
|
+
"group-data-selected/switch:bg-primary-foreground group-data-selected/switch:text-primary",
|
|
2697
|
+
styles.thumb
|
|
2698
|
+
),
|
|
2699
|
+
children: state.isSelected ? selectedIcon ?? icon : icon
|
|
2700
|
+
}
|
|
2701
|
+
)
|
|
2702
|
+
}
|
|
2703
|
+
),
|
|
2704
|
+
children || description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "grid gap-0.5 leading-tight", children: [
|
|
2705
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
|
|
2706
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
|
|
2707
|
+
] }) : null
|
|
2708
|
+
] });
|
|
2709
|
+
}
|
|
2694
2710
|
}
|
|
2695
2711
|
);
|
|
2696
2712
|
}
|