@remotion/design 4.0.448 → 4.0.449

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.
Files changed (4) hide show
  1. package/dist/Switch.d.ts +1 -0
  2. package/dist/Switch.js +2 -2
  3. package/dist/esm/index.mjs +6 -2
  4. package/package.json +1 -1
package/dist/Switch.d.ts CHANGED
@@ -2,4 +2,5 @@ import React from 'react';
2
2
  export declare const Switch: React.FC<{
3
3
  readonly active: boolean;
4
4
  readonly onToggle: () => void;
5
+ readonly 'aria-label'?: string;
5
6
  }>;
package/dist/Switch.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- export const Switch = ({ active, onToggle }) => {
3
- return (_jsx("div", { "data-active": active, className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-[20px] w-[20px] left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
2
+ export const Switch = ({ active, onToggle, 'aria-label': ariaLabel }) => {
3
+ return (_jsx("button", { type: "button", role: "switch", "aria-checked": active, "aria-label": ariaLabel, "data-active": active, className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-[20px] w-[20px] left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
4
4
  };
package/dist/esm/index.mjs CHANGED
@@ -5563,8 +5563,12 @@ var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @
5563
5563
  SelectSeparator2.displayName = Separator.displayName;
5564
5564
  // src/Switch.tsx
5565
5565
  import { jsx as jsx25 } from "react/jsx-runtime";
5566
- var Switch = ({ active, onToggle }) => {
5567
- return /* @__PURE__ */ jsx25("div", {
5566
+ var Switch = ({ active, onToggle, "aria-label": ariaLabel }) => {
5567
+ return /* @__PURE__ */ jsx25("button", {
5568
+ type: "button",
5569
+ role: "switch",
5570
+ "aria-checked": active,
5571
+ "aria-label": ariaLabel,
5568
5572
  "data-active": active,
5569
5573
  className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
5570
5574
  onClick: onToggle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/design",
3
- "version": "4.0.448",
3
+ "version": "4.0.449",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/esm/index.mjs",