@spark-ui/checkbox 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.7.0...@spark-ui/checkbox@1.8.0) (2023-04-19)
+
+### Features
+
+- **checkbox:** indeterminate status ([f5f7fb8](https://github.com/adevinta/spark/commit/f5f7fb88843559b25b2abf69ac32023fed973b15))
+- **checkbox:** indeterminate status ([e6a66f1](https://github.com/adevinta/spark/commit/e6a66f151f907b848e1947a2799343dc70f9679a))
+- **checkbox:** indeterminate status ([7f41e99](https://github.com/adevinta/spark/commit/7f41e996ca2ec85137a8f5518e98222a2dd6471a))
+
 # [1.7.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.6.7...@spark-ui/checkbox@1.7.0) (2023-04-19)
 
 ### Features

package/dist/CheckboxInput.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type InputStylesProps } from './CheckboxInput.styles';
+type CheckedStatus = boolean | 'indeterminate';
 interface RadixProps {
     /**
      * The checked icon to use
@@ -8,15 +9,15 @@ interface RadixProps {
     /**
      * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
      */
-    defaultChecked?: boolean;
+    defaultChecked?: CheckedStatus;
     /**
      * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
      */
-    checked?: boolean;
+    checked?: CheckedStatus;
     /**
      * Event handler called when the checked state of the checkbox changes.
      */
-    onCheckedChange?: (checked: boolean) => void;
+    onCheckedChange?: (checked: CheckedStatus) => void;
     /**
      * When true, prevents the user from interacting with the checkbox.
      */
@@ -32,7 +33,7 @@ interface RadixProps {
 }
 export interface InputProps extends RadixProps, // Radix props
 InputStylesProps, // CVA props (variants)
-Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'checked' | 'defaultChecked'> {
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/index.js

@@ -1 +1 @@
-"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),o=s.find(j);if(o){const l=o.props.children,i=s.map(u=>u===o?a.Children.count(l)>1?a.Children.only(null):a.isValidElement(l)?l.props.children:null:u);return a.createElement(d,c({},t,{ref:n}),a.isValidElement(l)?a.cloneElement(l,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],o=n[t];/^on[A-Z]/.test(t)?s&&o?e[t]=(...l)=>{o(...l),s(...l)}:s&&(e[t]=s):t==="style"?e[t]={...s,...o}:t==="className"&&(e[t]=[s,o].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:o,...l}=t,i=o?p:n;return a.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),a.createElement(i,c({},l,{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,{"data-spark-component":"checkbox",disabled:n.disabled},a.createElement(v,{ref:e,...n}),r));exports.Checkbox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),m=require("@radix-ui/react-checkbox"),c=require("@spark-ui/icons"),p=require("@spark-ui/use-merge-refs"),f=require("@spark-ui/internal-utils"),d=require("class-variance-authority"),h=require("@radix-ui/react-label");function g(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const i=g(m),y=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:f.makeVariants({primary:["spark-state-unchecked:border-outline","spark-state-indeterminate:border-primary spark-state-indeterminate:bg-primary","spark-state-checked:border-primary spark-state-checked:bg-primary"],success:["spark-state-unchecked:border-success","spark-state-indeterminate:border-success spark-state-indeterminate:bg-success","spark-state-checked:border-success spark-state-checked:bg-success"],alert:["spark-state-unchecked:border-alert","spark-state-indeterminate:border-alert spark-state-indeterminate:bg-alert","spark-state-checked:border-alert spark-state-checked:bg-alert"],error:["spark-state-unchecked:border-error","spark-state-indeterminate:border-error spark-state-indeterminate:bg-error","spark-state-checked:border-error spark-state-checked:bg-error"]})},defaultVariants:{intent:"primary"}}),v=a.forwardRef(({intent:e,icon:r,...t},s)=>{const[o,l]=a.useState(),u=p.useMergeRefs(s,n=>{l(n?.getAttribute("aria-checked"))}),b=(({icon:n,checked:k})=>{if(n)return n;switch(k){case"true":return a.createElement(c.Check,null);case"mixed":return a.createElement(c.Minus,null);default:return null}})({icon:r,checked:o});return a.createElement(i.Root,{ref:u,className:y({intent:e}),...t},a.createElement(i.Indicator,{className:"text-surface flex items-center justify-center"},b))}),x=d.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}}),j=({className:e,disabled:r,...t})=>a.createElement(h.Label,{className:x({className:e,disabled:r}),...t}),q=a.forwardRef(({children:e,...r},t)=>a.createElement(j,{"data-spark-component":"checkbox",disabled:r.disabled},a.createElement(v,{ref:t,...r}),e));exports.Checkbox=q;

package/dist/index.mjs

@@ -1,65 +1,27 @@
-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 x } from "@spark-ui/internal-utils";
-import { cva as v } from "class-variance-authority";
-import "react-dom";
-const N = 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: x({ 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: N({ 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]);
+import e, { forwardRef as k, useState as u } from "react";
+import * as c from "@radix-ui/react-checkbox";
+import { Minus as b, Check as f } from "@spark-ui/icons";
+import { useMergeRefs as h } from "@spark-ui/use-merge-refs";
+import { makeVariants as g } from "@spark-ui/internal-utils";
+import { cva as i } from "class-variance-authority";
+import { Label as y } from "@radix-ui/react-label";
+const v = i(["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: g({ primary: ["spark-state-unchecked:border-outline", "spark-state-indeterminate:border-primary spark-state-indeterminate:bg-primary", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-indeterminate:border-success spark-state-indeterminate:bg-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-indeterminate:border-alert spark-state-indeterminate:bg-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-indeterminate:border-error spark-state-indeterminate:bg-error", "spark-state-checked:border-error spark-state-checked:bg-error"] }) }, defaultVariants: { intent: "primary" } }), x = k(({ intent: t, icon: r, ...a }, n) => {
+  const [o, d] = u(), l = h(n, (s) => {
+    d(s?.getAttribute("aria-checked"));
+  }), m = (({ icon: s, checked: p }) => {
+    if (s)
+      return s;
+    switch (p) {
+      case "true":
+        return e.createElement(f, null);
+      case "mixed":
+        return e.createElement(b, null);
+      default:
+        return null;
     }
-    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, { "data-spark-component": "checkbox", disabled: a.disabled }, c.createElement(j, { ref: e, ...a }), t));
+  })({ icon: r, checked: o });
+  return e.createElement(c.Root, { ref: l, className: v({ intent: t }), ...a }, e.createElement(c.Indicator, { className: "text-surface flex items-center justify-center" }, m));
+}), E = i(["flex", "items-center", "gap-md", "text-body-1"], { variants: { disabled: { true: ["text-neutral/dim-2", "cursor-not-allowed"], false: ["cursor-pointer"] } }, defaultVariants: { disabled: !1 } }), w = ({ className: t, disabled: r, ...a }) => e.createElement(y, { className: E({ className: t, disabled: r }), ...a }), M = e.forwardRef(({ children: t, ...r }, a) => e.createElement(w, { "data-spark-component": "checkbox", disabled: r.disabled }, e.createElement(x, { ref: a, ...r }), t));
 export {
-  Z as Checkbox
+  M as Checkbox
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/checkbox",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,10 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "1",
-    "@spark-ui/icons": "^1.7.1",
-    "@spark-ui/internal-utils": "^1.5.0",
+    "@radix-ui/react-label": "^2.0.1",
+    "@spark-ui/icons": "1",
+    "@spark-ui/internal-utils": "1",
+    "@spark-ui/use-merge-refs": "0",
     "class-variance-authority": "0.4.0"
   },
   "peerDependencies": {
@@ -22,5 +24,9 @@
     "react-dom": "^16.8 || ^17.0 || ^18.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "ad5cc14d188d9e9319f7782cd1a454bd926f0a67"
+  "devDependencies": {
+    "@spark-ui/button": "1",
+    "@spark-ui/radio": "1"
+  },
+  "gitHead": "bfa98062c937ff5b2650dbab457a503578a42cb9"
 }