@dragunio/fe-libs 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kdragon113
+
+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/README.md

@@ -0,0 +1,64 @@
+# fe-libs
+
+Reusable React component library published as one npm package.
+
+## Structure
+
+```text
+src/                 # Public library entrypoints and styles
+packages/            # Internal component source folders
+├── icons/
+├── button/
+└── table/
+apps/playground/     # Local component storybook
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+pnpm typecheck
+```
+
+## Test locally before publishing
+
+The playground resolves package names directly to `packages/*/src`, so component changes are reflected by Vite HMR immediately.
+
+```bash
+pnpm dev
+```
+
+Open the URL printed by Vite, usually `http://127.0.0.1:5173`.
+
+Available review routes:
+
+- `http://127.0.0.1:5173/#/` — overview
+- `http://127.0.0.1:5173/#/icons` — SVG Icons
+- `http://127.0.0.1:5173/#/button` — Button
+- `http://127.0.0.1:5173/#/table` — Table
+
+To test the playground against generated package output instead of source aliases:
+
+```bash
+pnpm --filter @dragunio/playground dev:dist
+```
+
+To verify a production-like consumer build:
+
+```bash
+pnpm build
+```
+
+## Consuming the published library
+
+```bash
+pnpm add @dragunio/fe-libs
+```
+
+```tsx
+import { Button, PlusIcon, Table } from '@dragunio/fe-libs';
+import '@dragunio/fe-libs/styles.css';
+```
+
+The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a peer dependency.

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
+
+type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
+type ButtonSize = '24' | '32' | '40';
+type ButtonColor = 'normal' | 'success' | 'error' | 'warning';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'size' | 'prefix'> & {
+    /** Preferred visual API ported from the Haraworks Button. */
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    destructive?: boolean;
+    iconOnly?: boolean;
+    icon?: ReactNode;
+    /** Content rendered before the label, usually an icon. */
+    prefix?: ReactNode;
+    /** Content rendered after the label, usually an icon. */
+    suffix?: ReactNode;
+    content?: ReactNode;
+    loading?: boolean;
+    alignCenter?: boolean;
+    /** Compatibility alias for the initial fe-libs playground API. */
+    variant?: ButtonVariant;
+};
+declare const getIconSize: (size: ButtonSize) => 16 | 20;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "size" | "prefix"> & {
+    /** Preferred visual API ported from the Haraworks Button. */
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    destructive?: boolean;
+    iconOnly?: boolean;
+    icon?: ReactNode;
+    /** Content rendered before the label, usually an icon. */
+    prefix?: ReactNode;
+    /** Content rendered after the label, usually an icon. */
+    suffix?: ReactNode;
+    content?: ReactNode;
+    loading?: boolean;
+    alignCenter?: boolean;
+    /** Compatibility alias for the initial fe-libs playground API. */
+    variant?: ButtonVariant;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type IconProps = SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+declare function PlusIcon(props: IconProps): react.JSX.Element;
+declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function CloseIcon(props: IconProps): react.JSX.Element;
+declare function SearchIcon(props: IconProps): react.JSX.Element;
+
+type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    striped?: boolean;
+};
+declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
+declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
+declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
+
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
+
+type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
+type ButtonSize = '24' | '32' | '40';
+type ButtonColor = 'normal' | 'success' | 'error' | 'warning';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'size' | 'prefix'> & {
+    /** Preferred visual API ported from the Haraworks Button. */
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    destructive?: boolean;
+    iconOnly?: boolean;
+    icon?: ReactNode;
+    /** Content rendered before the label, usually an icon. */
+    prefix?: ReactNode;
+    /** Content rendered after the label, usually an icon. */
+    suffix?: ReactNode;
+    content?: ReactNode;
+    loading?: boolean;
+    alignCenter?: boolean;
+    /** Compatibility alias for the initial fe-libs playground API. */
+    variant?: ButtonVariant;
+};
+declare const getIconSize: (size: ButtonSize) => 16 | 20;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "size" | "prefix"> & {
+    /** Preferred visual API ported from the Haraworks Button. */
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    destructive?: boolean;
+    iconOnly?: boolean;
+    icon?: ReactNode;
+    /** Content rendered before the label, usually an icon. */
+    prefix?: ReactNode;
+    /** Content rendered after the label, usually an icon. */
+    suffix?: ReactNode;
+    content?: ReactNode;
+    loading?: boolean;
+    alignCenter?: boolean;
+    /** Compatibility alias for the initial fe-libs playground API. */
+    variant?: ButtonVariant;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type IconProps = SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+declare function PlusIcon(props: IconProps): react.JSX.Element;
+declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function CloseIcon(props: IconProps): react.JSX.Element;
+declare function SearchIcon(props: IconProps): react.JSX.Element;
+
+type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    striped?: boolean;
+};
+declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
+declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
+declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
+
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };

package/dist/index.js

@@ -0,0 +1,157 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  ChevronDownIcon: () => ChevronDownIcon,
+  CloseIcon: () => CloseIcon,
+  PlusIcon: () => PlusIcon,
+  SearchIcon: () => SearchIcon,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  getIconSize: () => getIconSize
+});
+module.exports = __toCommonJS(index_exports);
+
+// packages/button/src/index.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var hierarchyFromVariant = {
+  primary: "primary",
+  secondary: "secondary-gray",
+  ghost: "tertiary-gray",
+  danger: "primary"
+};
+var getIconSize = (size) => size === "24" ? 16 : 20;
+var Button = (0, import_react.forwardRef)(function Button2({
+  hierarchy,
+  variant,
+  size = "32",
+  color = "normal",
+  destructive,
+  iconOnly = false,
+  icon,
+  prefix,
+  suffix,
+  content,
+  loading = false,
+  alignCenter = false,
+  children,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}, ref) {
+  const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
+  const resolvedDestructive = destructive || variant === "danger";
+  const isDisabled = disabled || loading;
+  const label = loading ? "Loading\u2026" : children ?? content;
+  const classes = [
+    "fe-button",
+    `fe-button--${resolvedHierarchy}`,
+    `fe-button--${size}`,
+    `fe-button--${color}`,
+    iconOnly && "fe-button--icon-only",
+    resolvedDestructive && "fe-button--destructive",
+    alignCenter && "fe-button--align-center",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: classes, type, disabled: isDisabled, "aria-busy": loading || void 0, ...props, children: iconOnly ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__label", children: label }),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: suffix })
+  ] }) });
+});
+Button.displayName = "Button";
+
+// packages/icons/src/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var iconProps = ({ size, ...props }) => ({
+  width: size ?? 20,
+  height: size ?? 20,
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "aria-hidden": true,
+  ...props
+});
+function PlusIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...iconProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m16 16 4 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+
+// packages/table/src/index.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TableContext = (0, import_react2.createContext)({ striped: false });
+function Table({ striped = false, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableContext.Provider, { value: { striped }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { ...props, children }) });
+}
+function TableHead(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { ...props });
+}
+function TableRow({ children, ...props }) {
+  const { striped } = (0, import_react2.useContext)(TableContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
+}
+function TableCell({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { ...props, children });
+}
+function TableHeader({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", ...props, children });
+}
+function TableCaption(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("caption", { ...props });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ChevronDownIcon,
+  CloseIcon,
+  PlusIcon,
+  SearchIcon,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  getIconSize
+});

package/dist/index.mjs

@@ -0,0 +1,118 @@
+// packages/button/src/index.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var hierarchyFromVariant = {
+  primary: "primary",
+  secondary: "secondary-gray",
+  ghost: "tertiary-gray",
+  danger: "primary"
+};
+var getIconSize = (size) => size === "24" ? 16 : 20;
+var Button = forwardRef(function Button2({
+  hierarchy,
+  variant,
+  size = "32",
+  color = "normal",
+  destructive,
+  iconOnly = false,
+  icon,
+  prefix,
+  suffix,
+  content,
+  loading = false,
+  alignCenter = false,
+  children,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}, ref) {
+  const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
+  const resolvedDestructive = destructive || variant === "danger";
+  const isDisabled = disabled || loading;
+  const label = loading ? "Loading\u2026" : children ?? content;
+  const classes = [
+    "fe-button",
+    `fe-button--${resolvedHierarchy}`,
+    `fe-button--${size}`,
+    `fe-button--${color}`,
+    iconOnly && "fe-button--icon-only",
+    resolvedDestructive && "fe-button--destructive",
+    alignCenter && "fe-button--align-center",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, disabled: isDisabled, "aria-busy": loading || void 0, ...props, children: iconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [
+    prefix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: prefix }),
+    /* @__PURE__ */ jsx("span", { className: "fe-button__label", children: label }),
+    suffix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: suffix })
+  ] }) });
+});
+Button.displayName = "Button";
+
+// packages/icons/src/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var iconProps = ({ size, ...props }) => ({
+  width: size ?? 20,
+  height: size ?? 20,
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "aria-hidden": true,
+  ...props
+});
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ jsxs2("svg", { ...iconProps(props), children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "m16 16 4 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+
+// packages/table/src/index.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TableContext = createContext({ striped: false });
+function Table({ striped = false, children, ...props }) {
+  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped }, children: /* @__PURE__ */ jsx3("table", { ...props, children }) });
+}
+function TableHead(props) {
+  return /* @__PURE__ */ jsx3("thead", { ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx3("tbody", { ...props });
+}
+function TableRow({ children, ...props }) {
+  const { striped } = useContext(TableContext);
+  return /* @__PURE__ */ jsx3("tr", { "data-striped": striped || void 0, ...props, children });
+}
+function TableCell({ children, ...props }) {
+  return /* @__PURE__ */ jsx3("td", { ...props, children });
+}
+function TableHeader({ children, ...props }) {
+  return /* @__PURE__ */ jsx3("th", { scope: "col", ...props, children });
+}
+function TableCaption(props) {
+  return /* @__PURE__ */ jsx3("caption", { ...props });
+}
+export {
+  Button,
+  ChevronDownIcon,
+  CloseIcon,
+  PlusIcon,
+  SearchIcon,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  getIconSize
+};

package/dist/styles.css

@@ -0,0 +1,215 @@
+/* packages/button/src/styles.css */
+.fe-button {
+  --fe-button-blue-10: #e7f1ff;
+  --fe-button-blue-20: #c6e0ff;
+  --fe-button-blue-30: #94c4ff;
+  --fe-button-blue-40: #5b9cff;
+  --fe-button-blue-60: #2878f0;
+  --fe-button-blue-70: #1e60cc;
+  --fe-button-blue-80: #194da3;
+  --fe-button-gray-10: #f5f6f8;
+  --fe-button-gray-20: #e8eaee;
+  --fe-button-gray-30: #d4d8e0;
+  --fe-button-gray-40: #b8bec9;
+  --fe-button-red-10: #ffeaed;
+  --fe-button-red-20: #ffc9d0;
+  --fe-button-red-30: #f3909d;
+  --fe-button-red-60: #d83d55;
+  --fe-button-red-70: #b92c43;
+  --fe-button-red-80: #94233a;
+  --fe-button-green-10: #e4f8ee;
+  --fe-button-green-20: #b9ebd0;
+  --fe-button-green-30: #7fd5a7;
+  --fe-button-green-60: #168657;
+  --fe-button-green-70: #0f6c46;
+  --fe-button-green-80: #0a5739;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  font: inherit;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+}
+.fe-button--24 {
+  min-height: 24px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.fe-button--32 {
+  min-height: 32px;
+  padding: 6px 14px;
+  border-radius: 18px;
+  font-size: 14px;
+}
+.fe-button--40 {
+  min-height: 40px;
+  padding: 10px 18px;
+  border-radius: 999px;
+  font-size: 14px;
+}
+.fe-button--primary,
+.fe-button--secondary-gray,
+.fe-button--secondary-color,
+.fe-button--tertiary-gray,
+.fe-button--tertiary-color {
+  display: inline-flex;
+}
+.fe-button--primary {
+  min-width: 100px;
+  background: var(--fe-button-blue-60);
+  color: #fff;
+}
+.fe-button--primary:hover {
+  background: var(--fe-button-blue-70);
+}
+.fe-button--primary:active {
+  background: var(--fe-button-blue-80);
+}
+.fe-button--secondary-gray {
+  min-width: 100px;
+  background: #fff;
+  border-color: var(--fe-button-gray-40);
+  color: #20242c;
+}
+.fe-button--secondary-gray:hover {
+  background: var(--fe-button-gray-10);
+}
+.fe-button--secondary-gray:active {
+  background: var(--fe-button-gray-20);
+}
+.fe-button--secondary-color {
+  min-width: 100px;
+  background: #fff;
+  border-color: var(--fe-button-blue-20);
+  color: var(--fe-button-blue-70);
+}
+.fe-button--secondary-color:hover {
+  background: var(--fe-button-blue-10);
+}
+.fe-button--secondary-color:active {
+  background: var(--fe-button-blue-20);
+}
+.fe-button--tertiary-gray {
+  background: transparent;
+  color: #252a33;
+}
+.fe-button--tertiary-gray:hover {
+  background: var(--fe-button-gray-20);
+}
+.fe-button--tertiary-gray:active {
+  background: var(--fe-button-gray-30);
+}
+.fe-button--tertiary-color {
+  background: #fff;
+  color: var(--fe-button-blue-70);
+}
+.fe-button--tertiary-color:hover {
+  background: var(--fe-button-blue-10);
+}
+.fe-button--tertiary-color:active {
+  background: var(--fe-button-blue-20);
+}
+.fe-button--destructive.fe-button--primary,
+.fe-button--error.fe-button--primary {
+  background: var(--fe-button-red-60);
+}
+.fe-button--destructive.fe-button--primary:hover,
+.fe-button--error.fe-button--primary:hover {
+  background: var(--fe-button-red-70);
+}
+.fe-button--destructive.fe-button--primary:active,
+.fe-button--error.fe-button--primary:active {
+  background: var(--fe-button-red-80);
+}
+.fe-button--destructive.fe-button--secondary-color,
+.fe-button--error.fe-button--secondary-color {
+  border-color: var(--fe-button-red-20);
+  color: var(--fe-button-red-70);
+}
+.fe-button--destructive.fe-button--secondary-color:hover,
+.fe-button--error.fe-button--secondary-color:hover {
+  background: var(--fe-button-red-10);
+}
+.fe-button--destructive.fe-button--tertiary-color,
+.fe-button--error.fe-button--tertiary-color {
+  color: var(--fe-button-red-70);
+}
+.fe-button--destructive.fe-button--tertiary-color:hover,
+.fe-button--error.fe-button--tertiary-color:hover {
+  background: var(--fe-button-red-10);
+}
+.fe-button--success.fe-button--primary {
+  background: var(--fe-button-green-60);
+}
+.fe-button--success.fe-button--primary:hover {
+  background: var(--fe-button-green-70);
+}
+.fe-button--success.fe-button--primary:active {
+  background: var(--fe-button-green-80);
+}
+.fe-button--success.fe-button--secondary-color {
+  border-color: var(--fe-button-green-20);
+  color: var(--fe-button-green-70);
+}
+.fe-button--success.fe-button--secondary-color:hover {
+  background: var(--fe-button-green-10);
+}
+.fe-button--success.fe-button--tertiary-color {
+  color: var(--fe-button-green-70);
+}
+.fe-button--success.fe-button--tertiary-color:hover {
+  background: var(--fe-button-green-10);
+}
+.fe-button--warning.fe-button--primary {
+  background: #cb7a00;
+}
+.fe-button--warning.fe-button--primary:hover {
+  background: #a36200;
+}
+.fe-button--warning.fe-button--secondary-color {
+  border-color: #ffd493;
+  color: #a36200;
+}
+.fe-button--warning.fe-button--secondary-color:hover,
+.fe-button--warning.fe-button--tertiary-color:hover {
+  background: #fff3dd;
+}
+.fe-button--warning.fe-button--tertiary-color {
+  color: #a36200;
+}
+.fe-button--icon-only {
+  width: 24px;
+  min-width: 0;
+  padding: 4px;
+}
+.fe-button--icon-only.fe-button--32 {
+  width: 32px;
+  padding: 6px;
+}
+.fe-button--icon-only.fe-button--40 {
+  width: 40px;
+  padding: 10px;
+}
+.fe-button--align-center {
+  width: 100%;
+}
+.fe-button__icon {
+  display: inline-flex;
+}
+.fe-button__label {
+  white-space: nowrap;
+}
+.fe-button:disabled {
+  cursor: not-allowed;
+  opacity: .52;
+}
+.fe-button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--fe-button-blue-40), transparent 55%);
+  outline-offset: 2px;
+}
+
+/* src/styles.css */

package/dist/styles.d.mts

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

package/dist/styles.d.ts

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@dragunio/fe-libs",
+  "version": "0.1.0",
+  "description": "Reusable React components, icons, and table primitives.",
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/kdragon113/fe-libs.git" },
+  "homepage": "https://github.com/kdragon113/fe-libs#readme",
+  "bugs": { "url": "https://github.com/kdragon113/fe-libs/issues" },
+  "sideEffects": ["*.css"],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js" },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "publishConfig": { "access": "public" },
+  "packageManager": "pnpm@9.15.0",
+  "scripts": {
+    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --clean",
+    "build:playground": "pnpm --filter @dragunio/playground build",
+    "clean": "rm -rf dist",
+    "dev": "pnpm --filter @dragunio/playground dev",
+    "typecheck": "tsc -p tsconfig.json && pnpm --filter @dragunio/playground typecheck",
+    "format": "prettier --write .",
+    "pack:check": "node scripts/verify-packages.mjs",
+    "release:check": "pnpm typecheck && pnpm build && pnpm build:playground && pnpm pack:check",
+    "release": "pnpm release:check && npm publish --access public",
+    "release:dry-run": "pnpm release:check && npm publish --dry-run --access public"
+  },
+  "peerDependencies": { "react": ">=18", "react-dom": ">=18" },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}