@canonical/react-ds-core 0.9.0-experimental.13 → 0.9.0-experimental.19

package/dist/esm/ui/Button/Button.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./styles.css";
 /** Buttons are clickable elements used to perform an action. */
-const Button = ({ id, className, appearance, label, ...props }) => {
+const Button = ({ id, className, children, style, appearance, ...props }) => {
     return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
             .filter(Boolean)
-            .join(" "), ...props, "aria-label": label, children: label }));
+            .join(" "), style: style, "aria-label": props["aria-label"] || children?.toString(), ...props, children: children }));
 };
 export default Button;
 //# sourceMappingURL=Button.js.map

package/dist/esm/ui/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,gBACG,KAAK,YAEhB,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,KAAK,gBAIA,KAAK,CAAC,YAAY,CAAC,IAAI,QAAQ,EAAE,QAAQ,EAAE,KACnD,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/esm/ui/Button/types.js

@@ -1,2 +1,12 @@
+// TODO: this is how appearance could work as enum
+//
+// export enum ButtonAppearance {
+//   DEFAULT = "default",
+//   BASE = "base",
+//   POSITIVE = "positive",
+//   NEGATIVE = "negative",
+//   LINK = "link",
+// }
+//
 export {};
 //# sourceMappingURL=types.js.map

package/dist/esm/ui/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,EAAE;AACF,iCAAiC;AACjC,yBAAyB;AACzB,mBAAmB;AACnB,2BAA2B;AAC3B,2BAA2B;AAC3B,mBAAmB;AACnB,IAAI;AACJ,EAAE"}

package/dist/types/ui/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import type Props from "./types.js";
 import "./styles.css";
 /** Buttons are clickable elements used to perform an action. */
-declare const Button: ({ id, className, appearance, label, ...props }: Props) => React.ReactElement;
+declare const Button: ({ id, className, children, style, appearance, ...props }: Props) => React.ReactElement;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/ui/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,GAAI,gDAMb,KAAK,KAAG,KAAK,CAAC,YAahB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,GAAI,0DAOb,KAAK,KAAG,KAAK,CAAC,YAiBhB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/ui/Button/types.d.ts

@@ -1,15 +1,18 @@
-import type React from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 export interface BaseProps {
     id?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Button contents.
+     * This will also be used for the `aria-label`.
+     * If this contains anything other than a string literal (such as a <p> element), you should specify an
+     * `aria-label` prop to ensure that the button label is applied properly. Otherwise, the label will be set to [object Object].
+     * */
+    children: ReactNode;
     /** The visual style of the button */
     appearance?: "neutral" | "base" | "positive" | "negative" | "link";
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
 }
-type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+type Props = BaseProps & ButtonHTMLAttributes<HTMLButtonElement>;
 export default Props;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEvE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACpE;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-core",
-  "version": "0.9.0-experimental.13",
+  "version": "0.9.0-experimental.19",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,7 +38,7 @@
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-config": "^0.9.0-experimental.12",
+    "@canonical/storybook-config": "^0.9.0-experimental.19",
     "@canonical/styles": "^0.9.0-experimental.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -66,5 +66,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.9"
   },
-  "gitHead": "80a8881629dff1e73974f03a014ae2de4b9977b8"
+  "gitHead": "989cbc0a9020e0952f922f111737e918860ad780"
 }