@a-type/ui 2.1.7 → 2.1.9

package/dist/cjs/components/checkbox/Checkbox.d.ts

@@ -1,8 +1,16 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { ComponentProps } from 'react';
-export declare const CheckboxRoot: import("react").FunctionComponent<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare function CheckboxIndicator({ children, className, ...props }: CheckboxPrimitive.CheckboxIndicatorProps): import("react/jsx-runtime.js").JSX.Element;
-export declare const Checkbox: (({ ref, ...props }: ComponentProps<typeof CheckboxRoot>) => import("react/jsx-runtime.js").JSX.Element) & {
-    Root: import("react").FunctionComponent<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
+    /**
+     * The checked visual state. Prominent mode means the checked version is visually
+     * emphasized to the user. Faded means the checked version is visually de-emphasized.
+     * Prominent is appropriate when the user's attention should be drawn to the 'on' state,
+     * while faded is appropriate when a checked state means the item is 'done,' like in a task list.
+     */
+    checkedMode?: 'prominent' | 'faded';
+}
+export declare function CheckboxRoot({ className, checkedMode, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxIndicator({ children, className, ...props }: CheckboxPrimitive.CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ((props: CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: typeof CheckboxRoot;
     Indicator: typeof CheckboxIndicator;
 };

package/dist/cjs/components/checkbox/Checkbox.js

@@ -49,23 +49,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.CheckboxRoot = void 0;
+exports.Checkbox = void 0;
+exports.CheckboxRoot = CheckboxRoot;
 exports.CheckboxIndicator = CheckboxIndicator;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
 const react_icons_1 = require("@radix-ui/react-icons");
 const clsx_1 = __importDefault(require("clsx"));
-const withClassName_js_1 = require("../../hooks/withClassName.js");
-exports.CheckboxRoot = (0, withClassName_js_1.withClassName)(CheckboxPrimitive.Root, (0, clsx_1.default)('layer-components:w-28px layer-components:h-28px layer-components:flex-shrink-0 layer-components:relative layer-components:bg-white layer-components:border-default layer-components:transition layer-components:rounded-lg layer-components:shadow-sm', 'layer-components:focus-visible:outline-off layer-components:focus-visible:shadow-focus', 'layer-components:[&[data-state=checked]]:bg-primary layer-components:[&[data-state=checked]]:border-primary-dark', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]', 'layer-components:[&:disabled]:bg-transparent layer-components:[&:disabled]:border-gray-light layer-components:[&:disabled]:shadow-none'));
+function CheckboxRoot(_a) {
+    var { className, checkedMode = 'prominent' } = _a, props = __rest(_a, ["className", "checkedMode"]);
+    return ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:w-28px layer-components:h-28px layer-components:flex-shrink-0 layer-components:relative layer-components:bg-white layer-components:border-default layer-components:transition layer-components:rounded-lg layer-components:shadow-sm', 'layer-components:focus-visible:outline-off layer-components:focus-visible:shadow-focus', checkedMode === 'faded'
+            ? 'layer-components:[&[data-state=checked]]:bg-primary layer-components:[&[data-state=checked]]:animate-checkbox-fade'
+            : 'layer-components:[&[data-state=checked]]:bg-primary layer-components:[&[data-state=checked]]:border-primary-dark', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]', 'layer-components:[&:disabled]:bg-transparent layer-components:[&:disabled]:border-gray-light layer-components:[&:disabled]:shadow-none') })));
+}
 function CheckboxIndicator(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     return ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Indicator, Object.assign({ className: (0, clsx_1.default)('absolute center translate-[-50%] color-black', className) }, props, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: 18, height: 18 }) })));
 }
-exports.Checkbox = Object.assign(function Checkbox(_a) {
-    var { ref } = _a, props = __rest(_a, ["ref"]);
-    return ((0, jsx_runtime_1.jsx)(exports.CheckboxRoot, Object.assign({ ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(CheckboxIndicator, {}) })));
+exports.Checkbox = Object.assign(function Checkbox(props) {
+    return ((0, jsx_runtime_1.jsx)(CheckboxRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CheckboxIndicator, {}) })));
 }, {
-    Root: exports.CheckboxRoot,
+    Root: CheckboxRoot,
     Indicator: CheckboxIndicator,
 });
 //# sourceMappingURL=Checkbox.js.map

package/dist/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,8CAgBC;;AAjCD,4EAA8D;AAC9D,uDAAkD;AAClD,gDAA8B;AAE9B,mEAA6D;AAEhD,QAAA,YAAY,GAAG,IAAA,gCAAa,EACxC,iBAAiB,CAAC,IAAI,EACtB,IAAA,cAAU,EACT,iHAAiH,EACjH,2DAA2D,EAC3D,2EAA2E,EAC3E,iFAAiF,EACjF,8EAA8E,CAC9E,CACD,CAAC;AAEF,SAAgB,iBAAiB,CAAC,EAIS;QAJT,EACjC,QAAQ,EACR,SAAS,OAEiC,EADvC,KAAK,cAHyB,yBAIjC,CADQ;IAER,OAAO,CACN,uBAAC,iBAAiB,CAAC,SAAS,kBAC3B,SAAS,EAAE,IAAA,cAAU,EACpB,8CAA8C,EAC9C,SAAS,CACT,IACG,KAAK,cAER,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAC,uBAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,IACpB,CAC9B,CAAC;AACH,CAAC;AAEY,QAAA,QAAQ,GAAG,MAAM,CAAC,MAAM,CACpC,SAAS,QAAQ,CAAC,EAAsD;QAAtD,EAAE,GAAG,OAAiD,EAA5C,KAAK,cAAf,OAAiB,CAAF;IAChC,OAAO,CACN,uBAAC,oBAAY,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,cAChC,uBAAC,iBAAiB,KAAG,IACP,CACf,CAAC;AACH,CAAC,EAED;IACC,IAAI,EAAE,oBAAY;IAClB,SAAS,EAAE,iBAAiB;CAC5B,CACD,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBb,oCAmBC;AAED,8CAgBC;;AAnDD,4EAA8D;AAC9D,uDAAkD;AAClD,gDAA8B;AAY9B,SAAgB,YAAY,CAAC,EAIb;QAJa,EAC5B,SAAS,EACT,WAAW,GAAG,WAAW,OAEV,EADZ,KAAK,cAHoB,4BAI5B,CADQ;IAER,OAAO,CACN,uBAAC,iBAAiB,CAAC,IAAI,oBAClB,KAAK,IACT,SAAS,EAAE,IAAA,cAAU,EACpB,iHAAiH,EACjH,2DAA2D,EAC3D,WAAW,KAAK,OAAO;YACtB,CAAC,CAAC,6EAA6E;YAC/E,CAAC,CAAC,2EAA2E,EAC9E,iFAAiF,EACjF,8EAA8E,CAC9E,IACA,CACF,CAAC;AACH,CAAC;AAED,SAAgB,iBAAiB,CAAC,EAIS;QAJT,EACjC,QAAQ,EACR,SAAS,OAEiC,EADvC,KAAK,cAHyB,yBAIjC,CADQ;IAER,OAAO,CACN,uBAAC,iBAAiB,CAAC,SAAS,kBAC3B,SAAS,EAAE,IAAA,cAAU,EACpB,8CAA8C,EAC9C,SAAS,CACT,IACG,KAAK,cAER,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAC,uBAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,IACpB,CAC9B,CAAC;AACH,CAAC;AAEY,QAAA,QAAQ,GAAG,MAAM,CAAC,MAAM,CACpC,SAAS,QAAQ,CAAC,KAAoB;IACrC,OAAO,CACN,uBAAC,YAAY,oBAAK,KAAK,cACtB,uBAAC,iBAAiB,KAAG,IACP,CACf,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,iBAAiB;CAC5B,CACD,CAAC"}

package/dist/cjs/components/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox.js';
+declare const meta: {
+    title: string;
+    component: ((props: import("./Checkbox.js").CheckboxProps) => import("react/jsx-runtime.js").JSX.Element) & {
+        Root: typeof import("./Checkbox.js").CheckboxRoot;
+        Indicator: typeof import("./Checkbox.js").CheckboxIndicator;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/cjs/components/checkbox/Checkbox.stories.js

@@ -0,0 +1,16 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const Checkbox_js_1 = require("./Checkbox.js");
+const meta = {
+    title: 'Checkbox',
+    component: Checkbox_js_1.Checkbox,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {};
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/cjs/components/checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;AACA,+CAAyC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,sBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC"}