@startsimpli/ui 0.4.154 → 0.4.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.154",
+  "version": "0.4.155",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -56,8 +56,8 @@
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
     "@startsimpli/api": "^0.5.68",
-    "@startsimpli/i18n": "^0.1.3",
-    "@startsimpli/auth": "^0.4.41"
+    "@startsimpli/auth": "^0.4.41",
+    "@startsimpli/i18n": "^0.1.3"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -152,8 +152,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/ui/__tests__/switch.test.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Switch } from '../switch'
+
+describe('Switch', () => {
+  it('is a role=switch named by its label, reporting its state', () => {
+    render(<Switch checked aria-label="Comeback sequence" />)
+    const sw = screen.getByRole('switch', { name: 'Comeback sequence' })
+    expect(sw).toHaveAttribute('aria-checked', 'true')
+    expect(sw).toHaveAttribute('type', 'button')
+  })
+
+  it('asks for the opposite state on click and stays controlled', () => {
+    const onCheckedChange = jest.fn()
+    render(<Switch checked={false} onCheckedChange={onCheckedChange} aria-label="x" />)
+    const sw = screen.getByRole('switch')
+    fireEvent.click(sw)
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+    // The caller did not change `checked`, so the switch did not move.
+    expect(sw).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('toggles when the caller updates checked', () => {
+    function Harness() {
+      const [on, setOn] = useState(false)
+      return <Switch checked={on} onCheckedChange={setOn} aria-label="x" />
+    }
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('switch'))
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('does nothing while disabled', () => {
+    const onCheckedChange = jest.fn()
+    render(<Switch checked={false} disabled onCheckedChange={onCheckedChange} aria-label="x" />)
+    fireEvent.click(screen.getByRole('switch'))
+    expect(onCheckedChange).not.toHaveBeenCalled()
+  })
+})

package/src/components/ui/index.ts

@@ -38,6 +38,7 @@ export * from './skeleton'
 export * from './table'
 export * from './tabs'
 export * from './segmented-control'
+export * from './switch'
 export * from './textarea'
 export * from './tooltip'
 export * from './feature-gate'

package/src/components/ui/switch.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+/**
+ * Switch: an on/off control that takes effect at once (startsim-r7hws).
+ *
+ * A native <button role="switch" aria-checked>, so screen readers announce
+ * "on"/"off" and Space/Enter toggle it with no extra key handling. Use a
+ * Checkbox when the choice is only applied by a later Save.
+ *
+ * Controlled only: the caller owns `checked`, so a write the server refuses
+ * can leave the switch where it was.
+ */
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface SwitchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "role" | "type"> {
+  checked: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, onCheckedChange, onClick, className, disabled, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      data-state={checked ? "checked" : "unchecked"}
+      disabled={disabled}
+      onClick={(e) => {
+        onClick?.(e)
+        if (!e.defaultPrevented) onCheckedChange?.(!checked)
+      }}
+      className={cn(
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-primary" : "bg-input",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          checked ? "translate-x-5" : "translate-x-0",
+        )}
+      />
+    </button>
+  ),
+)
+Switch.displayName = "Switch"
+
+export { Switch }