@ably/ui 15.1.3 → 15.1.4-dev.84d6f05
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/core/Toggle.js +1 -1
- package/index.d.ts +2 -0
- package/package.json +1 -1
package/core/Toggle.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,label,className,...props})=>{return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0
|
|
1
|
+
import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size="lg",label,className,...props})=>{const rootSize=size==="sm"?"w-[42px] h-[24]":"w-[56px] h-32";const thumbSize=size==="sm"?"w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]":"h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]";return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",className,rootSize),id:id,...props},/*#__PURE__*/React.createElement(Switch.Thumb,{className:cn(`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,thumbSize)})),label?/*#__PURE__*/React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;
|
package/index.d.ts
CHANGED
|
@@ -1094,8 +1094,10 @@ declare module '@ably/ui/core/Toggle' {
|
|
|
1094
1094
|
import React from "react";
|
|
1095
1095
|
type ToggleProps = {
|
|
1096
1096
|
id: string;
|
|
1097
|
+
size?: "sm" | "lg";
|
|
1097
1098
|
label?: string;
|
|
1098
1099
|
className?: string;
|
|
1100
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
1099
1101
|
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
1100
1102
|
const Toggle: React.FC<ToggleProps>;
|
|
1101
1103
|
export default Toggle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.4-dev.84d6f05",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|