@pindoba/astro-button 0.0.0-alpha-20241003230712

package/README.md

@@ -0,0 +1,35 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
+| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |

package/index.ts

@@ -0,0 +1,6 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Button from "./src/Button.astro";
+
+export default Button;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pindoba/astro-button",
+  "version": "0.0.0-alpha-20241003230712",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "astro": "^4.15.11"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.3",
+    "typescript": "^5.6.2",
+    "@pindoba/styles": "0.0.0-alpha-20241003230712",
+    "@pindoba/panda": "0.0.0-alpha-20241003230712"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix --max-warnings 0",
+    "format": "prettier --write .",
+    "format:fix": "prettier --write .",
+    "check": "astro check",
+    "dev": "astro check --watch",
+    "clean": "rm -rf .astro && rm -rf node_modules && rm -rf .turbo"
+  }
+}

package/src/Button.astro

@@ -0,0 +1,37 @@
+---
+import { css, cx } from "@pindoba/panda/css";
+import {
+  buttonStyles,
+  getButtonFeedbackColor,
+  type ButtonFeedback,
+  type ButtonStyleProps,
+} from "@pindoba/styles/button";
+
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  feedback?: ButtonFeedback;
+  emphasis?: ButtonStyleProps["emphasis"];
+  shape?: ButtonStyleProps["shape"];
+  size?: ButtonStyleProps["size"];
+}
+
+const { emphasis, shape, size, class: className, ...props } = Astro.props;
+
+const classes = buttonStyles({
+  emphasis,
+  shape,
+  size,
+});
+---
+
+<button
+  class={cx(
+    css({ colorPalette: getButtonFeedbackColor(Astro.props.feedback) }),
+    classes.root,
+    className,
+  )}
+  {...props}
+>
+  <slot />
+</button>

package/src/env.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />