@pittorica/checkbox-card-react 0.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Davide Di Criscito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @pittorica/checkbox-card-react
+
+The `CheckboxCard` component.
+
+## Installation
+
+```bash
+npm install @pittorica/checkbox-card-react
+```
+
+## Usage
+
+```jsx
+import { CheckboxCard } from '@pittorica/checkbox-card-react';
+// TODO: Add usage example
+```
+
+## License
+
+This project is licensed under the MIT License.
+
+**Copyright (c) 2025 Davide Di Criscito**
+
+For the full details, see the [LICENSE](LICENSE) file.

package/dist/CheckboxCard.d.ts

@@ -0,0 +1,19 @@
+import { type BoxProps } from '@pittorica/box-react';
+import { type CardProps } from '@pittorica/card-react';
+import type { PittoricaColor } from '@pittorica/text-react';
+export interface CheckboxCardRootProps extends Omit<BoxProps, 'onChange'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    orientation?: 'horizontal' | 'vertical';
+    color?: PittoricaColor;
+    disabled?: boolean;
+    translucent?: boolean;
+}
+export interface CheckboxCardItemProps extends CardProps {
+    value: string;
+}
+export declare const CheckboxCard: (({ value: controlledValue, defaultValue, onValueChange, orientation, color, disabled, translucent, children, className, ...props }: CheckboxCardRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ value, children, className, style, translucent: itemTranslucent, ...props }: CheckboxCardItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=CheckboxCard.d.ts.map

package/dist/CheckboxCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../src/CheckboxCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAc5D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiDD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,KAAK,EAAE,MAAM,CAAC;CACf;AAsDD,eAAO,MAAM,YAAY,uIA5FtB,qBAAqB;0FA+CrB,qBAAqB;CA+CtB,CAAC"}

package/dist/CheckboxCard.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckboxCard } from './CheckboxCard';
+declare const meta: Meta<typeof CheckboxCard>;
+export default meta;
+export declare const Grid: StoryObj<typeof CheckboxCard>;
+export declare const Translucent: StoryObj<typeof CheckboxCard>;
+//# sourceMappingURL=CheckboxCard.stories.d.ts.map

package/dist/CheckboxCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.stories.d.ts","sourceRoot":"","sources":["../src/CheckboxCard.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,YAAY,CAqB9C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,YAAY,CAarD,CAAC"}

package/dist/CheckboxCard.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @vitest-environment jsdom
+ */
+import '@testing-library/jest-dom';
+//# sourceMappingURL=CheckboxCard.test.d.ts.map

package/dist/CheckboxCard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.test.d.ts","sourceRoot":"","sources":["../src/CheckboxCard.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxCardItemProps, CheckboxCardRootProps, } from './CheckboxCard.js';
+export { CheckboxCard } from './CheckboxCard.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,266 @@
+import { jsx as b, jsxs as W } from "react/jsx-runtime";
+import { createContext as D, useState as O, use as _ } from "react";
+function B(t) {
+  var a, e, r = "";
+  if (typeof t == "string" || typeof t == "number") r += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (a = 0; a < o; a++) t[a] && (e = B(t[a])) && (r && (r += " "), r += e);
+  } else for (e in t) t[e] && (r && (r += " "), r += e);
+  return r;
+}
+function R() {
+  for (var t, a, e = 0, r = "", o = arguments.length; e < o; e++) (t = arguments[e]) && (a = B(t)) && (r && (r += " "), r += a);
+  return r;
+}
+function T(t) {
+  var a, e, r = "";
+  if (typeof t == "string" || typeof t == "number") r += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (a = 0; a < o; a++) t[a] && (e = T(t[a])) && (r && (r += " "), r += e);
+  } else for (e in t) t[e] && (r && (r += " "), r += e);
+  return r;
+}
+function z() {
+  for (var t, a, e = 0, r = "", o = arguments.length; e < o; e++) (t = arguments[e]) && (a = T(t)) && (r && (r += " "), r += a);
+  return r;
+}
+const F = ({
+  ref: t,
+  as: a = "div",
+  children: e,
+  display: r,
+  m: o,
+  mt: n,
+  mr: c,
+  mb: h,
+  ml: p,
+  p: g,
+  pt: m,
+  pr: l,
+  pb: s,
+  pl: d,
+  width: v,
+  height: f,
+  position: u,
+  style: y,
+  className: x,
+  href: $,
+  target: C,
+  rel: k,
+  htmlFor: N,
+  type: A,
+  disabled: I,
+  ...j
+}) => {
+  const i = {};
+  r && (i.display = r), v && (i.width = v), f && (i.height = f), u && (i.position = u), o && (i.margin = `var(--pittorica-space-${o})`), n && (i.marginTop = `var(--pittorica-space-${n})`), c && (i.marginRight = `var(--pittorica-space-${c})`), h && (i.marginBottom = `var(--pittorica-space-${h})`), p && (i.marginLeft = `var(--pittorica-space-${p})`), g && (i.padding = `var(--pittorica-space-${g})`), m && (i.paddingTop = `var(--pittorica-space-${m})`), l && (i.paddingRight = `var(--pittorica-space-${l})`), s && (i.paddingBottom = `var(--pittorica-space-${s})`), d && (i.paddingLeft = `var(--pittorica-space-${d})`);
+  const w = {
+    ...y,
+    ...i
+  };
+  return /* @__PURE__ */ b(
+    a,
+    {
+      ref: t,
+      className: z("pittorica-box", x),
+      style: w,
+      href: $,
+      target: C,
+      rel: k,
+      htmlFor: N,
+      type: A,
+      disabled: I,
+      ...j,
+      children: e
+    }
+  );
+};
+F.displayName = "Box";
+function L(t) {
+  var a, e, r = "";
+  if (typeof t == "string" || typeof t == "number") r += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (a = 0; a < o; a++) t[a] && (e = L(t[a])) && (r && (r += " "), r += e);
+  } else for (e in t) t[e] && (r && (r += " "), r += e);
+  return r;
+}
+function G() {
+  for (var t, a, e = 0, r = "", o = arguments.length; e < o; e++) (t = arguments[e]) && (a = L(t)) && (r && (r += " "), r += a);
+  return r;
+}
+function S(t) {
+  var a, e, r = "";
+  if (typeof t == "string" || typeof t == "number") r += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (a = 0; a < o; a++) t[a] && (e = S(t[a])) && (r && (r += " "), r += e);
+  } else for (e in t) t[e] && (r && (r += " "), r += e);
+  return r;
+}
+function H() {
+  for (var t, a, e = 0, r = "", o = arguments.length; e < o; e++) (t = arguments[e]) && (a = S(t)) && (r && (r += " "), r += a);
+  return r;
+}
+const q = ({
+  ref: t,
+  as: a = "div",
+  children: e,
+  display: r,
+  m: o,
+  mt: n,
+  mr: c,
+  mb: h,
+  ml: p,
+  p: g,
+  pt: m,
+  pr: l,
+  pb: s,
+  pl: d,
+  width: v,
+  height: f,
+  position: u,
+  style: y,
+  className: x,
+  href: $,
+  target: C,
+  rel: k,
+  htmlFor: N,
+  type: A,
+  disabled: I,
+  ...j
+}) => {
+  const i = {};
+  r && (i.display = r), v && (i.width = v), f && (i.height = f), u && (i.position = u), o && (i.margin = `var(--pittorica-space-${o})`), n && (i.marginTop = `var(--pittorica-space-${n})`), c && (i.marginRight = `var(--pittorica-space-${c})`), h && (i.marginBottom = `var(--pittorica-space-${h})`), p && (i.marginLeft = `var(--pittorica-space-${p})`), g && (i.padding = `var(--pittorica-space-${g})`), m && (i.paddingTop = `var(--pittorica-space-${m})`), l && (i.paddingRight = `var(--pittorica-space-${l})`), s && (i.paddingBottom = `var(--pittorica-space-${s})`), d && (i.paddingLeft = `var(--pittorica-space-${d})`);
+  const w = {
+    ...y,
+    ...i
+  };
+  return /* @__PURE__ */ b(
+    a,
+    {
+      ref: t,
+      className: H("pittorica-box", x),
+      style: w,
+      href: $,
+      target: C,
+      rel: k,
+      htmlFor: N,
+      type: A,
+      disabled: I,
+      ...j,
+      children: e
+    }
+  );
+};
+q.displayName = "Box";
+const J = ({
+  variant: t = "surface",
+  translucent: a = !1,
+  children: e,
+  className: r,
+  style: o,
+  ...n
+}) => /* @__PURE__ */ b(
+  q,
+  {
+    className: G(
+      "pittorica-card",
+      `pittorica-card--variant-${t}`,
+      { "pittorica-card--translucent": a },
+      r
+    ),
+    style: o,
+    ...n,
+    children: e
+  }
+), E = D(
+  null
+), K = ({
+  value: t,
+  defaultValue: a = [],
+  onValueChange: e,
+  orientation: r = "vertical",
+  color: o = "indigo",
+  disabled: n,
+  translucent: c,
+  children: h,
+  className: p,
+  ...g
+}) => {
+  const [m, l] = O(a), s = t !== void 0, d = s ? t : m;
+  return /* @__PURE__ */ b(
+    E,
+    {
+      value: {
+        value: d,
+        onItemChange: (f) => {
+          const u = d.includes(f) ? d.filter((y) => y !== f) : [...d, f];
+          s || l(u), e == null || e(u);
+        },
+        color: o,
+        disabled: n,
+        translucent: c
+      },
+      children: /* @__PURE__ */ b(
+        F,
+        {
+          className: R("pittorica-checkbox-card-root", p),
+          "data-orientation": r,
+          role: "group",
+          ...g,
+          children: h
+        }
+      )
+    }
+  );
+}, M = ({
+  value: t,
+  children: a,
+  className: e,
+  style: r,
+  translucent: o,
+  ...n
+}) => {
+  var l, s;
+  const c = _(E);
+  if (!c)
+    throw new Error("CheckboxCard.Item must be used within CheckboxCard.Root");
+  const h = o ?? c.translucent, p = c.value.includes(t), m = c.color !== "inherit" && !((l = c.color) != null && l.startsWith("#")) && !((s = c.color) != null && s.startsWith("rgb")) ? `var(--pittorica-${c.color}-9)` : c.color;
+  return /* @__PURE__ */ W(
+    J,
+    {
+      ...n,
+      as: "label",
+      translucent: h,
+      className: R("pittorica-checkbox-card-item", e),
+      "data-state": p ? "checked" : "unchecked",
+      "data-disabled": c.disabled,
+      style: {
+        "--_checkbox-card-color": m,
+        ...r
+      },
+      children: [
+        /* @__PURE__ */ b(
+          "input",
+          {
+            type: "checkbox",
+            className: "pittorica-checkbox-card-input",
+            style: { position: "absolute", opacity: 0, pointerEvents: "none" },
+            checked: p,
+            disabled: c.disabled,
+            onChange: () => c.onItemChange(t)
+          }
+        ),
+        a
+      ]
+    }
+  );
+}, U = Object.assign(K, {
+  Item: M
+});
+export {
+  U as CheckboxCard
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@pittorica/checkbox-card-react",
+  "version": "0.22.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@pittorica/box-react": "0.22.0",
+    "@pittorica/card-react": "0.22.0",
+    "@pittorica/text-react": "0.22.0",
+    "@pittorica/flex-react": "0.22.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jsdom": "^22.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^2.1.9",
+    "@pittorica/heading-react": "0.22.0",
+    "@pittorica/theme-react": "0.22.0",
+    "pittorica": "0.22.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:js && npm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}