@pindoba/core-button 0.0.0-alpha-20260320034942

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+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/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonApi, ButtonBackground, ButtonBaseCommon, ButtonBaseProps, ButtonEmphasis, ButtonFeedback, ButtonPassThrough, ButtonRootProps, ButtonShape, ButtonSize, ButtonSlotPassThrough, ConnectButtonOptions, ElementAttributes, PanelBackground, PanelBorder, PanelEmphasis } from "./src/types.js";
+import { connectButton } from "./src/connect-button.js";
+export { type ButtonApi, type ButtonBackground, type ButtonBaseCommon, type ButtonBaseProps, type ButtonEmphasis, type ButtonFeedback, type ButtonPassThrough, type ButtonRootProps, type ButtonShape, type ButtonSize, type ButtonSlotPassThrough, type ConnectButtonOptions, type ElementAttributes, type PanelBackground, type PanelBorder, type PanelEmphasis, connectButton };

package/dist/index.js

@@ -0,0 +1,2 @@
+import { connectButton } from "./src/connect-button.js";
+export { connectButton };

package/dist/src/connect-button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonApi, ConnectButtonOptions } from "./types.js";
+
+//#region src/connect-button.d.ts
+declare const buttonDefaults: {
+  readonly emphasis: "primary";
+  readonly size: "md";
+  readonly svgFit: true;
+};
+declare function connectButton(options: ConnectButtonOptions): ButtonApi;
+//#endregion
+export { buttonDefaults, connectButton };
+//# sourceMappingURL=connect-button.d.ts.map

package/dist/src/connect-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-button.d.ts","names":[],"sources":["../../src/connect-button.ts"],"mappings":";;;cAaa,cAAA;EAAA;;;;iBA0BG,aAAA,CAAc,OAAA,EAAS,oBAAA,GAAuB,SAAA"}

package/dist/src/connect-button.js

@@ -0,0 +1,79 @@
+import { css } from "@pindoba/styled-system/css";
+import { buttonStyles } from "@pindoba/styles-button";
+import { panelStyles } from "@pindoba/styles-panel";
+//#region src/connect-button.ts
+const buttonDefaults = {
+	emphasis: "primary",
+	size: "md",
+	svgFit: true
+};
+function isNil(value) {
+	return value === null || value === void 0;
+}
+/**
+* Maps button feedback values to panel feedback values.
+* Button's "default" maps to panel's "primary" (both set colorPalette: "primary").
+* Other values are shared 1:1.
+*/
+function mapFeedbackToPanel(feedback, emphasis) {
+	if (isNil(feedback) && emphasis === "primary") return "primary";
+	if (isNil(feedback) && emphasis === "secondary") return "neutral";
+	return feedback;
+}
+function connectButton(options) {
+	const { emphasis = buttonDefaults.emphasis, size = buttonDefaults.size, shape, svgFit = buttonDefaults.svgFit, feedback: feedbackProp, background, border, translucent, accent, radius, radiusTop, radiusBottom, radiusLeft, radiusRight, passThrough, class: className, ...restProps } = options;
+	const feedback = feedbackProp ?? (emphasis === "primary" ? "primary" : "neutral");
+	const resolvedBackground = background ?? (emphasis === "ghost" ? "transparent" : "surface");
+	const resolvedAccent = accent ?? emphasis === "primary";
+	const panelEmphasis = emphasis === "ghost" ? void 0 : emphasis;
+	const panelFeedback = mapFeedbackToPanel(feedback, panelEmphasis);
+	const { display: _display, flexDirection: _flexDir, width: _width, transition: _transition, borderRadius: _borderRadius, borderTopLeftRadius: _btlr, borderTopRightRadius: _btrr, borderBottomLeftRadius: _bblr, borderBottomRightRadius: _bbrr, ...panelBase } = panelStyles.raw({
+		emphasis: panelEmphasis,
+		background: resolvedBackground,
+		accent: resolvedAccent,
+		feedback: panelFeedback,
+		border: border ?? "default",
+		translucent: translucent ?? false,
+		radius: "none",
+		padding: "none",
+		interactive: true
+	}).root ?? {};
+	const buttonClasses = buttonStyles.raw({
+		emphasis,
+		shape,
+		size,
+		feedback,
+		svgFit
+	});
+	const radiusStyles = {
+		...radius !== void 0 ? { borderRadius: radius } : {},
+		...radiusTop !== void 0 ? {
+			borderTopLeftRadius: radiusTop,
+			borderTopRightRadius: radiusTop
+		} : {},
+		...radiusBottom !== void 0 ? {
+			borderBottomLeftRadius: radiusBottom,
+			borderBottomRightRadius: radiusBottom
+		} : {},
+		...radiusLeft !== void 0 ? {
+			borderTopLeftRadius: radiusLeft,
+			borderBottomLeftRadius: radiusLeft
+		} : {},
+		...radiusRight !== void 0 ? {
+			borderTopRightRadius: radiusRight,
+			borderBottomRightRadius: radiusRight
+		} : {}
+	};
+	const generatedClass = css(panelBase, buttonClasses.root, radiusStyles, passThrough?.root?.style);
+	const userClass = className != null ? String(className) : void 0;
+	return { rootProps: {
+		...restProps,
+		...passThrough?.root?.props,
+		"data-component": "button",
+		class: userClass ? `${generatedClass} ${userClass}` : generatedClass
+	} };
+}
+//#endregion
+export { buttonDefaults, connectButton };
+
+//# sourceMappingURL=connect-button.js.map

package/dist/src/connect-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-button.js","names":[],"sources":["../../src/connect-button.ts"],"sourcesContent":["import { css } from \"@pindoba/styled-system/css\";\nimport type { SystemStyleObject } from \"@pindoba/styled-system/types\";\nimport { buttonStyles } from \"@pindoba/styles-button\";\nimport { panelStyles } from \"@pindoba/styles-panel\";\nimport type { PanelBackground, PanelEmphasis } from \"@pindoba/core-panel\";\nimport type {\n  ConnectButtonOptions,\n  ButtonRootProps,\n  ButtonApi,\n  ButtonFeedback,\n  ButtonBaseProps,\n} from \"./types.js\";\n\nexport const buttonDefaults = {\n  emphasis: \"primary\",\n  size: \"md\",\n  svgFit: true,\n} as const satisfies Partial<ButtonBaseProps>;\n\n// check if a value is null or undefined\nfunction isNil(value: unknown) {\n  return value === null || value === undefined;\n}\n\n/**\n * Maps button feedback values to panel feedback values.\n * Button's \"default\" maps to panel's \"primary\" (both set colorPalette: \"primary\").\n * Other values are shared 1:1.\n */\nfunction mapFeedbackToPanel(\n  feedback: ButtonFeedback,\n  emphasis?: PanelEmphasis,\n) {\n  if (isNil(feedback) && emphasis === \"primary\") return \"primary\";\n  if (isNil(feedback) && emphasis === \"secondary\") return \"neutral\";\n\n  return feedback;\n}\n\nexport function connectButton(options: ConnectButtonOptions): ButtonApi {\n  const {\n    // Button-own props\n    emphasis = buttonDefaults.emphasis,\n    size = buttonDefaults.size,\n    shape,\n    svgFit = buttonDefaults.svgFit,\n    feedback: feedbackProp,\n\n    // Panel surface props\n    background,\n    border,\n    translucent,\n    accent,\n\n    // Panel radius props\n    radius,\n    radiusTop,\n    radiusBottom,\n    radiusLeft,\n    radiusRight,\n\n    passThrough,\n    class: className,\n    ...restProps\n  } = options;\n\n  // Resolve feedback based on emphasis when not explicitly set.\n  // primary defaults to \"default\" (→ \"primary\"); secondary/ghost default to \"neutral\".\n  const feedback =\n    feedbackProp ?? (emphasis === \"primary\" ? \"primary\" : \"neutral\");\n\n  // Derive panel config from emphasis — user props always win\n  const resolvedBackground: PanelBackground =\n    background ?? (emphasis === \"ghost\" ? \"transparent\" : \"surface\");\n  const resolvedAccent = accent ?? emphasis === \"primary\";\n\n  // Forward panel emphasis for \"primary\"/\"secondary\"; \"ghost\" uses background=\"transparent\" instead.\n  const panelEmphasis: PanelEmphasis | undefined =\n    emphasis === \"ghost\" ? undefined : (emphasis as PanelEmphasis);\n  const panelFeedback = mapFeedbackToPanel(feedback, panelEmphasis);\n\n  // Panel is always the base — handles all background/color/border/shadow/hover\n  const panelClasses = panelStyles.raw({\n    emphasis: panelEmphasis,\n    background: resolvedBackground,\n    accent: resolvedAccent,\n    feedback: panelFeedback,\n    border: border ?? \"default\",\n    translucent: translucent ?? false,\n    radius: \"none\", // suppress panel default; radius handled separately\n    padding: \"none\",\n    interactive: true, // panel provides hover/active background transitions\n  });\n\n  // Strip panel layout props + borderRadius (button's sizing pattern owns these)\n  const {\n    display: _display,\n    flexDirection: _flexDir,\n    width: _width,\n    transition: _transition,\n    borderRadius: _borderRadius,\n    borderTopLeftRadius: _btlr,\n    borderTopRightRadius: _btrr,\n    borderBottomLeftRadius: _bblr,\n    borderBottomRightRadius: _bbrr,\n    ...panelBase\n  } = panelClasses.root ?? {};\n\n  // Button styles: sizing, shape, boxShadow ring borders, focus, disabled\n  const buttonClasses = buttonStyles.raw({\n    emphasis,\n    shape,\n    size,\n    feedback,\n    svgFit,\n  });\n\n  // User-explicit radius only — overrides sizing-pattern borderRadius when set\n  const radiusStyles: SystemStyleObject = {\n    ...(radius !== undefined ? { borderRadius: radius } : {}),\n    ...(radiusTop !== undefined\n      ? { borderTopLeftRadius: radiusTop, borderTopRightRadius: radiusTop }\n      : {}),\n    ...(radiusBottom !== undefined\n      ? {\n          borderBottomLeftRadius: radiusBottom,\n          borderBottomRightRadius: radiusBottom,\n        }\n      : {}),\n    ...(radiusLeft !== undefined\n      ? { borderTopLeftRadius: radiusLeft, borderBottomLeftRadius: radiusLeft }\n      : {}),\n    ...(radiusRight !== undefined\n      ? {\n          borderTopRightRadius: radiusRight,\n          borderBottomRightRadius: radiusRight,\n        }\n      : {}),\n  };\n\n  // Merge: panel surface → button (layout/sizing/rings) → radius → passThrough\n  const generatedClass = css(\n    panelBase,\n    buttonClasses.root,\n    radiusStyles,\n    passThrough?.root?.style,\n  );\n\n  const userClass = className != null ? String(className) : undefined;\n\n  const rootProps: ButtonRootProps = {\n    ...restProps,\n    ...passThrough?.root?.props,\n    \"data-component\": \"button\",\n    class: userClass ? `${generatedClass} ${userClass}` : generatedClass,\n  };\n\n  return { rootProps };\n}\n"],"mappings":";;;;AAaA,MAAa,iBAAiB;CAC5B,UAAU;CACV,MAAM;CACN,QAAQ;CACT;AAGD,SAAS,MAAM,OAAgB;AAC7B,QAAO,UAAU,QAAQ,UAAU,KAAA;;;;;;;AAQrC,SAAS,mBACP,UACA,UACA;AACA,KAAI,MAAM,SAAS,IAAI,aAAa,UAAW,QAAO;AACtD,KAAI,MAAM,SAAS,IAAI,aAAa,YAAa,QAAO;AAExD,QAAO;;AAGT,SAAgB,cAAc,SAA0C;CACtE,MAAM,EAEJ,WAAW,eAAe,UAC1B,OAAO,eAAe,MACtB,OACA,SAAS,eAAe,QACxB,UAAU,cAGV,YACA,QACA,aACA,QAGA,QACA,WACA,cACA,YACA,aAEA,aACA,OAAO,WACP,GAAG,cACD;CAIJ,MAAM,WACJ,iBAAiB,aAAa,YAAY,YAAY;CAGxD,MAAM,qBACJ,eAAe,aAAa,UAAU,gBAAgB;CACxD,MAAM,iBAAiB,UAAU,aAAa;CAG9C,MAAM,gBACJ,aAAa,UAAU,KAAA,IAAa;CACtC,MAAM,gBAAgB,mBAAmB,UAAU,cAAc;CAgBjE,MAAM,EACJ,SAAS,UACT,eAAe,UACf,OAAO,QACP,YAAY,aACZ,cAAc,eACd,qBAAqB,OACrB,sBAAsB,OACtB,wBAAwB,OACxB,yBAAyB,OACzB,GAAG,cAvBgB,YAAY,IAAI;EACnC,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,QAAQ,UAAU;EAClB,aAAa,eAAe;EAC5B,QAAQ;EACR,SAAS;EACT,aAAa;EACd,CAAC,CAce,QAAQ,EAAE;CAG3B,MAAM,gBAAgB,aAAa,IAAI;EACrC;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAkC;EACtC,GAAI,WAAW,KAAA,IAAY,EAAE,cAAc,QAAQ,GAAG,EAAE;EACxD,GAAI,cAAc,KAAA,IACd;GAAE,qBAAqB;GAAW,sBAAsB;GAAW,GACnE,EAAE;EACN,GAAI,iBAAiB,KAAA,IACjB;GACE,wBAAwB;GACxB,yBAAyB;GAC1B,GACD,EAAE;EACN,GAAI,eAAe,KAAA,IACf;GAAE,qBAAqB;GAAY,wBAAwB;GAAY,GACvE,EAAE;EACN,GAAI,gBAAgB,KAAA,IAChB;GACE,sBAAsB;GACtB,yBAAyB;GAC1B,GACD,EAAE;EACP;CAGD,MAAM,iBAAiB,IACrB,WACA,cAAc,MACd,cACA,aAAa,MAAM,MACpB;CAED,MAAM,YAAY,aAAa,OAAO,OAAO,UAAU,GAAG,KAAA;AAS1D,QAAO,EAAE,WAP0B;EACjC,GAAG;EACH,GAAG,aAAa,MAAM;EACtB,kBAAkB;EAClB,OAAO,YAAY,GAAG,eAAe,GAAG,cAAc;EACvD,EAEmB"}

package/dist/src/types.d.ts

@@ -0,0 +1,74 @@
+import { ButtonStyleProps } from "@pindoba/styles-button";
+import { PanelStyleProps } from "@pindoba/styles-panel";
+import { SystemStyleObject } from "@pindoba/styled-system/types";
+import { PanelBackground, PanelBorder, PanelEmphasis, PanelEmphasis as PanelEmphasis$1, PanelRadius, PanelRadiusBottom, PanelRadiusLeft, PanelRadiusRight, PanelRadiusTop } from "@pindoba/core-panel";
+
+//#region src/types.d.ts
+type ElementAttributes = Partial<Record<string, unknown>>;
+/** Button emphasis — aligned with panel emphasis vocabulary, extended with `"ghost"`. */
+type ButtonEmphasis = PanelEmphasis$1 | "ghost";
+type ButtonFeedback = NonNullable<ButtonStyleProps["feedback"]>;
+type ButtonShape = NonNullable<ButtonStyleProps["shape"]>;
+type ButtonSize = NonNullable<ButtonStyleProps["size"]>;
+/** Background values accepted by the button (panel backgrounds, `emphasis="secondary"` only). */
+type ButtonBackground = PanelStyleProps["background"];
+interface ButtonSlotPassThrough<T = ElementAttributes> {
+  style?: SystemStyleObject;
+  props?: T;
+}
+interface ButtonPassThrough<RootElementAttributes = ElementAttributes> {
+  root?: ButtonSlotPassThrough<RootElementAttributes>;
+}
+type ButtonBaseCommon<RootElementAttributes = ElementAttributes> = {
+  feedback?: ButtonStyleProps["feedback"];
+  shape?: ButtonStyleProps["shape"];
+  size?: ButtonStyleProps["size"];
+  svgFit?: boolean;
+  border?: PanelStyleProps["border"];
+  translucent?: PanelStyleProps["translucent"];
+  radius?: PanelStyleProps["radius"];
+  radiusTop?: PanelStyleProps["radiusTop"];
+  radiusBottom?: PanelStyleProps["radiusBottom"];
+  radiusLeft?: PanelStyleProps["radiusLeft"];
+  radiusRight?: PanelStyleProps["radiusRight"];
+  passThrough?: ButtonPassThrough<RootElementAttributes>;
+};
+/**
+ * Base button props shared across all frameworks (Svelte, React, Astro).
+ * Each framework extends this with its own additions.
+ *
+ * `background` is only allowed when `emphasis="secondary"`.
+ */
+type ButtonBaseProps<RootElementAttributes = ElementAttributes> = ButtonBaseCommon<RootElementAttributes> & ({
+  emphasis: "secondary";
+  background?: ButtonBackground;
+  accent?: boolean;
+} | {
+  emphasis?: Exclude<ButtonEmphasis, "secondary">;
+  background?: never;
+  accent?: boolean;
+});
+/**
+ * Options for connectButton. Framework components can spread their props
+ * directly into this function.
+ *
+ * This is intentionally flat (no discriminated union) — the emphasis/background
+ * constraint is enforced at the component level, not inside connectButton.
+ */
+type ConnectButtonOptions = Partial<ButtonBaseCommon<ElementAttributes>> & {
+  emphasis?: ButtonEmphasis;
+  background?: ButtonBackground;
+  accent?: boolean;
+  class?: unknown;
+};
+interface ButtonRootProps {
+  class: string;
+  "data-component": "button";
+  [key: string]: unknown;
+}
+interface ButtonApi {
+  rootProps: ButtonRootProps;
+}
+//#endregion
+export { ButtonApi, ButtonBackground, ButtonBaseCommon, ButtonBaseProps, ButtonEmphasis, ButtonFeedback, ButtonPassThrough, ButtonRootProps, ButtonShape, ButtonSize, ButtonSlotPassThrough, ConnectButtonOptions, ElementAttributes, type PanelBackground, type PanelBorder, type PanelEmphasis, type PanelRadius, type PanelRadiusBottom, type PanelRadiusLeft, type PanelRadiusRight, type PanelRadiusTop };
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;;KAkBY,iBAAA,GAAoB,OAAA,CAAQ,MAAA;AAAxC;AAAA,KAKY,cAAA,GAAiB,eAAA;AAAA,KACjB,cAAA,GAAiB,WAAA,CAAY,gBAAA;AAAA,KAC7B,WAAA,GAAc,WAAA,CAAY,gBAAA;AAAA,KAC1B,UAAA,GAAa,WAAA,CAAY,gBAAA;AAHrC;AAAA,KAKY,gBAAA,GAAmB,eAAA;AAAA,UAId,qBAAA,KAA0B,iBAAA;EACzC,KAAA,GAAQ,iBAAA;EACR,KAAA,GAAQ,CAAA;AAAA;AAAA,UAGO,iBAAA,yBAA0C,iBAAA;EACzD,IAAA,GAAO,qBAAA,CAAsB,qBAAA;AAAA;AAAA,KAKnB,gBAAA,yBAAyC,iBAAA;EAEnD,QAAA,GAAW,gBAAA;EACX,KAAA,GAAQ,gBAAA;EACR,IAAA,GAAO,gBAAA;EACP,MAAA;EAGA,MAAA,GAAS,eAAA;EACT,WAAA,GAAc,eAAA;EAGd,MAAA,GAAS,eAAA;EACT,SAAA,GAAY,eAAA;EACZ,YAAA,GAAe,eAAA;EACf,UAAA,GAAa,eAAA;EACb,WAAA,GAAc,eAAA;EAEd,WAAA,GAAc,iBAAA,CAAkB,qBAAA;AAAA;;;AA7BlC;;;;KAsCY,eAAA,yBAAwC,iBAAA,IAClD,gBAAA,CAAiB,qBAAA;EAGT,QAAA;EACA,UAAA,GAAa,gBAAA;EACb,MAAA;AAAA;EAGA,QAAA,GAAW,OAAA,CAAQ,cAAA;EACnB,UAAA;EACA,MAAA;AAAA;;;;AA5CV;;;;KAyDY,oBAAA,GAAuB,OAAA,CACjC,gBAAA,CAAiB,iBAAA;EAEjB,QAAA,GAAW,cAAA;EACX,UAAA,GAAa,gBAAA;EACb,MAAA;EACA,KAAA;AAAA;AAAA,UAGe,eAAA;EACf,KAAA;EACA,gBAAA;EAAA,CACC,GAAA;AAAA;AAAA,UAGc,SAAA;EACf,SAAA,EAAW,eAAA;AAAA"}

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@pindoba/core-button",
+  "version": "0.0.0-alpha-20260320034942",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/src/*.d.ts",
+      "import": "./dist/src/*.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pindoba/core-panel": "0.0.0-alpha-20260320034942",
+    "@pindoba/styles-panel": "0.0.0-alpha-20260320034942",
+    "@pindoba/styled-system": "0.0.0-alpha-20260320034942",
+    "@pindoba/styles-button": "0.0.0-alpha-20260320034942"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "tsdown": "^0.21.2"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "clean": "rm -rf dist && rm -rf node_modules && rm -rf .turbo"
+  }
+}