@stamcat/craftsman 0.0.23-alpha.10 → 0.0.23-alpha.11

package/AGENTS.md

@@ -12,6 +12,7 @@ Use these imports:
 import { Button } from "@stamcat/craftsman/Button";
 import { Input } from "@stamcat/craftsman/Input";
 import { Loader } from "@stamcat/craftsman/Loader";
+import { Modal } from "@stamcat/craftsman/Modal";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -37,12 +38,25 @@ Props:
 
 - Inherits all native `<button>` props.
 - `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `size?: number` (default visual scale is `1`)
 - `styles?: SerializedStyles` (Emotion override)
 
 Behavior notes:
 
 - `type` defaults to `"button"`.
 - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+- Theme class merge: if `theme.components.button` is a string, it is appended to the class list.
+- `className` is preserved and merged after variant/theme classes.
+- If `children` is empty (per `isEmpty`), the component renders nothing.
+- `size` is clamped to `[0.1, 10]` before styling is applied.
+- When `size` is provided, Button scales:
+  - `border-radius: calc(var(--btn-border-radius) * size)`
+  - `padding: calc(var(--btn-pad-y) * size) calc(var(--btn-pad-x) * size)`
+  - `font-size: max(10px, calc(var(--w-text) * size))`
+- There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
+- Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
+- Native button modes are supported (`type="button" | "submit" | "reset"`).
+- Accessibility props such as `aria-label` pass through unchanged.
 
 Example:
 
@@ -50,6 +64,33 @@ Example:
 <Button variant="primary" onClick={onSave}>Save</Button>
 ```
 
+Story-aligned usage examples:
+
+```tsx
+// Scaled compact button (size is clamped to [0.1, 10])
+<Button variant="primary" size={0.5}>Mini Action</Button>
+
+// Icon content
+<Button variant="primary">
+  <TruckIcon size={20} /> <span>Ship</span>
+</Button>
+
+// Loading content
+<Button aria-label="Saving">
+  <Loader type="boxy" width={32} color="#de13ca" />
+</Button>
+
+// Style-only disabled appearance while still allowing click handlers
+<Button className="disabled" onClick={onClick}>Disabled Look</Button>
+
+// Native submit behavior
+<Button type="submit" aria-label="Save form">Save</Button>
+```
+
+Implementation caution:
+
+- Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).
+
 ### Input
 
 Import:
@@ -68,6 +109,54 @@ Example:
 <Input type="email" placeholder="you@company.com" required />
 ```
 
+### Modal
+
+Import:
+
+```tsx
+import { Modal } from "@stamcat/craftsman/Modal";
+```
+
+Props:
+
+- Inherits all native `<div>` props.
+- `visible?: boolean` (when falsy, component renders nothing)
+- `onDismiss?: () => void`
+- `type?: "dialog" | "panel"` (default: `"dialog"`)
+- `header?: string | React.ReactNode`
+- `backgroundDismiss?: boolean` (default behavior: `true`)
+- `hideDismissIcon?: boolean` (default behavior: close icon is shown)
+- `footer?: React.ReactNode`
+- `styles?: SerializedStyles` (applies to outer modal wrapper)
+
+Behavior notes:
+
+- Modal is controlled; parent owns open/close state via `visible` and `onDismiss`.
+- Close icon and background click both dismiss through `onDismiss`.
+- Background dismiss only runs when `backgroundDismiss` is `true` or `undefined`.
+- Dismiss uses a short close animation before calling `onDismiss` (~280ms timeout).
+- `type="dialog"` renders centered responsive dialog sizing; `type="panel"` renders a right-side panel.
+- `footer` is rendered in an action row container below modal content.
+
+Example:
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<>
+  <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
+  <Modal
+    visible={open}
+    onDismiss={() => setOpen(false)}
+    type="dialog"
+    header="Confirm Action"
+    footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary">Confirm</Button></>}
+  >
+    <p>Are you sure?</p>
+  </Modal>
+</>
+```
+
 ### Loader
 
 Import:
@@ -151,12 +240,12 @@ if (arr.length === 0) { ... }
 
 1. README is minimal; treat this guide as the source of truth for agent usage.
 2. Theme utilities exist in source but are not guaranteed public package exports.
-3. Additional components in source (for example `Progress`) may not yet be exported.
+3. `Progress` exists in source but is incomplete and intentionally omitted from this guide for now.
 
 ## Safe Fallback Strategy for Agents
 
 If uncertain about available exports:
 
-1. Use only `Button`, `Input`, and `Loader` from their component entry points.
+1. Use only `Button`, `Input`, `Loader`, and `Modal` from their component entry points.
 2. Do not invent package APIs.
 3. Prefer native HTML elements for anything not explicitly exported.

package/components/Button.d.ts

@@ -2,6 +2,7 @@ import { SerializedStyles } from '@emotion/react';
 import { ButtonType } from '../styles/global/components/button';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
+    size?: number;
     styles?: SerializedStyles;
 };
 export declare const Button: React.FC<ButtonProps>;

package/components/Modal.d.ts

@@ -18,6 +18,6 @@ export declare class Modal extends React.PureComponent<ModalProps, ModalState> {
     readonly state: ModalState;
     onDismiss: () => void;
     onClickBackground: () => void;
-    render(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.10",
+  "version": "0.0.23-alpha.11",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/src/components/Button.esm.js

@@ -1,20 +1,27 @@
-import { useTheme as e } from "@emotion/react";
-import t from "@emotion/styled";
-import { jsx as n } from "react/jsx-runtime";
+import { isEmpty as e } from "../utilities/validations.esm.js";
+import { css as t, useTheme as n } from "@emotion/react";
+import r from "@emotion/styled";
+import { Fragment as i, jsx as a } from "react/jsx-runtime";
 //#region src/components/Button.tsx
-var r = t.button`
+var o = r.button`
     ${(e) => e.styles}
-`, i = (t) => {
-	let { type: i = "button", variant: a = "default", className: o, ...s } = t, c = e(), l = typeof c?.components?.button == "string" ? c.components.button : void 0;
-	return /* @__PURE__ */ n(r, {
-		type: i,
-		className: [
-			a === "default" ? void 0 : a,
-			l,
-			o
-		].filter(Boolean).join(" ") || void 0,
-		...s
+    ${((e) => e.size && t`
+        border-radius: calc(var(--btn-border-radius) * ${e.size});
+        padding: calc(var(--btn-pad-y) * ${e.size}) calc(var(--btn-pad-x) * ${e.size});
+        font-size: max(10px, calc(var(--w-text) * ${e.size}));
+    `)}
+`, s = (t) => {
+	let { type: r = "button", variant: s = "default", className: c, size: l, ...u } = t, d = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, f = n(), p = typeof f?.components?.button == "string" ? f.components.button : void 0, m = [
+		s === "default" ? void 0 : s,
+		p,
+		c
+	].filter(Boolean).join(" ") || void 0;
+	return e(t.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(o, {
+		type: r,
+		size: d,
+		className: m,
+		...u
 	});
 };
 //#endregion
-export { i as Button };
+export { s as Button };

package/src/components/Modal.esm.js

@@ -104,7 +104,6 @@ var d = a`
     }
 `, C = i`
     text-decoration: none;
-    // padding: 0 calc(var(--w-gutter) * 0.25) 0 var(--w-gutter);
     height: 36px;
     width: 36px;
     border-radius: 50%;
@@ -122,8 +121,7 @@ var d = a`
 		}, 280));
 	};
 	onClickBackground = () => {
-		let e = this.props.backgroundDismiss;
-		(e === !0 || e === void 0) && this.onDismiss();
+		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
 	};
 	render() {
 		return this.props.visible ? /* @__PURE__ */ l(h, {
@@ -149,7 +147,7 @@ var d = a`
 				isClosing: this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : null;
+		}) : /* @__PURE__ */ c(s, {});
 	}
 };
 //#endregion

package/src/utilities/validations.esm.js

@@ -0,0 +1,7 @@
+//#region src/utilities/validations.ts
+/* #__PURE__ */
+function e(e) {
+	return e == null || typeof e == "object" && Object.keys(e).length === 0 || typeof e == "string" && e.trim().length === 0 || typeof e == "string" && e === " ";
+}
+//#endregion
+export { e as isEmpty };

package/stories/Button.stories.d.ts

@@ -6,6 +6,9 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Primary: Story;
 export declare const Text: Story;
+export declare const WithIcon: Story;
+export declare const Mini: Story;
+export declare const XL: Story;
 export declare const Disabled: Story;
 export declare const FullyDisabled: Story;
 export declare const Loading: Story;