@spark-ui/checkbox 1.4.1 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.5.0...@spark-ui/checkbox@1.6.0) (2023-04-12)
+
+### Features
+
+- **checkbox:** wrap every checkbox with its label ([19e8b6b](https://github.com/adevinta/spark/commit/19e8b6be965ec32a81e7b128f9fad373c3131a99))
+
+# [1.5.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.4.1...@spark-ui/checkbox@1.5.0) (2023-04-12)
+
+### Features
+
+- **checkbox:** keep versions ([a80adb5](https://github.com/adevinta/spark/commit/a80adb5b51680c4dc9a9b3e30d08c8f18698dbc6))
+
 ## [1.4.1](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.4.0...@spark-ui/checkbox@1.4.1) (2023-04-11)
 
 **Note:** Version bump only for package @spark-ui/checkbox

package/dist/Checkbox.d.ts

@@ -1,38 +1,4 @@
-import React, { ReactNode } from 'react';
-import { type StylesProps } from './Checkbox.variants';
-interface CheckboxRadixProps {
-    /**
-     * The checked icon to use
-     */
-    icon?: ReactNode;
-    /**
-     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-     */
-    defaultChecked?: boolean;
-    /**
-     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
-     */
-    checked?: boolean;
-    /**
-     * Event handler called when the checked state of the checkbox changes.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * When true, prevents the user from interacting with the checkbox.
-     */
-    disabled?: boolean;
-    /**
-     * When true, indicates that the user must check the checkbox before the owning form can be submitted.
-     */
-    required?: boolean;
-    /**
-     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-}
-export interface CheckboxProps extends CheckboxRadixProps, // Radix props
-StylesProps, // CVA props (variants)
-Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
-}
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+import React from 'react';
+import { type InputProps } from './CheckboxInput';
+export type CheckboxProps = InputProps;
+export declare const Checkbox: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/CheckboxInput.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { type InputStylesProps } from './CheckboxInput.styles';
+interface RadixProps {
+    /**
+     * The checked icon to use
+     */
+    icon?: ReactNode;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * When true, prevents the user from interacting with the checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must check the checkbox before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+}
+export interface InputProps extends RadixProps, // Radix props
+InputStylesProps, // CVA props (variants)
+Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/{Checkbox.variants.d.ts → CheckboxInput.styles.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-export declare const styles: (props?: ({
+export declare const inputStyles: (props?: ({
     intent?: "primary" | "success" | "alert" | "error" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export type StylesProps = VariantProps<typeof styles>;
+export type InputStylesProps = VariantProps<typeof inputStyles>;

package/dist/CheckboxLabel.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { type LabelStylesProps } from './CheckboxLabel.styles';
+export interface LabelProps extends LabelStylesProps, PropsWithChildren<React.HTMLAttributes<HTMLLabelElement>> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The id of the element the label is associated with.
+     */
+    htmlFor?: string;
+    /**
+     * When true, prevents the user from interacting with the checkbox item.
+     */
+    disabled?: boolean;
+}
+export declare const Label: ({ className, disabled, ...others }: LabelProps) => JSX.Element;

package/dist/CheckboxLabel.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const labelStyles: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type LabelStylesProps = VariantProps<typeof labelStyles>;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@radix-ui/react-checkbox"),o=require("@spark-ui/icons"),a=require("react"),i=require("@spark-ui/internal-utils"),d=require("class-variance-authority");function u(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=u(n),l=d.cva(["h-sz-20 w-sz-20 border-md peer items-center justify-center rounded-sm bg-transparent","spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0","focus-visible:ring-outline-high focus-visible:outline-none focus-visible:ring-2","hover:border-primary-container hover:outline-none hover:ring-2"],{variants:{intent:i.makeVariants({primary:["spark-state-unchecked:border-outline","spark-state-checked:border-primary spark-state-checked:bg-primary"],success:["spark-state-unchecked:border-success","spark-state-checked:border-success spark-state-checked:bg-success"],alert:["spark-state-unchecked:border-alert","spark-state-checked:border-alert spark-state-checked:bg-alert"],error:["spark-state-unchecked:border-error","spark-state-checked:border-error spark-state-checked:bg-error"]})},defaultVariants:{intent:"primary"}}),b=a.forwardRef(({intent:e,icon:t=a.createElement(o.Check,null),...r},s)=>a.createElement(c.Root,{ref:s,className:l({intent:e}),...r},a.createElement(c.Indicator,{className:"text-surface flex items-center justify-center"},t)));exports.Checkbox=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),b=require("@radix-ui/react-checkbox"),h=require("@spark-ui/icons"),k=require("@spark-ui/internal-utils"),m=require("class-variance-authority");function g(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return n.default=r,Object.freeze(n)}require("react-dom");const f=g(b),y=m.cva(["h-sz-20 w-sz-20 border-md peer items-center justify-center rounded-sm bg-transparent","spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0","focus-visible:ring-outline-high focus-visible:outline-none focus-visible:ring-2","hover:border-primary-container hover:outline-none hover:ring-2"],{variants:{intent:k.makeVariants({primary:["spark-state-unchecked:border-outline","spark-state-checked:border-primary spark-state-checked:bg-primary"],success:["spark-state-unchecked:border-success","spark-state-checked:border-success spark-state-checked:bg-success"],alert:["spark-state-unchecked:border-alert","spark-state-checked:border-alert spark-state-checked:bg-alert"],error:["spark-state-unchecked:border-error","spark-state-checked:border-error spark-state-checked:bg-error"]})},defaultVariants:{intent:"primary"}}),v=a.forwardRef(({intent:r,icon:n=a.createElement(h.Check,null),...e},t)=>a.createElement(f.Root,{ref:t,className:y({intent:r}),...e},a.createElement(f.Indicator,{className:"text-surface flex items-center justify-center"},n)));function c(){return c=Object.assign?Object.assign.bind():function(r){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t])}return r},c.apply(this,arguments)}function E(...r){return n=>r.forEach(e=>function(t,s){typeof t=="function"?t(s):t!=null&&(t.current=s)}(e,n))}const p=a.forwardRef((r,n)=>{const{children:e,...t}=r,s=a.Children.toArray(e),l=s.find(j);if(l){const o=l.props.children,i=s.map(u=>u===l?a.Children.count(o)>1?a.Children.only(null):a.isValidElement(o)?o.props.children:null:u);return a.createElement(d,c({},t,{ref:n}),a.isValidElement(o)?a.cloneElement(o,void 0,i):null)}return a.createElement(d,c({},t,{ref:n}),e)});p.displayName="Slot";const d=a.forwardRef((r,n)=>{const{children:e,...t}=r;return a.isValidElement(e)?a.cloneElement(e,{...O(t,e.props),ref:E(n,e.ref)}):a.Children.count(e)>1?a.Children.only(null):null});d.displayName="SlotClone";const w=({children:r})=>a.createElement(a.Fragment,null,r);function j(r){return a.isValidElement(r)&&r.type===w}function O(r,n){const e={...n};for(const t in n){const s=r[t],l=n[t];/^on[A-Z]/.test(t)?s&&l?e[t]=(...o)=>{l(...o),s(...o)}:s&&(e[t]=s):t==="style"?e[t]={...s,...l}:t==="className"&&(e[t]=[s,l].filter(Boolean).join(" "))}return{...r,...e}}const C=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"].reduce((r,n)=>{const e=a.forwardRef((t,s)=>{const{asChild:l,...o}=t,i=l?p:n;return a.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),a.createElement(i,c({},o,{ref:s}))});return e.displayName=`Primitive.${n}`,{...r,[n]:e}},{}),N=a.forwardRef((r,n)=>a.createElement(C.label,c({},r,{ref:n,onMouseDown:e=>{var t;(t=r.onMouseDown)===null||t===void 0||t.call(r,e),!e.defaultPrevented&&e.detail>1&&e.preventDefault()}}))),x=m.cva(["flex","items-center","gap-md","text-body-1"],{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),R=({className:r,disabled:n,...e})=>a.createElement(N,{className:x({className:r,disabled:n}),...e}),S=a.forwardRef(({children:r,...n},e)=>a.createElement(R,{disabled:n.disabled},a.createElement(v,{ref:e,...n}),r));exports.Checkbox=S;

package/dist/index.mjs

@@ -1,9 +1,65 @@
-import * as r from "@radix-ui/react-checkbox";
-import { Check as o } from "@spark-ui/icons";
-import e from "react";
-import { makeVariants as i } from "@spark-ui/internal-utils";
-import { cva as n } from "class-variance-authority";
-const d = n(["h-sz-20 w-sz-20 border-md peer items-center justify-center rounded-sm bg-transparent", "spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0", "focus-visible:ring-outline-high focus-visible:outline-none focus-visible:ring-2", "hover:border-primary-container hover:outline-none hover:ring-2"], { variants: { intent: i({ primary: ["spark-state-unchecked:border-outline", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-checked:border-error spark-state-checked:bg-error"] }) }, defaultVariants: { intent: "primary" } }), b = e.forwardRef(({ intent: t, icon: s = e.createElement(o, null), ...a }, c) => e.createElement(r.Root, { ref: c, className: d({ intent: t }), ...a }, e.createElement(r.Indicator, { className: "text-surface flex items-center justify-center" }, s)));
+import c, { forwardRef as p, Children as i, isValidElement as u, createElement as d, cloneElement as k, Fragment as g, useEffect as w } from "react";
+import * as h from "@radix-ui/react-checkbox";
+import { Check as E } from "@spark-ui/icons";
+import { makeVariants as N } from "@spark-ui/internal-utils";
+import { cva as v } from "class-variance-authority";
+import "react-dom";
+const x = v(["h-sz-20 w-sz-20 border-md peer items-center justify-center rounded-sm bg-transparent", "spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0", "focus-visible:ring-outline-high focus-visible:outline-none focus-visible:ring-2", "hover:border-primary-container hover:outline-none hover:ring-2"], { variants: { intent: N({ primary: ["spark-state-unchecked:border-outline", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-checked:border-error spark-state-checked:bg-error"] }) }, defaultVariants: { intent: "primary" } }), j = c.forwardRef(({ intent: t, icon: a = c.createElement(E, null), ...e }, r) => c.createElement(h.Root, { ref: r, className: x({ intent: t }), ...e }, c.createElement(h.Indicator, { className: "text-surface flex items-center justify-center" }, a)));
+function l() {
+  return l = Object.assign ? Object.assign.bind() : function(t) {
+    for (var a = 1; a < arguments.length; a++) {
+      var e = arguments[a];
+      for (var r in e)
+        Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]);
+    }
+    return t;
+  }, l.apply(this, arguments);
+}
+function C(...t) {
+  return (a) => t.forEach((e) => function(r, n) {
+    typeof r == "function" ? r(n) : r != null && (r.current = n);
+  }(e, a));
+}
+const y = p((t, a) => {
+  const { children: e, ...r } = t, n = i.toArray(e), s = n.find(R);
+  if (s) {
+    const o = s.props.children, m = n.map((b) => b === s ? i.count(o) > 1 ? i.only(null) : u(o) ? o.props.children : null : b);
+    return d(f, l({}, r, { ref: a }), u(o) ? k(o, void 0, m) : null);
+  }
+  return d(f, l({}, r, { ref: a }), e);
+});
+y.displayName = "Slot";
+const f = p((t, a) => {
+  const { children: e, ...r } = t;
+  return u(e) ? k(e, { ...V(r, e.props), ref: C(a, e.ref) }) : i.count(e) > 1 ? i.only(null) : null;
+});
+f.displayName = "SlotClone";
+const O = ({ children: t }) => d(g, null, t);
+function R(t) {
+  return u(t) && t.type === O;
+}
+function V(t, a) {
+  const e = { ...a };
+  for (const r in a) {
+    const n = t[r], s = a[r];
+    /^on[A-Z]/.test(r) ? n && s ? e[r] = (...o) => {
+      s(...o), n(...o);
+    } : n && (e[r] = n) : r === "style" ? e[r] = { ...n, ...s } : r === "className" && (e[r] = [n, s].filter(Boolean).join(" "));
+  }
+  return { ...t, ...e };
+}
+const D = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "span", "svg", "ul"].reduce((t, a) => {
+  const e = p((r, n) => {
+    const { asChild: s, ...o } = r, m = s ? y : a;
+    return w(() => {
+      window[Symbol.for("radix-ui")] = !0;
+    }, []), d(m, l({}, o, { ref: n }));
+  });
+  return e.displayName = `Primitive.${a}`, { ...t, [a]: e };
+}, {}), P = p((t, a) => d(D.label, l({}, t, { ref: a, onMouseDown: (e) => {
+  var r;
+  (r = t.onMouseDown) === null || r === void 0 || r.call(t, e), !e.defaultPrevented && e.detail > 1 && e.preventDefault();
+} }))), S = v(["flex", "items-center", "gap-md", "text-body-1"], { variants: { disabled: { true: ["text-neutral/dim-2", "cursor-not-allowed"], false: ["cursor-pointer"] } }, defaultVariants: { disabled: !1 } }), z = ({ className: t, disabled: a, ...e }) => c.createElement(P, { className: S({ className: t, disabled: a }), ...e }), Z = c.forwardRef(({ children: t, ...a }, e) => c.createElement(z, { disabled: a.disabled }, c.createElement(j, { ref: e, ...a }), t));
 export {
-  b as Checkbox
+  Z as Checkbox
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/checkbox",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -12,8 +12,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.3",
-    "@spark-ui/icons": "^1.4.1",
+    "@radix-ui/react-checkbox": "1",
+    "@spark-ui/icons": "^1.5.0",
     "@spark-ui/internal-utils": "1",
     "class-variance-authority": "^0.4.0"
   },
@@ -22,5 +22,5 @@
     "react-dom": "^16.8 || ^17.0 || ^18.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "eee6c8104352a4784747c836ab2911cd3a24048e"
+  "gitHead": "5f2066658e5bc8e0a3281abdd777a3b6df7bba9e"
 }