@a-type/ui 0.6.13 → 0.6.15

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.
Files changed (22) hide show
  1. package/dist/cjs/components/button/ConfirmedButton.d.ts +2 -1
  2. package/dist/cjs/components/button/ConfirmedButton.js +2 -2
  3. package/dist/cjs/components/button/ConfirmedButton.js.map +1 -1
  4. package/dist/cjs/components/card/Card.d.ts +2 -0
  5. package/dist/cjs/components/card/Card.js +5 -3
  6. package/dist/cjs/components/card/Card.js.map +1 -1
  7. package/dist/cjs/components/card/Card.stories.d.ts +4 -0
  8. package/dist/cjs/components/card/Card.stories.js +13 -1
  9. package/dist/cjs/components/card/Card.stories.js.map +1 -1
  10. package/dist/esm/components/button/ConfirmedButton.d.ts +2 -1
  11. package/dist/esm/components/button/ConfirmedButton.js +2 -2
  12. package/dist/esm/components/button/ConfirmedButton.js.map +1 -1
  13. package/dist/esm/components/card/Card.d.ts +2 -0
  14. package/dist/esm/components/card/Card.js +5 -3
  15. package/dist/esm/components/card/Card.js.map +1 -1
  16. package/dist/esm/components/card/Card.stories.d.ts +4 -0
  17. package/dist/esm/components/card/Card.stories.js +12 -0
  18. package/dist/esm/components/card/Card.stories.js.map +1 -1
  19. package/package.json +1 -1
  20. package/src/components/button/ConfirmedButton.tsx +3 -1
  21. package/src/components/card/Card.stories.tsx +76 -0
  22. package/src/components/card/Card.tsx +11 -4
package/dist/cjs/components/button/ConfirmedButton.d.ts CHANGED
@@ -7,5 +7,6 @@ export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {
7
7
  cancelAction?: string;
8
8
  onConfirm: () => void | Promise<any>;
9
9
  skip?: boolean;
10
+ confirmColor?: ButtonProps['color'];
10
11
  }
11
- export declare function ConfirmedButton({ confirmText, confirmTitle, confirmAction, cancelAction, onConfirm, skip, ...rest }: ConfirmedButtonProps): JSX.Element;
12
+ export declare function ConfirmedButton({ confirmText, confirmTitle, confirmAction, cancelAction, confirmColor, onConfirm, skip, ...rest }: ConfirmedButtonProps): JSX.Element;
package/dist/cjs/components/button/ConfirmedButton.js CHANGED
@@ -20,7 +20,7 @@ const dialog_js_1 = require("../dialog.js");
20
20
  const typography_js_1 = require("../typography.js");
21
21
  const Button_js_1 = require("./Button.js");
22
22
  function ConfirmedButton(_a) {
23
- var { confirmText, confirmTitle = 'Are you sure?', confirmAction = 'OK', cancelAction = 'Nevermind', onConfirm, skip } = _a, rest = __rest(_a, ["confirmText", "confirmTitle", "confirmAction", "cancelAction", "onConfirm", "skip"]);
23
+ var { confirmText, confirmTitle = 'Are you sure?', confirmAction = 'OK', cancelAction = 'Nevermind', confirmColor = 'primary', onConfirm, skip } = _a, rest = __rest(_a, ["confirmText", "confirmTitle", "confirmAction", "cancelAction", "confirmColor", "onConfirm", "skip"]);
24
24
  const [open, setOpen] = (0, react_1.useState)(false);
25
25
  const [loading, setLoading] = (0, react_1.useState)(false);
26
26
  const confirm = (0, react_1.useCallback)(async () => {
@@ -36,7 +36,7 @@ function ConfirmedButton(_a) {
36
36
  if (skip) {
37
37
  return (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, rest));
38
38
  }
39
- return ((0, jsx_runtime_1.jsxs)(dialog_js_1.Dialog, Object.assign({ open: open, onOpenChange: setOpen }, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogTrigger, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, rest)) })), (0, jsx_runtime_1.jsxs)(dialog_js_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogTitle, { children: confirmTitle }), (0, jsx_runtime_1.jsx)(typography_js_1.P, { children: confirmText }), (0, jsx_runtime_1.jsxs)(dialog_js_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogClose, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { children: cancelAction }) })), (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ loading: loading, onClick: confirm, color: "primary" }, { children: confirmAction }))] })] })] })));
39
+ return ((0, jsx_runtime_1.jsxs)(dialog_js_1.Dialog, Object.assign({ open: open, onOpenChange: setOpen }, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogTrigger, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, rest)) })), (0, jsx_runtime_1.jsxs)(dialog_js_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogTitle, { children: confirmTitle }), (0, jsx_runtime_1.jsx)(typography_js_1.P, { children: confirmText }), (0, jsx_runtime_1.jsxs)(dialog_js_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(dialog_js_1.DialogClose, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { children: cancelAction }) })), (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ loading: loading, onClick: confirm, color: confirmColor }, { children: confirmAction }))] })] })] })));
40
40
  }
41
41
  exports.ConfirmedButton = ConfirmedButton;
42
42
  //# sourceMappingURL=ConfirmedButton.js.map
package/dist/cjs/components/button/ConfirmedButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAA8C;AAC9C,4CAOsB;AACtB,oDAAqC;AACrC,2CAAkD;AAWlD,SAAgB,eAAe,CAAC,EAQT;QARS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cAPwB,qFAQ/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI;YACH,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;SACf;gBAAS;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;SAClB;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE;QACT,OAAO,uBAAC,kBAAM,oBAAK,IAAI,EAAI,CAAC;KAC5B;IAED,OAAO,CACN,wBAAC,kBAAM,kBAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,iBACxC,uBAAC,yBAAa,kBAAC,OAAO,sBACrB,uBAAC,kBAAM,oBAAK,IAAI,EAAI,IACL,EAChB,wBAAC,yBAAa,eACb,uBAAC,uBAAW,cAAE,YAAY,GAAe,EACzC,uBAAC,iBAAC,cAAE,WAAW,GAAK,EACpB,wBAAC,yBAAa,eACb,uBAAC,uBAAW,kBAAC,OAAO,sBACnB,uBAAC,kBAAM,cAAE,YAAY,GAAU,IAClB,EACd,uBAAC,kBAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,SAAS,gBACzD,aAAa,IACN,IACM,IACD,KACR,CACT,CAAC;AACH,CAAC;AA5CD,0CA4CC"}
1
+ {"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAA8C;AAC9C,4CAOsB;AACtB,oDAAqC;AACrC,2CAAkD;AAYlD,SAAgB,eAAe,CAAC,EAST;QATS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cARwB,qGAS/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI;YACH,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;SACf;gBAAS;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;SAClB;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE;QACT,OAAO,uBAAC,kBAAM,oBAAK,IAAI,EAAI,CAAC;KAC5B;IAED,OAAO,CACN,wBAAC,kBAAM,kBAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,iBACxC,uBAAC,yBAAa,kBAAC,OAAO,sBACrB,uBAAC,kBAAM,oBAAK,IAAI,EAAI,IACL,EAChB,wBAAC,yBAAa,eACb,uBAAC,uBAAW,cAAE,YAAY,GAAe,EACzC,uBAAC,iBAAC,cAAE,WAAW,GAAK,EACpB,wBAAC,yBAAa,eACb,uBAAC,uBAAW,kBAAC,OAAO,sBACnB,uBAAC,kBAAM,cAAE,YAAY,GAAU,IAClB,EACd,uBAAC,kBAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,gBAC7D,aAAa,IACN,IACM,IACD,KACR,CACT,CAAC;AACH,CAAC;AA7CD,0CA6CC"}
package/dist/cjs/components/card/Card.d.ts CHANGED
@@ -8,6 +8,8 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
8
8
  onClick?: ((ev: MouseEvent) => void) | undefined;
9
9
  children?: ReactNode;
10
10
  compact?: boolean | undefined;
11
+ /** forces non-interactive version */
12
+ nonInteractive?: boolean | undefined;
11
13
  } & import("react").RefAttributes<any>>;
12
14
  export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
13
15
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
package/dist/cjs/components/card/Card.js CHANGED
@@ -23,9 +23,11 @@ const react_slot_1 = require("@radix-ui/react-slot");
23
23
  const clsx_1 = __importDefault(require("clsx"));
24
24
  exports.CardRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-gray-1 layer-components:text-black');
25
25
  exports.CardMain = (0, react_1.forwardRef)(function CardMain(_a, ref) {
26
- var { asChild, className, compact } = _a, rest = __rest(_a, ["asChild", "className", "compact"]);
27
- const Comp = asChild ? react_slot_1.Slot : 'button';
28
- return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:cursor-pointer layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:hover:bg-lightBlend layer-components:hover:color-black', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', className), "data-compact": compact }, rest)));
26
+ var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
27
+ const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
28
+ const Comp = asChild ? react_slot_1.Slot : isInteractive ? 'button' : 'div';
29
+ return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
30
+ 'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
29
31
  });
30
32
  exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-auto layer-components:bg-white layer-components:p-2 layer-components:rounded-lg layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend layer-components:text-md layer-components:max-h-80px layer-components:overflow-hidden layer-components:text-ellipsis layer-components:max-w-full layer-components:text-inherit', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
31
33
  exports.CardImage = (0, hooks_js_1.withClassName)('div', 'layer-components:absolute layer-components:z-0 layer-components:right-0 layer-components:top-0 layer-components:bottom-0 layer-components:w-full layer-components:h-full');
package/dist/cjs/components/card/Card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0D;AAC1D,6CAA+C;AAC/C,qDAA4C;AAC5C,gDAA8B;AAEjB,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAShC,SAAS,QAAQ,CAAC,EAAwC,EAAE,GAAG;QAA7C,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAtC,mCAAwC,CAAF;IACzD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,kJAAkJ,EAClJ,oDAAoD,EACpD,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
1
+ {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0D;AAC1D,6CAA+C;AAC/C,qDAA4C;AAC5C,gDAA8B;AAEjB,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAWhC,SAAS,QAAQ,CAClB,EAAwD,EACxD,GAAG;QADH,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,OAAW,EAAN,IAAI,cAAtD,qDAAwD,CAAF;IAGtD,MAAM,aAAa,GAAG,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/D,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,mIAAmI,EACnI,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,aAAa;YACZ,oFAAoF,EACrF,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
package/dist/cjs/components/card/Card.stories.d.ts CHANGED
@@ -16,3 +16,7 @@ declare const meta: {
16
16
  export default meta;
17
17
  type Story = StoryObj<typeof CardRoot>;
18
18
  export declare const Default: Story;
19
+ export declare const Compact: Story;
20
+ export declare const NonInteractive: Story;
21
+ export declare const AsChild: Story;
22
+ export declare const AsChildNonInteractive: Story;
package/dist/cjs/components/card/Card.stories.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // @unocss-include
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Default = void 0;
4
+ exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const Card_js_1 = require("./Card.js");
7
7
  const button_js_1 = require("../button.js");
@@ -16,6 +16,18 @@ const meta = {
16
16
  };
17
17
  exports.default = meta;
18
18
  exports.Default = {
19
+ render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ onClick: () => alert('clicked') }, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
20
+ };
21
+ exports.Compact = {
22
+ render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ compact: true }, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
23
+ };
24
+ exports.NonInteractive = {
19
25
  render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) }), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
20
26
  };
27
+ exports.AsChild = {
28
+ render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#here" }, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) })) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
29
+ };
30
+ exports.AsChildNonInteractive = {
31
+ render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children: (0, jsx_runtime_1.jsx)("button", { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
32
+ };
21
33
  //# sourceMappingURL=Card.stories.js.map
package/dist/cjs/components/card/Card.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAMmB;AACnB,4CAAsC;AACtC,wCAAkC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,kBAAQ;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;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,wBAAC,kBAAQ,eACR,uBAAC,kBAAQ,cACR,uBAAC,mBAAS,6BAAuB,GACvB,EACX,uBAAC,oBAAU,cACV,wBAAC,qBAAW,eACX,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}
1
+ {"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/button/ConfirmedButton.d.ts CHANGED
@@ -7,5 +7,6 @@ export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {
7
7
  cancelAction?: string;
8
8
  onConfirm: () => void | Promise<any>;
9
9
  skip?: boolean;
10
+ confirmColor?: ButtonProps['color'];
10
11
  }
11
- export declare function ConfirmedButton({ confirmText, confirmTitle, confirmAction, cancelAction, onConfirm, skip, ...rest }: ConfirmedButtonProps): JSX.Element;
12
+ export declare function ConfirmedButton({ confirmText, confirmTitle, confirmAction, cancelAction, confirmColor, onConfirm, skip, ...rest }: ConfirmedButtonProps): JSX.Element;
package/dist/esm/components/button/ConfirmedButton.js CHANGED
@@ -17,7 +17,7 @@ import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle, DialogT
17
17
  import { P } from '../typography.js';
18
18
  import { Button } from './Button.js';
19
19
  export function ConfirmedButton(_a) {
20
- var { confirmText, confirmTitle = 'Are you sure?', confirmAction = 'OK', cancelAction = 'Nevermind', onConfirm, skip } = _a, rest = __rest(_a, ["confirmText", "confirmTitle", "confirmAction", "cancelAction", "onConfirm", "skip"]);
20
+ var { confirmText, confirmTitle = 'Are you sure?', confirmAction = 'OK', cancelAction = 'Nevermind', confirmColor = 'primary', onConfirm, skip } = _a, rest = __rest(_a, ["confirmText", "confirmTitle", "confirmAction", "cancelAction", "confirmColor", "onConfirm", "skip"]);
21
21
  const [open, setOpen] = useState(false);
22
22
  const [loading, setLoading] = useState(false);
23
23
  const confirm = useCallback(async () => {
@@ -33,6 +33,6 @@ export function ConfirmedButton(_a) {
33
33
  if (skip) {
34
34
  return _jsx(Button, Object.assign({}, rest));
35
35
  }
36
- return (_jsxs(Dialog, Object.assign({ open: open, onOpenChange: setOpen }, { children: [_jsx(DialogTrigger, Object.assign({ asChild: true }, { children: _jsx(Button, Object.assign({}, rest)) })), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: confirmTitle }), _jsx(P, { children: confirmText }), _jsxs(DialogActions, { children: [_jsx(DialogClose, Object.assign({ asChild: true }, { children: _jsx(Button, { children: cancelAction }) })), _jsx(Button, Object.assign({ loading: loading, onClick: confirm, color: "primary" }, { children: confirmAction }))] })] })] })));
36
+ return (_jsxs(Dialog, Object.assign({ open: open, onOpenChange: setOpen }, { children: [_jsx(DialogTrigger, Object.assign({ asChild: true }, { children: _jsx(Button, Object.assign({}, rest)) })), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: confirmTitle }), _jsx(P, { children: confirmText }), _jsxs(DialogActions, { children: [_jsx(DialogClose, Object.assign({ asChild: true }, { children: _jsx(Button, { children: cancelAction }) })), _jsx(Button, Object.assign({ loading: loading, onClick: confirm, color: confirmColor }, { children: confirmAction }))] })] })] })));
37
37
  }
38
38
  //# sourceMappingURL=ConfirmedButton.js.map
package/dist/esm/components/button/ConfirmedButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,GACb,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAe,MAAM,aAAa,CAAC;AAWlD,MAAM,UAAU,eAAe,CAAC,EAQT;QARS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cAPwB,qFAQ/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI;YACH,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;SACf;gBAAS;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;SAClB;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE;QACT,OAAO,KAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;KAC5B;IAED,OAAO,CACN,MAAC,MAAM,kBAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,iBACxC,KAAC,aAAa,kBAAC,OAAO,sBACrB,KAAC,MAAM,oBAAK,IAAI,EAAI,IACL,EAChB,MAAC,aAAa,eACb,KAAC,WAAW,cAAE,YAAY,GAAe,EACzC,KAAC,CAAC,cAAE,WAAW,GAAK,EACpB,MAAC,aAAa,eACb,KAAC,WAAW,kBAAC,OAAO,sBACnB,KAAC,MAAM,cAAE,YAAY,GAAU,IAClB,EACd,KAAC,MAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,SAAS,gBACzD,aAAa,IACN,IACM,IACD,KACR,CACT,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,GACb,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAe,MAAM,aAAa,CAAC;AAYlD,MAAM,UAAU,eAAe,CAAC,EAST;QATS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cARwB,qGAS/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI;YACH,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;SACf;gBAAS;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;SAClB;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE;QACT,OAAO,KAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;KAC5B;IAED,OAAO,CACN,MAAC,MAAM,kBAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,iBACxC,KAAC,aAAa,kBAAC,OAAO,sBACrB,KAAC,MAAM,oBAAK,IAAI,EAAI,IACL,EAChB,MAAC,aAAa,eACb,KAAC,WAAW,cAAE,YAAY,GAAe,EACzC,KAAC,CAAC,cAAE,WAAW,GAAK,EACpB,MAAC,aAAa,eACb,KAAC,WAAW,kBAAC,OAAO,sBACnB,KAAC,MAAM,cAAE,YAAY,GAAU,IAClB,EACd,KAAC,MAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,gBAC7D,aAAa,IACN,IACM,IACD,KACR,CACT,CAAC;AACH,CAAC"}
package/dist/esm/components/card/Card.d.ts CHANGED
@@ -8,6 +8,8 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
8
8
  onClick?: ((ev: MouseEvent) => void) | undefined;
9
9
  children?: ReactNode;
10
10
  compact?: boolean | undefined;
11
+ /** forces non-interactive version */
12
+ nonInteractive?: boolean | undefined;
11
13
  } & import("react").RefAttributes<any>>;
12
14
  export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
13
15
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
package/dist/esm/components/card/Card.js CHANGED
@@ -17,9 +17,11 @@ import { Slot } from '@radix-ui/react-slot';
17
17
  import classNames from 'clsx';
18
18
  export const CardRoot = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-gray-1 layer-components:text-black');
19
19
  export const CardMain = forwardRef(function CardMain(_a, ref) {
20
- var { asChild, className, compact } = _a, rest = __rest(_a, ["asChild", "className", "compact"]);
21
- const Comp = asChild ? Slot : 'button';
22
- return (_jsx(Comp, Object.assign({ ref: ref, className: classNames('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:cursor-pointer layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:hover:bg-lightBlend layer-components:hover:color-black', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', className), "data-compact": compact }, rest)));
20
+ var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
21
+ const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
22
+ const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
23
+ return (_jsx(Comp, Object.assign({ ref: ref, className: classNames('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
24
+ 'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
23
25
  });
24
26
  export const CardTitle = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-auto layer-components:bg-white layer-components:p-2 layer-components:rounded-lg layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend layer-components:text-md layer-components:max-h-80px layer-components:overflow-hidden layer-components:text-ellipsis layer-components:max-w-full layer-components:text-inherit', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
25
27
  export const CardImage = withClassName('div', 'layer-components:absolute layer-components:z-0 layer-components:right-0 layer-components:top-0 layer-components:bottom-0 layer-components:w-full layer-components:h-full');
package/dist/esm/components/card/Card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAShC,SAAS,QAAQ,CAAC,EAAwC,EAAE,GAAG;QAA7C,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAtC,mCAAwC,CAAF;IACzD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACpB,kJAAkJ,EAClJ,oDAAoD,EACpD,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
1
+ {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAWhC,SAAS,QAAQ,CAClB,EAAwD,EACxD,GAAG;QADH,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,OAAW,EAAN,IAAI,cAAtD,qDAAwD,CAAF;IAGtD,MAAM,aAAa,GAAG,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/D,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACpB,mIAAmI,EACnI,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,aAAa;YACZ,oFAAoF,EACrF,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
package/dist/esm/components/card/Card.stories.d.ts CHANGED
@@ -16,3 +16,7 @@ declare const meta: {
16
16
  export default meta;
17
17
  type Story = StoryObj<typeof CardRoot>;
18
18
  export declare const Default: Story;
19
+ export declare const Compact: Story;
20
+ export declare const NonInteractive: Story;
21
+ export declare const AsChild: Story;
22
+ export declare const AsChildNonInteractive: Story;
package/dist/esm/components/card/Card.stories.js CHANGED
@@ -13,6 +13,18 @@ const meta = {
13
13
  };
14
14
  export default meta;
15
15
  export const Default = {
16
+ render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ onClick: () => alert('clicked') }, { children: _jsx(CardTitle, { children: "Card Title" }) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
17
+ };
18
+ export const Compact = {
19
+ render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ compact: true }, { children: _jsx(CardTitle, { children: "Card Title" }) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
20
+ };
21
+ export const NonInteractive = {
16
22
  render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: "Card Title" }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
17
23
  };
24
+ export const AsChild = {
25
+ render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true }, { children: _jsx("a", Object.assign({ href: "#here" }, { children: _jsx(CardTitle, { children: "Card Title" }) })) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
26
+ };
27
+ export const AsChildNonInteractive = {
28
+ render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children: _jsx("button", { children: _jsx(CardTitle, { children: "Card Title" }) }) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
29
+ };
18
30
  //# sourceMappingURL=Card.stories.js.map
package/dist/esm/components/card/Card.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,GACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,MAAC,QAAQ,eACR,KAAC,QAAQ,cACR,KAAC,SAAS,6BAAuB,GACvB,EACX,KAAC,UAAU,cACV,MAAC,WAAW,eACX,KAAC,MAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,KAAC,MAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}
1
+ {"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "0.6.13",
3
+ "version": "0.6.15",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "/dist",
package/src/components/button/ConfirmedButton.tsx CHANGED
@@ -19,6 +19,7 @@ export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {
19
19
  cancelAction?: string;
20
20
  onConfirm: () => void | Promise<any>;
21
21
  skip?: boolean;
22
+ confirmColor?: ButtonProps['color'];
22
23
  }
23
24
 
24
25
  export function ConfirmedButton({
@@ -26,6 +27,7 @@ export function ConfirmedButton({
26
27
  confirmTitle = 'Are you sure?',
27
28
  confirmAction = 'OK',
28
29
  cancelAction = 'Nevermind',
30
+ confirmColor = 'primary',
29
31
  onConfirm,
30
32
  skip,
31
33
  ...rest
@@ -58,7 +60,7 @@ export function ConfirmedButton({
58
60
  <DialogClose asChild>
59
61
  <Button>{cancelAction}</Button>
60
62
  </DialogClose>
61
- <Button loading={loading} onClick={confirm} color="primary">
63
+ <Button loading={loading} onClick={confirm} color={confirmColor}>
62
64
  {confirmAction}
63
65
  </Button>
64
66
  </DialogActions>
package/src/components/card/Card.stories.tsx CHANGED
@@ -23,6 +23,42 @@ export default meta;
23
23
  type Story = StoryObj<typeof CardRoot>;
24
24
 
25
25
  export const Default: Story = {
26
+ render: () => (
27
+ <CardRoot>
28
+ <CardMain onClick={() => alert('clicked')}>
29
+ <CardTitle>Card Title</CardTitle>
30
+ </CardMain>
31
+ <CardFooter>
32
+ <CardActions>
33
+ <Button size="small">Button</Button>
34
+ <Button size="icon" color="ghost">
35
+ <Icon name="placeholder" />
36
+ </Button>
37
+ </CardActions>
38
+ </CardFooter>
39
+ </CardRoot>
40
+ ),
41
+ };
42
+
43
+ export const Compact: Story = {
44
+ render: () => (
45
+ <CardRoot>
46
+ <CardMain compact>
47
+ <CardTitle>Card Title</CardTitle>
48
+ </CardMain>
49
+ <CardFooter>
50
+ <CardActions>
51
+ <Button size="small">Button</Button>
52
+ <Button size="icon" color="ghost">
53
+ <Icon name="placeholder" />
54
+ </Button>
55
+ </CardActions>
56
+ </CardFooter>
57
+ </CardRoot>
58
+ ),
59
+ };
60
+
61
+ export const NonInteractive: Story = {
26
62
  render: () => (
27
63
  <CardRoot>
28
64
  <CardMain>
@@ -39,3 +75,43 @@ export const Default: Story = {
39
75
  </CardRoot>
40
76
  ),
41
77
  };
78
+
79
+ export const AsChild: Story = {
80
+ render: () => (
81
+ <CardRoot>
82
+ <CardMain asChild>
83
+ <a href="#here">
84
+ <CardTitle>Card Title</CardTitle>
85
+ </a>
86
+ </CardMain>
87
+ <CardFooter>
88
+ <CardActions>
89
+ <Button size="small">Button</Button>
90
+ <Button size="icon" color="ghost">
91
+ <Icon name="placeholder" />
92
+ </Button>
93
+ </CardActions>
94
+ </CardFooter>
95
+ </CardRoot>
96
+ ),
97
+ };
98
+
99
+ export const AsChildNonInteractive: Story = {
100
+ render: () => (
101
+ <CardRoot>
102
+ <CardMain asChild nonInteractive>
103
+ <button>
104
+ <CardTitle>Card Title</CardTitle>
105
+ </button>
106
+ </CardMain>
107
+ <CardFooter>
108
+ <CardActions>
109
+ <Button size="small">Button</Button>
110
+ <Button size="icon" color="ghost">
111
+ <Icon name="placeholder" />
112
+ </Button>
113
+ </CardActions>
114
+ </CardFooter>
115
+ </CardRoot>
116
+ ),
117
+ };
package/src/components/card/Card.tsx CHANGED
@@ -16,17 +16,24 @@ export const CardMain = forwardRef<
16
16
  onClick?: (ev: MouseEvent) => void;
17
17
  children?: ReactNode;
18
18
  compact?: boolean;
19
+ /** forces non-interactive version */
20
+ nonInteractive?: boolean;
19
21
  }
20
- >(function CardMain({ asChild, className, compact, ...rest }, ref) {
21
- const Comp = asChild ? Slot : 'button';
22
+ >(function CardMain(
23
+ { asChild, className, compact, nonInteractive, ...rest },
24
+ ref,
25
+ ) {
26
+ const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
27
+ const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
22
28
  return (
23
29
  <Comp
24
30
  ref={ref}
25
31
  className={classNames(
26
- 'layer-components:(flex flex-col gap-1 cursor-pointer transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start text-inherit)',
27
- 'layer-components:hover:(bg-lightBlend color-black)',
32
+ 'layer-components:(flex flex-col gap-1 transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start text-inherit)',
28
33
  'layer-components:md:pt-4',
29
34
  compact && 'layer-variants:(p-1 bg-white gap-0)',
35
+ isInteractive &&
36
+ 'layer-components:cursor-pointer layer-components:hover:(bg-lightBlend color-black)',
30
37
  className,
31
38
  )}
32
39
  data-compact={compact}