@vritti/quantum-ui 0.5.2 → 0.5.3
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/StatusSwitch.js
CHANGED
|
@@ -54,7 +54,7 @@ const StatusSwitch = ({
|
|
|
54
54
|
"inline-flex items-center gap-2 rounded-full border border-dotted transition-colors duration-200",
|
|
55
55
|
dimensions.pill,
|
|
56
56
|
checked ? pill : "border-border bg-transparent",
|
|
57
|
-
isBlocked && "opacity-
|
|
57
|
+
isBlocked && "opacity-70",
|
|
58
58
|
className
|
|
59
59
|
),
|
|
60
60
|
children: [
|
|
@@ -75,7 +75,7 @@ const StatusSwitch = ({
|
|
|
75
75
|
CompactSwitch,
|
|
76
76
|
{
|
|
77
77
|
size: dimensions.switchSize,
|
|
78
|
-
className: track,
|
|
78
|
+
className: cn(track, "disabled:opacity-100"),
|
|
79
79
|
checked,
|
|
80
80
|
permission,
|
|
81
81
|
disabled: isBlocked,
|
package/dist/StatusSwitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusSwitch.js","sources":["../lib/components/StatusSwitch/StatusSwitch.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../../shadcn/utils';\nimport { CompactSwitch } from '../Switch';\n\nexport type StatusSwitchTone = 'success' | 'primary' | 'warning' | 'destructive';\nexport type StatusSwitchSize = 'sm' | 'md' | 'lg';\n\nconst TONES: Record<StatusSwitchTone, { pill: string; label: string; track: string }> = {\n success: {\n pill: 'border-success/40 bg-success/10',\n label: 'text-success',\n track: 'data-[state=checked]:bg-success',\n },\n primary: {\n pill: 'border-primary/40 bg-primary/10',\n label: 'text-primary',\n track: 'data-[state=checked]:bg-primary',\n },\n warning: {\n pill: 'border-warning/40 bg-warning/10',\n label: 'text-warning',\n track: 'data-[state=checked]:bg-warning',\n },\n destructive: {\n pill: 'border-destructive/40 bg-destructive/10',\n label: 'text-destructive',\n track: 'data-[state=checked]:bg-destructive',\n },\n};\n\nconst SIZES: Record<StatusSwitchSize, { switchSize: 'sm' | 'default' | 'lg'; label: string; pill: string }> = {\n sm: { switchSize: 'sm', label: 'text-[10px]', pill: 'py-1 pr-1.5 pl-2.5' },\n md: { switchSize: 'default', label: 'text-[11px]', pill: 'py-1 pr-1.5 pl-3' },\n lg: { switchSize: 'lg', label: 'text-xs', pill: 'py-1.5 pr-2 pl-3.5' },\n};\n\nexport interface StatusSwitchProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n ariaLabel: string;\n activeLabel?: string;\n inactiveLabel?: string;\n showLabels?: boolean;\n tone?: StatusSwitchTone;\n size?: StatusSwitchSize;\n permission?: string;\n disabled?: boolean;\n disabledTip?: string;\n isLoading?: boolean;\n className?: string;\n}\n\n// A switch that names the state it is in, for a row or header that toggles one flag. The label pair occupies one grid\n// cell and slides, so the control never changes width as it flips and a column of them stays aligned.\nexport const StatusSwitch: React.FC<StatusSwitchProps> = ({\n checked,\n onCheckedChange,\n ariaLabel,\n activeLabel = 'Active',\n inactiveLabel = 'Inactive',\n showLabels = true,\n tone = 'success',\n size = 'sm',\n permission,\n disabled,\n disabledTip,\n isLoading,\n className,\n}) => {\n const { pill, label, track } = TONES[tone];\n const dimensions = SIZES[size];\n // Saving is not a reason the control is unavailable, so it blocks input without claiming one\n const isBlocked = disabled || isLoading;\n\n return (\n <div\n className={cn(\n 'inline-flex items-center gap-2 rounded-full border border-dotted transition-colors duration-200',\n dimensions.pill,\n checked ? pill : 'border-border bg-transparent',\n isBlocked && 'opacity-
|
|
1
|
+
{"version":3,"file":"StatusSwitch.js","sources":["../lib/components/StatusSwitch/StatusSwitch.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../../shadcn/utils';\nimport { CompactSwitch } from '../Switch';\n\nexport type StatusSwitchTone = 'success' | 'primary' | 'warning' | 'destructive';\nexport type StatusSwitchSize = 'sm' | 'md' | 'lg';\n\nconst TONES: Record<StatusSwitchTone, { pill: string; label: string; track: string }> = {\n success: {\n pill: 'border-success/40 bg-success/10',\n label: 'text-success',\n track: 'data-[state=checked]:bg-success',\n },\n primary: {\n pill: 'border-primary/40 bg-primary/10',\n label: 'text-primary',\n track: 'data-[state=checked]:bg-primary',\n },\n warning: {\n pill: 'border-warning/40 bg-warning/10',\n label: 'text-warning',\n track: 'data-[state=checked]:bg-warning',\n },\n destructive: {\n pill: 'border-destructive/40 bg-destructive/10',\n label: 'text-destructive',\n track: 'data-[state=checked]:bg-destructive',\n },\n};\n\nconst SIZES: Record<StatusSwitchSize, { switchSize: 'sm' | 'default' | 'lg'; label: string; pill: string }> = {\n sm: { switchSize: 'sm', label: 'text-[10px]', pill: 'py-1 pr-1.5 pl-2.5' },\n md: { switchSize: 'default', label: 'text-[11px]', pill: 'py-1 pr-1.5 pl-3' },\n lg: { switchSize: 'lg', label: 'text-xs', pill: 'py-1.5 pr-2 pl-3.5' },\n};\n\nexport interface StatusSwitchProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n ariaLabel: string;\n activeLabel?: string;\n inactiveLabel?: string;\n showLabels?: boolean;\n tone?: StatusSwitchTone;\n size?: StatusSwitchSize;\n permission?: string;\n disabled?: boolean;\n disabledTip?: string;\n isLoading?: boolean;\n className?: string;\n}\n\n// A switch that names the state it is in, for a row or header that toggles one flag. The label pair occupies one grid\n// cell and slides, so the control never changes width as it flips and a column of them stays aligned.\nexport const StatusSwitch: React.FC<StatusSwitchProps> = ({\n checked,\n onCheckedChange,\n ariaLabel,\n activeLabel = 'Active',\n inactiveLabel = 'Inactive',\n showLabels = true,\n tone = 'success',\n size = 'sm',\n permission,\n disabled,\n disabledTip,\n isLoading,\n className,\n}) => {\n const { pill, label, track } = TONES[tone];\n const dimensions = SIZES[size];\n // Saving is not a reason the control is unavailable, so it blocks input without claiming one\n const isBlocked = disabled || isLoading;\n\n return (\n <div\n className={cn(\n 'inline-flex items-center gap-2 rounded-full border border-dotted transition-colors duration-200',\n dimensions.pill,\n checked ? pill : 'border-border bg-transparent',\n isBlocked && 'opacity-70',\n className,\n )}\n >\n {showLabels && (\n <span aria-hidden className=\"grid justify-items-end\">\n {[inactiveLabel, activeLabel].map((text, index) => (\n <span\n // biome-ignore lint/suspicious/noArrayIndexKey: a fixed pair of slots, not a reorderable list\n key={index}\n className={cn(\n 'col-start-1 row-start-1 select-none font-semibold uppercase leading-none tracking-[0.08em] transition-all duration-200',\n dimensions.label,\n checked === (index === 1) ? 'translate-y-0 opacity-100' : '-translate-y-1 opacity-0',\n index === 1 ? label : 'text-muted-foreground',\n )}\n >\n {text}\n </span>\n ))}\n </span>\n )}\n {/* The pill already dims as a whole, and CSS opacity multiplies down the tree — leaving the switch's own\n disabled:opacity-50 in place would render the control at 35% against a 70% label */}\n <CompactSwitch\n size={dimensions.switchSize}\n className={cn(track, 'disabled:opacity-100')}\n checked={checked}\n permission={permission}\n disabled={isBlocked}\n disabledTip={disabled ? disabledTip : undefined}\n onCheckedChange={onCheckedChange}\n aria-label={ariaLabel}\n />\n </div>\n );\n};\n\nStatusSwitch.displayName = 'StatusSwitch';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusSwitch.d.ts","sourceRoot":"","sources":["../../../../lib/components/StatusSwitch/StatusSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AACjF,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA+BlD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"StatusSwitch.d.ts","sourceRoot":"","sources":["../../../../lib/components/StatusSwitch/StatusSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AACjF,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA+BlD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8DpD,CAAC"}
|