@x-plat/design-system 0.1.3 → 0.1.5

package/dist/components/Switch/index.cjs

@@ -186,6 +186,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -220,6 +221,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/components/Switch/index.css

@@ -1,15 +1,46 @@
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  width: 4rem;
-  height: 2rem;
-  border-radius: 1rem;
+  border-radius: 9999px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
   background-color: #D4D4D4;
   border-color: #D4D4D4;
 }
+.lib-xplat-switch.sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+.lib-xplat-switch.sm > .knob {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.lib-xplat-switch.sm > .knob.checked {
+  transform: translateY(-50%) translateX(0.875rem);
+}
+.lib-xplat-switch.md {
+  width: 3rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.md > .knob {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.lib-xplat-switch.md > .knob.checked {
+  transform: translateY(-50%) translateX(1.375rem);
+}
+.lib-xplat-switch.lg {
+  width: 3.5rem;
+  height: 1.875rem;
+}
+.lib-xplat-switch.lg > .knob {
+  width: 1.625rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.lg > .knob.checked {
+  transform: translateY(-50%) translateX(1.625rem);
+}
 .lib-xplat-switch.disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -767,14 +798,9 @@
   position: absolute;
   top: 50%;
   left: 0;
-  width: 1.75rem;
-  height: 1.75rem;
   background-color: #FFFFFF;
   border-radius: 9999px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;
 }
-.lib-xplat-switch > .knob.checked {
-  transform: translateY(-50%) translateX(2rem);
-}

package/dist/components/Switch/index.d.cts

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
 
+type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
     value: boolean;
+    size?: SwitchSize;
     disabled?: boolean;
     className?: string;
     onChange?: (value: boolean) => void;

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

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
 
+type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
     value: boolean;
+    size?: SwitchSize;
     disabled?: boolean;
     className?: string;
     onChange?: (value: boolean) => void;

package/dist/components/Switch/index.js

@@ -150,6 +150,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -184,6 +185,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",