@epilot/spark-ui 0.10.0 → 0.10.1
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/components/accordion.cjs +1 -1
- package/dist/components/accordion.d.ts +1 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/attachment.d.cts +1 -1
- package/dist/components/attachment.d.ts +1 -1
- package/dist/components/bar-chart.js +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.d.cts +3 -3
- package/dist/components/button.d.ts +3 -3
- package/dist/components/callout.d.cts +1 -1
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/checkbox.cjs +4 -2
- package/dist/components/checkbox.cjs.map +1 -1
- package/dist/components/checkbox.js +4 -2
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/info-block.d.cts +1 -1
- package/dist/components/info-block.d.ts +1 -1
- package/dist/components/line-chart.cjs +1 -1
- package/dist/components/line-chart.js +2 -2
- package/dist/components/page-header.d.cts +1 -1
- package/dist/components/page-header.d.ts +1 -1
- package/dist/components/power-history-chart.cjs +1 -1
- package/dist/components/power-history-chart.js +2 -2
- package/dist/components/power-history.cjs +1 -1
- package/dist/components/power-history.js +1 -1
- package/dist/components/power-network.cjs +1 -1
- package/dist/components/power-network.js +1 -1
- package/dist/components/radio.cjs +4 -2
- package/dist/components/radio.cjs.map +1 -1
- package/dist/components/radio.d.cts +2 -0
- package/dist/components/radio.d.ts +2 -0
- package/dist/components/radio.js +4 -2
- package/dist/components/radio.js.map +1 -1
- package/dist/components/switch.cjs +3 -1
- package/dist/components/switch.cjs.map +1 -1
- package/dist/components/switch.d.cts +2 -0
- package/dist/components/switch.d.ts +2 -0
- package/dist/components/switch.js +3 -1
- package/dist/components/switch.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-DY84GLCh.cjs");
|
|
4
4
|
const require_icons_material_symbol = require("../icons/material-symbol.cjs");
|
|
5
|
+
let _base_ui_react_accordion = require("@base-ui/react/accordion");
|
|
5
6
|
let react = require("react");
|
|
6
7
|
react = require_chunk.__toESM(react);
|
|
7
|
-
let _base_ui_react_accordion = require("@base-ui/react/accordion");
|
|
8
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
9
|
let cnfast = require("cnfast");
|
|
10
10
|
//#region src/components/accordion.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import * as React$1 from "react";
|
|
4
3
|
import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/components/accordion.d.ts
|
|
7
7
|
type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../utils/cn.js";
|
|
3
3
|
import { MaterialSymbol } from "../icons/material-symbol.js";
|
|
4
|
-
import "react";
|
|
5
4
|
import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
|
|
5
|
+
import "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/accordion.tsx
|
|
8
8
|
function Accordion({ className, variant = "soft", ...props }) {
|
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/attachment.d.ts
|
|
9
9
|
declare const attachmentVariants: (props?: ({
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | "xs" | null | undefined;
|
|
11
11
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
declare function Attachment({
|
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/attachment.d.ts
|
|
9
9
|
declare const attachmentVariants: (props?: ({
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | "xs" | null | undefined;
|
|
11
11
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
declare function Attachment({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
4
4
|
import { localeNumberFormat } from "../utils/format.js";
|
|
5
5
|
import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
|
|
6
6
|
import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "ghost" | "outline" | "secondary" | "destructive" | "default" | "muted" | "tinted" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "ghost" | "outline" | "secondary" | "destructive" | "default" | "muted" | "tinted" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
11
|
-
color?: "
|
|
12
|
-
size?: "small" | "
|
|
10
|
+
variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
|
|
11
|
+
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
|
+
size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
type SparkButtonColor = 'accent' | 'neutral' | 'danger';
|
|
15
15
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
11
|
-
color?: "
|
|
12
|
-
size?: "small" | "
|
|
10
|
+
variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
|
|
11
|
+
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
|
+
size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
type SparkButtonColor = 'accent' | 'neutral' | 'danger';
|
|
15
15
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
8
8
|
//#region src/components/callout.d.ts
|
|
9
9
|
type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
|
|
10
10
|
declare const calloutVariants: (props?: ({
|
|
11
|
-
variant?: "
|
|
11
|
+
variant?: "success" | "warning" | "error" | "info" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
|
|
14
14
|
/** Overrides the variant's default icon; the variant's color is kept. */
|
|
@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
8
8
|
//#region src/components/callout.d.ts
|
|
9
9
|
type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
|
|
10
10
|
declare const calloutVariants: (props?: ({
|
|
11
|
-
variant?: "
|
|
11
|
+
variant?: "success" | "warning" | "error" | "info" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
|
|
14
14
|
/** Overrides the variant's default icon; the variant's color is kept. */
|
|
@@ -8,13 +8,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
8
8
|
let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
|
|
9
9
|
let cnfast = require("cnfast");
|
|
10
10
|
//#region src/components/checkbox.tsx
|
|
11
|
-
const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
|
|
11
|
+
const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, render, nativeButton, ...props }, ref) => {
|
|
12
12
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
13
13
|
const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
|
|
14
14
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
|
|
15
15
|
"data-style": dataStyle,
|
|
16
16
|
"data-accent-color": dataAccentColor,
|
|
17
|
-
|
|
17
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
18
|
+
render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
|
|
19
|
+
className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))", className),
|
|
18
20
|
ref,
|
|
19
21
|
...props,
|
|
20
22
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_checkbox.Checkbox.Indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n /**\n * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n * area). Accepted for back-compat but ignored.\n */\n size?: 'default' | 'large'\n /**\n * @deprecated The checkbox is always bordered now. Accepted for back-compat\n * but ignored.\n */\n bordered?: boolean\n styleVariant?: SparkStyle\n color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n React.ComponentRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size: _size,\n bordered: _bordered,\n styleVariant,\n color,\n ...props\n },\n ref,\n ) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <CheckboxPrimitive.Root\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn(\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'rounded-[min(var(--spark-rounded-sm),40%)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n 'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n 'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n className,\n )}\n ref={ref}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n <svg\n aria-hidden=\"true\"\n className=\"hidden size-5 group-data-checked:block\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path\n className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n pathLength={1}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;
|
|
1
|
+
{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n /**\n * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n * area). Accepted for back-compat but ignored.\n */\n size?: 'default' | 'large'\n /**\n * @deprecated The checkbox is always bordered now. Accepted for back-compat\n * but ignored.\n */\n bordered?: boolean\n styleVariant?: SparkStyle\n color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n React.ComponentRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size: _size,\n bordered: _bordered,\n styleVariant,\n color,\n render,\n nativeButton,\n ...props\n },\n ref,\n ) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <CheckboxPrimitive.Root\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n // p-0 defends the 24px box against the UA button padding when the\n // consumer's CSS has no Tailwind preflight\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'rounded-[min(var(--spark-rounded-sm),40%)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n 'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n 'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n className,\n )}\n ref={ref}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n <svg\n aria-hidden=\"true\"\n className=\"hidden size-5 group-data-checked:block\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path\n className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n pathLength={1}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,QACA,cACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,6JACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,SACF;EACK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}
|
|
@@ -5,13 +5,15 @@ import * as React$1 from "react";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
7
7
|
//#region src/components/checkbox.tsx
|
|
8
|
-
const Checkbox = React$1.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
|
|
8
|
+
const Checkbox = React$1.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, render, nativeButton, ...props }, ref) => {
|
|
9
9
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
10
10
|
const dataAccentColor = color ? accentByColor[color] : void 0;
|
|
11
11
|
return /* @__PURE__ */ jsx(Checkbox$1.Root, {
|
|
12
12
|
"data-style": dataStyle,
|
|
13
13
|
"data-accent-color": dataAccentColor,
|
|
14
|
-
|
|
14
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
15
|
+
render: render ?? /* @__PURE__ */ jsx("button", {}),
|
|
16
|
+
className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))", className),
|
|
15
17
|
ref,
|
|
16
18
|
...props,
|
|
17
19
|
children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n /**\n * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n * area). Accepted for back-compat but ignored.\n */\n size?: 'default' | 'large'\n /**\n * @deprecated The checkbox is always bordered now. Accepted for back-compat\n * but ignored.\n */\n bordered?: boolean\n styleVariant?: SparkStyle\n color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n React.ComponentRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size: _size,\n bordered: _bordered,\n styleVariant,\n color,\n ...props\n },\n ref,\n ) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <CheckboxPrimitive.Root\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn(\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'rounded-[min(var(--spark-rounded-sm),40%)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n 'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n 'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n className,\n )}\n ref={ref}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n <svg\n aria-hidden=\"true\"\n className=\"hidden size-5 group-data-checked:block\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path\n className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n pathLength={1}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;AAuBA,MAAM,WAAWA,QAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,WAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;
|
|
1
|
+
{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n /**\n * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n * area). Accepted for back-compat but ignored.\n */\n size?: 'default' | 'large'\n /**\n * @deprecated The checkbox is always bordered now. Accepted for back-compat\n * but ignored.\n */\n bordered?: boolean\n styleVariant?: SparkStyle\n color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n React.ComponentRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size: _size,\n bordered: _bordered,\n styleVariant,\n color,\n render,\n nativeButton,\n ...props\n },\n ref,\n ) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <CheckboxPrimitive.Root\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n // p-0 defends the 24px box against the UA button padding when the\n // consumer's CSS has no Tailwind preflight\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'rounded-[min(var(--spark-rounded-sm),40%)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n 'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n 'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n className,\n )}\n ref={ref}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n <svg\n aria-hidden=\"true\"\n className=\"hidden size-5 group-data-checked:block\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path\n className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n pathLength={1}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;AAuBA,MAAM,WAAWA,QAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,QACA,cACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,WAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,6JACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,SACF;EACK;EACL,GAAI;YAEJ,qBAACA,WAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,oBAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,oBAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}
|
|
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/info-block.d.ts
|
|
7
7
|
declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "bare" | "default" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
10
10
|
declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/info-block.d.ts
|
|
7
7
|
declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "bare" | "default" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
10
10
|
declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-DY84GLCh.cjs");
|
|
4
|
-
const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
|
|
5
4
|
const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
|
|
6
5
|
const require_utils_format = require("../utils/format.cjs");
|
|
7
6
|
const require_utils_chart_scale = require("../utils/chart-scale.cjs");
|
|
8
7
|
const require_components_chart = require("./chart.cjs");
|
|
8
|
+
const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
|
|
9
9
|
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
10
10
|
let react = require("react");
|
|
11
11
|
react = require_chunk.__toESM(react);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
|
|
3
|
-
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
4
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
5
4
|
import { localeNumberFormat } from "../utils/format.js";
|
|
6
5
|
import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
|
|
7
6
|
import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
|
|
7
|
+
import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
|
|
8
8
|
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
9
9
|
import * as React$1 from "react";
|
|
10
10
|
import { useCallback, useMemo } from "react";
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/page-header.d.ts
|
|
8
8
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
9
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
declare const PageHeaderTitle: ({
|
|
11
11
|
className,
|
|
12
12
|
...props
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/page-header.d.ts
|
|
8
8
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
9
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
declare const PageHeaderTitle: ({
|
|
11
11
|
className,
|
|
12
12
|
...props
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-DY84GLCh.cjs");
|
|
4
|
-
const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
|
|
5
4
|
const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
|
|
6
5
|
require("../utils/chars.cjs");
|
|
7
6
|
const require_utils_format = require("../utils/format.cjs");
|
|
@@ -9,6 +8,7 @@ const require_utils_chart_scale = require("../utils/chart-scale.cjs");
|
|
|
9
8
|
const require_components_chart = require("./chart.cjs");
|
|
10
9
|
const require_components_series_legend = require("./series-legend.cjs");
|
|
11
10
|
const require_components_typography = require("./typography.cjs");
|
|
11
|
+
const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
|
|
12
12
|
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
13
13
|
let react = require("react");
|
|
14
14
|
react = require_chunk.__toESM(react);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
|
|
3
|
-
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
4
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
5
4
|
import "../utils/chars.js";
|
|
6
5
|
import { twoDecimalFormat } from "../utils/format.js";
|
|
7
6
|
import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
|
|
8
7
|
import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
|
|
9
8
|
import { SeriesLegend } from "./series-legend.js";
|
|
10
9
|
import { SectionTitle } from "./typography.js";
|
|
10
|
+
import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
|
|
11
11
|
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
12
12
|
import * as React$1 from "react";
|
|
13
13
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
|
|
3
2
|
require("../utils/chars.cjs");
|
|
4
3
|
const require_utils_format = require("../utils/format.cjs");
|
|
5
4
|
const require_components_series_legend = require("./series-legend.cjs");
|
|
6
5
|
const require_components_typography = require("./typography.cjs");
|
|
7
6
|
const require_components_line_chart = require("./line-chart.cjs");
|
|
7
|
+
const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
|
|
8
8
|
let react = require("react");
|
|
9
9
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
10
|
//#region src/components/power-history.tsx
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useContainerWidth } from "../hooks/use-container-width.js";
|
|
3
2
|
import "../utils/chars.js";
|
|
4
3
|
import { oneDecimalFormat } from "../utils/format.js";
|
|
5
4
|
import { SeriesLegend } from "./series-legend.js";
|
|
6
5
|
import { SectionTitle } from "./typography.js";
|
|
7
6
|
import { LineChart } from "./line-chart.js";
|
|
7
|
+
import { useContainerWidth } from "../hooks/use-container-width.js";
|
|
8
8
|
import { useCallback, useMemo, useState } from "react";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
//#region src/components/power-history.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
|
|
4
3
|
const require_icons_material_symbol = require("../icons/material-symbol.cjs");
|
|
4
|
+
const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
|
|
5
5
|
const require_components_typography = require("./typography.cjs");
|
|
6
6
|
const require_components_number_flow = require("./number-flow.cjs");
|
|
7
7
|
const require_components_skeleton = require("./skeleton.cjs");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
4
3
|
import { MaterialSymbol } from "../icons/material-symbol.js";
|
|
4
|
+
import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
5
5
|
import { SectionTitle } from "./typography.js";
|
|
6
6
|
import NumberFlow from "./number-flow.js";
|
|
7
7
|
import { Skeleton } from "./skeleton.js";
|
|
@@ -18,14 +18,16 @@ function RadioGroup({ className, styleVariant, color, ...props }) {
|
|
|
18
18
|
...props
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
-
function Radio({ className, styleVariant, color, ...props }) {
|
|
21
|
+
function Radio({ className, styleVariant, color, render, nativeButton, ...props }) {
|
|
22
22
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
23
23
|
const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
|
|
24
24
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Root, {
|
|
25
25
|
"data-slot": "radio",
|
|
26
26
|
"data-style": dataStyle,
|
|
27
27
|
"data-accent-color": dataAccentColor,
|
|
28
|
-
|
|
28
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
29
|
+
render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
|
|
30
|
+
className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
|
|
29
31
|
...props,
|
|
30
32
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Indicator, {
|
|
31
33
|
"data-slot": "radio-indicator",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n className,\n styleVariant,\n color,\n ...props\n}: RadioGroupProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioGroupPrimitive\n data-slot=\"radio-group\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n {...props}\n />\n )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction Radio({
|
|
1
|
+
{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n className,\n styleVariant,\n color,\n ...props\n}: RadioGroupProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioGroupPrimitive\n data-slot=\"radio-group\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n {...props}\n />\n )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction Radio({\n className,\n styleVariant,\n color,\n render,\n nativeButton,\n ...props\n}: RadioProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioPrimitive.Root\n data-slot=\"radio\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n // p-0 defends the 24px box against the UA button padding when the\n // consumer's CSS has no Tailwind preflight\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n 'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n className,\n )}\n {...props}\n >\n <RadioPrimitive.Indicator\n data-slot=\"radio-indicator\"\n className=\"flex items-center justify-center\"\n >\n <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n </RadioPrimitive.Indicator>\n </RadioPrimitive.Root>\n )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAcA,SAAS,WAAW,EAClB,WACA,cACA,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IAAc,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
|
package/dist/components/radio.js
CHANGED
|
@@ -15,14 +15,16 @@ function RadioGroup({ className, styleVariant, color, ...props }) {
|
|
|
15
15
|
...props
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
|
-
function Radio({ className, styleVariant, color, ...props }) {
|
|
18
|
+
function Radio({ className, styleVariant, color, render, nativeButton, ...props }) {
|
|
19
19
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
20
20
|
const dataAccentColor = color ? accentByColor[color] : void 0;
|
|
21
21
|
return /* @__PURE__ */ jsx(Radio$1.Root, {
|
|
22
22
|
"data-slot": "radio",
|
|
23
23
|
"data-style": dataStyle,
|
|
24
24
|
"data-accent-color": dataAccentColor,
|
|
25
|
-
|
|
25
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
26
|
+
render: render ?? /* @__PURE__ */ jsx("button", {}),
|
|
27
|
+
className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
|
|
26
28
|
...props,
|
|
27
29
|
children: /* @__PURE__ */ jsx(Radio$1.Indicator, {
|
|
28
30
|
"data-slot": "radio-indicator",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n className,\n styleVariant,\n color,\n ...props\n}: RadioGroupProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioGroupPrimitive\n data-slot=\"radio-group\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n {...props}\n />\n )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction Radio({
|
|
1
|
+
{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n className,\n styleVariant,\n color,\n ...props\n}: RadioGroupProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioGroupPrimitive\n data-slot=\"radio-group\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n {...props}\n />\n )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n styleVariant?: SparkStyle\n color?: SparkRadioColor\n}\n\nfunction Radio({\n className,\n styleVariant,\n color,\n render,\n nativeButton,\n ...props\n}: RadioProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n\n return (\n <RadioPrimitive.Root\n data-slot=\"radio\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n // p-0 defends the 24px box against the UA button padding when the\n // consumer's CSS has no Tailwind preflight\n 'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n 'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n 'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n className,\n )}\n {...props}\n >\n <RadioPrimitive.Indicator\n data-slot=\"radio-indicator\"\n className=\"flex items-center justify-center\"\n >\n <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n </RadioPrimitive.Indicator>\n </RadioPrimitive.Root>\n )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAcA,SAAS,WAAW,EAClB,WACA,cACA,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
|
|
@@ -5,13 +5,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
5
5
|
let _base_ui_react_switch = require("@base-ui/react/switch");
|
|
6
6
|
let cnfast = require("cnfast");
|
|
7
7
|
//#region src/components/switch.tsx
|
|
8
|
-
function Switch({ className, styleVariant, color, size: _size, variant: _variant, ...props }) {
|
|
8
|
+
function Switch({ className, styleVariant, color, size: _size, variant: _variant, render, nativeButton, ...props }) {
|
|
9
9
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
10
10
|
const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
|
|
11
11
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Root, {
|
|
12
12
|
"data-slot": "switch",
|
|
13
13
|
"data-style": dataStyle,
|
|
14
14
|
"data-accent-color": dataAccentColor,
|
|
15
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
16
|
+
render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
|
|
15
17
|
className: (0, cnfast.cn)("peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-(--spark-rounded-xl)", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
|
|
16
18
|
...props,
|
|
17
19
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Thumb, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n styleVariant?: SparkStyle\n color?: SparkSwitchColor\n /**\n * @deprecated The switch now renders a single size. Accepted for back-compat\n * but ignored.\n */\n size?: 'sm' | 'base' | 'lg'\n /**\n * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n * for back-compat but ignored.\n */\n variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n className,\n styleVariant,\n color,\n size: _size,\n variant: _variant,\n ...props\n}: SwitchProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn(\n 'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n 'rounded-(--spark-rounded-xl)',\n 'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n 'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n 'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n 'rounded-(--spark-rounded-lg)',\n 'data-checked:translate-x-4 data-unchecked:translate-x-0',\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;
|
|
1
|
+
{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n styleVariant?: SparkStyle\n color?: SparkSwitchColor\n /**\n * @deprecated The switch now renders a single size. Accepted for back-compat\n * but ignored.\n */\n size?: 'sm' | 'base' | 'lg'\n /**\n * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n * for back-compat but ignored.\n */\n variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n className,\n styleVariant,\n color,\n size: _size,\n variant: _variant,\n render,\n nativeButton,\n ...props\n}: SwitchProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n 'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n 'rounded-(--spark-rounded-xl)',\n 'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n 'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n 'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n 'rounded-(--spark-rounded-lg)',\n 'data-checked:translate-x-4 data-unchecked:translate-x-0',\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IACE,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
|
|
@@ -4,13 +4,15 @@ import { accentByColor } from "../lib/accent-colors.js";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { Switch as Switch$1 } from "@base-ui/react/switch";
|
|
6
6
|
//#region src/components/switch.tsx
|
|
7
|
-
function Switch({ className, styleVariant, color, size: _size, variant: _variant, ...props }) {
|
|
7
|
+
function Switch({ className, styleVariant, color, size: _size, variant: _variant, render, nativeButton, ...props }) {
|
|
8
8
|
const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
|
|
9
9
|
const dataAccentColor = color ? accentByColor[color] : void 0;
|
|
10
10
|
return /* @__PURE__ */ jsx(Switch$1.Root, {
|
|
11
11
|
"data-slot": "switch",
|
|
12
12
|
"data-style": dataStyle,
|
|
13
13
|
"data-accent-color": dataAccentColor,
|
|
14
|
+
nativeButton: nativeButton ?? render === void 0,
|
|
15
|
+
render: render ?? /* @__PURE__ */ jsx("button", {}),
|
|
14
16
|
className: cn("peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-(--spark-rounded-xl)", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
|
|
15
17
|
...props,
|
|
16
18
|
children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n styleVariant?: SparkStyle\n color?: SparkSwitchColor\n /**\n * @deprecated The switch now renders a single size. Accepted for back-compat\n * but ignored.\n */\n size?: 'sm' | 'base' | 'lg'\n /**\n * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n * for back-compat but ignored.\n */\n variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n className,\n styleVariant,\n color,\n size: _size,\n variant: _variant,\n ...props\n}: SwitchProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n className={cn(\n 'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n 'rounded-(--spark-rounded-xl)',\n 'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n 'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n 'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n 'rounded-(--spark-rounded-lg)',\n 'data-checked:translate-x-4 data-unchecked:translate-x-0',\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CACvD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;
|
|
1
|
+
{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n styleVariant?: SparkStyle\n color?: SparkSwitchColor\n /**\n * @deprecated The switch now renders a single size. Accepted for back-compat\n * but ignored.\n */\n size?: 'sm' | 'base' | 'lg'\n /**\n * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n * for back-compat but ignored.\n */\n variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n className,\n styleVariant,\n color,\n size: _size,\n variant: _variant,\n render,\n nativeButton,\n ...props\n}: SwitchProps) {\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color ? accentByColor[color] : undefined\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n // a native button owns the caller's `id`; on Base UI's default <span> the\n // `id` lands on the hidden input and the control gets a generated one\n nativeButton={nativeButton ?? render === undefined}\n render={render ?? <button />}\n className={cn(\n 'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n 'rounded-(--spark-rounded-xl)',\n 'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n 'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n 'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n 'rounded-(--spark-rounded-lg)',\n 'data-checked:translate-x-4 data-unchecked:translate-x-0',\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CACvD,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GACT,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,oBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
|