@kaio-xyz/design-system 1.0.0

package/README.md

@@ -0,0 +1,64 @@
+# @kaio-xyz/design-system
+
+React design system for Kaio/Libre projects.
+
+## Installation
+
+```bash
+pnpm add @kaio-xyz/design-system
+```
+
+## Usage
+
+Import styles once in your entry point (e.g. `App.tsx` or `main.tsx`):
+
+```tsx
+import "@kaio-xyz/design-system/styles.css";
+```
+
+Then use the components:
+
+```tsx
+import { Badge } from "@kaio-xyz/design-system";
+
+function App() {
+  return (
+    <Badge text="Success" status="success" />
+  );
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook
+pnpm storybook
+
+# Build the library
+pnpm build
+
+# Watch mode
+pnpm dev
+```
+
+## Storybook
+
+View all components and their variants:
+
+```bash
+pnpm storybook
+```
+
+Open http://localhost:6006
+
+## Requirements
+
+- React 18+ or 19+
+- React DOM 18+ or 19+
+
+## License
+
+ISC

package/dist/components/atoms/badge/badge.d.ts

@@ -0,0 +1,11 @@
+export type BadgeStatus = "success" | "rejected" | "info" | "warning" | undefined;
+export declare const badgeStatuses: BadgeStatus[];
+export type BadgeProps = {
+    text: string;
+    fullWidth?: boolean;
+    size?: "xs" | "s" | "m" | "l";
+    dataTest?: string;
+    isLeftAlign?: boolean;
+    status?: BadgeStatus;
+};
+export declare const Badge: ({ text, status, fullWidth, size, dataTest, isLeftAlign, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/badge/badge.stories.d.ts

@@ -0,0 +1,29 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: ({ text, status, fullWidth, size, dataTest, isLeftAlign, }: import("./badge").BadgeProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        text: string;
+        fullWidth: false;
+    };
+    argTypes: {
+        text: {
+            description: string;
+        };
+        fullWidth: {
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Rejected: Story;
+export declare const Info: Story;
+export declare const Warning: Story;
+export declare const FullWidth: Story;

package/dist/components/atoms/badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from "./badge";

package/dist/components/atoms/label/index.d.ts

@@ -0,0 +1 @@
+export { Label } from './label';

package/dist/components/atoms/label/label.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type LabelProps = {
+    id?: string;
+    label?: ReactNode;
+    className?: string;
+    hasMargin?: boolean;
+    hasHalfMargin?: boolean;
+    hasCursorPointer?: boolean;
+};
+export declare const Label: ({ id, label, className, hasMargin, hasHalfMargin, hasCursorPointer }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+
+var baseStyle = {"root":"badge-base-module__root__oUZlm"};
+
+var style = {"root":"badge-module__root__rXpaz"};
+
+var Badge = function (_a) {
+    var text = _a.text, status = _a.status, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "m" : _c, dataTest = _a.dataTest, _d = _a.isLeftAlign, isLeftAlign = _d === void 0 ? false : _d;
+    return (jsxRuntime.jsx("label", { className: clsx(baseStyle.root, style.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-size": size, "data-test": dataTest, "data-is-left-align": isLeftAlign, children: text }));
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/components/atoms/badge/badge.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport baseStyle from './badge-base.module.css';\nimport style from './badge.module.css';\n\nexport type BadgeStatus = \"success\" | \"rejected\" | \"info\" | \"warning\" | undefined;\n\nexport const badgeStatuses: BadgeStatus[] = [\"warning\", \"info\", undefined, \"success\"];\n\nexport type BadgeProps = {\n    text: string;\n    fullWidth?: boolean;\n    size?: \"xs\" | \"s\" | \"m\" | \"l\";\n    dataTest?: string;\n    isLeftAlign?: boolean;\n    status?: BadgeStatus;\n};\n\nexport const Badge = ({\n    text,\n    status,\n    fullWidth = false,\n    size = \"m\",\n    dataTest,\n    isLeftAlign = false,\n}: BadgeProps) => (\n    <label\n        className={clsx(baseStyle.root, style.root)}\n        title={text}\n        data-status={status}\n        data-full-width={fullWidth}\n        data-size={size}\n        data-test={dataTest}\n        data-is-left-align={isLeftAlign}\n    >\n        {text}\n    </label>\n);"],"names":["_jsx"],"mappings":";;;;;;;;;AAkBO,IAAM,KAAK,GAAG,UAAC,EAOT,EAAA;QANT,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,EAAA,GAAA,EAAA,CAAA,IAAU,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,WAAmB,EAAnB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA;AACL,IAAA,QACdA,cAAA,CAAA,OAAA,EAAA,EACI,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAC3C,KAAK,EAAE,IAAI,EAAA,aAAA,EACE,MAAM,EAAA,iBAAA,EACF,SAAS,EAAA,WAAA,EACf,IAAI,EAAA,WAAA,EACJ,QAAQ,EAAA,oBAAA,EACC,WAAW,EAAA,QAAA,EAE9B,IAAI,GACD;AAXM;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/_vars.css";
+export { Badge } from "@/components/atoms/badge";

package/dist/index.esm.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+var baseStyle = {"root":"badge-base-module__root__oUZlm"};
+
+var style = {"root":"badge-module__root__rXpaz"};
+
+var Badge = function (_a) {
+    var text = _a.text, status = _a.status, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "m" : _c, dataTest = _a.dataTest, _d = _a.isLeftAlign, isLeftAlign = _d === void 0 ? false : _d;
+    return (jsx("label", { className: clsx(baseStyle.root, style.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-size": size, "data-test": dataTest, "data-is-left-align": isLeftAlign, children: text }));
+};
+
+export { Badge };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/atoms/badge/badge.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport baseStyle from './badge-base.module.css';\nimport style from './badge.module.css';\n\nexport type BadgeStatus = \"success\" | \"rejected\" | \"info\" | \"warning\" | undefined;\n\nexport const badgeStatuses: BadgeStatus[] = [\"warning\", \"info\", undefined, \"success\"];\n\nexport type BadgeProps = {\n    text: string;\n    fullWidth?: boolean;\n    size?: \"xs\" | \"s\" | \"m\" | \"l\";\n    dataTest?: string;\n    isLeftAlign?: boolean;\n    status?: BadgeStatus;\n};\n\nexport const Badge = ({\n    text,\n    status,\n    fullWidth = false,\n    size = \"m\",\n    dataTest,\n    isLeftAlign = false,\n}: BadgeProps) => (\n    <label\n        className={clsx(baseStyle.root, style.root)}\n        title={text}\n        data-status={status}\n        data-full-width={fullWidth}\n        data-size={size}\n        data-test={dataTest}\n        data-is-left-align={isLeftAlign}\n    >\n        {text}\n    </label>\n);"],"names":["_jsx"],"mappings":";;;;;;;AAkBO,IAAM,KAAK,GAAG,UAAC,EAOT,EAAA;QANT,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,EAAA,GAAA,EAAA,CAAA,IAAU,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,WAAmB,EAAnB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA;AACL,IAAA,QACdA,GAAA,CAAA,OAAA,EAAA,EACI,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAC3C,KAAK,EAAE,IAAI,EAAA,aAAA,EACE,MAAM,EAAA,iBAAA,EACF,SAAS,EAAA,WAAA,EACf,IAAI,EAAA,WAAA,EACJ,QAAQ,EAAA,oBAAA,EACC,WAAW,EAAA,QAAA,EAE9B,IAAI,GACD;AAXM;;;;"}

package/dist/styles.css

@@ -0,0 +1 @@
+:root{--primary-100:225,71%,55%;--primary-80:225,71%,60%;--primary-50:225,71%,80%;--primary-20:225,71%,90%;--neutral-0:0,0%,100%;--neutral-10:0,0%,95%;--neutral-20:0,0%,90%;--neutral-30:0,0%,85%;--neutral-40:0,0%,80%;--neutral-80:0,0%,30%;--neutral-100:0,0%,10%;--support-white:0,0%,100%;--support-white-93:0,0%,93%;--support-white-80:0,0%,80%;--support-white-96:0,0%,96%;--support-white-98:0,0%,98%;--support-black:0,0%,0%;--support-black-80:0,0%,0%,80%;--support-black-50:0,0%,0%,50%;--support-black-40:0,0%,0%,40%;--support-gray:211,25%,84%;--support-gray-dark:211,7%,47%;--support-gray-medium:240,13%,65%;--support-gray-light:0,0%,95%;--support-blue:211,61%,43%;--support-blue-light:202,81%,86%;--support-gold:45,51%,50%;--semantic-success:104,71%,31%;--semantic-success-light:124,45%,61%;--semantic-warning:43,100%,52%;--semantic-warning-light:52,92%,56%;--semantic-warning-dark:35,100%,34%;--semantic-error:0,76%,57%;--semantic-error-light:0,76%,90%;--semantic-info:195,100%,68%;--semantic-info-dark:196,100%,31%;--small-container:820px;--medium-container:1024px;--large-container:1440px;--space-2-px:2px;--space-4-px:4px;--space-6-px:6px;--space-8-px:8px;--space-12-px:12px;--space-14-px:14px;--space-16-px:16px;--space-20-px:20px;--space-24-px:24px;--space-28-px:28px;--space-32-px:32px;--space-42-px:42px;--space-64-px:64px;--radius-3-px:3px;--radius-6-px:6px;--radius-16-px:16px;--font-size-10-px:10px;--font-size-12-px:12px;--font-size-14-px:14px;--font-size-16-px:16px;--font-size-18-px:18px;--font-size-20-px:20px;--font-size-26-px:26px;--font-size-40-px:40px;--time-100-ms:100ms;--time-200-ms:200ms;--time-250-ms:250ms;--time-300-ms:300ms;--time-500-ms:500ms;--font-weight-light:300;--font-weight-regular:400;--font-weight-semibold:600;--blur-filter:1px;--header-height:70px;--navigation-menu-height:46px;--sidebar-width:200px;--sidebar-width--mobile:120px;--sidebar-collapsed-width:79px;--shadow-low:0 2px 0px rgba(0,0,0,.1),0 2px rgba(0,0,0,.05);--shadow-base:0 4px 8px rgba(0,0,0,.1),0 0 4px rgba(0,0,0,.05);--shadow-mid:0px 5px 20px -5px rgba(61,62,63,.225),0px 5px 11px -7px rgba(61,62,63,.13);--shadow-warning-mid:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px hsl(var(--semantic-warning));--shadow-error-mid:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px hsl(var(--semantic-error));--shadow-info-mid:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px hsl(var(--semantic-info));--ease-standard-css:cubic-bezier(0.3,0.07,0.034,1)}.badge-base-module__root__oUZlm{background-color:hsla(var(--support-gray),20%);border-radius:var(--radius-3-px);color:hsl(var(--support-gray-dark));display:inline-block;font-size:var(--font-size-14-px);font-weight:var(--font-weight-semibold);min-width:120px;padding:var(--space-6-px) var(--space-12-px);pointer-events:none;text-align:center}.badge-base-module__root__oUZlm[data-full-width=true]{width:100%}.badge-base-module__root__oUZlm[data-is-left-align=true]{text-align:left}.badge-base-module__root__oUZlm[data-size=xs]{font-size:var(--font-size-10-px);min-width:60px;padding:var(--space-2-px) var(--space-4-px)}.badge-base-module__root__oUZlm[data-size=s]{font-size:var(--font-size-12-px);min-width:80px;padding:var(--space-4-px) var(--space-4-px)}.badge-base-module__root__oUZlm[data-size=m]{font-size:var(--font-size-14-px);min-width:120px;padding:var(--space-4-px) var(--space-8-px)}.badge-base-module__root__oUZlm[data-size=l]{font-size:var(--font-size-16-px);min-width:160px;padding:var(--space-8-px) var(--space-12-px)}.badge-module__root__rXpaz[data-status=success]{background-color:hsla(var(--semantic-success),20%);color:hsl(var(--semantic-success))}.badge-module__root__rXpaz[data-status=info]{background-color:hsla(var(--semantic-info),20%);color:hsl(var(--semantic-info-dark))}.badge-module__root__rXpaz[data-status=warning]{background-color:hsla(var(--semantic-warning-light),20%);color:hsl(var(--semantic-warning-dark))}.badge-module__root__rXpaz[data-status=rejected]{background-color:hsla(var(--semantic-error),20%);color:hsl(var(--semantic-error))}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@kaio-xyz/design-system",
+    "version": "1.0.0",
+    "description": "",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "type": "module",
+    "scripts": {
+        "build": "rollup -c",
+        "dev": "rollup -c -w",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "packageManager": "pnpm@10.24.0",
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "devDependencies": {
+        "@csstools/postcss-design-tokens": "^4.0.5",
+        "@rollup/plugin-typescript": "12.3.0",
+        "@storybook/addon-docs": "^10.1.4",
+        "@storybook/blocks": "^8.6.14",
+        "@storybook/react": "^10.1.4",
+        "@storybook/react-vite": "^10.1.4",
+        "@types/react": "19.2.7",
+        "clsx": "^2.1.1",
+        "postcss": "8.5.6",
+        "postcss-custom-media": "11.0.6",
+        "postcss-import": "^16.1.1",
+        "postcss-normalize": "^13.0.1",
+        "postcss-preset-env": "10.5.0",
+        "react": "19.2.1",
+        "react-dom": "19.2.1",
+        "rollup": "4.53.3",
+        "rollup-plugin-postcss": "4.0.2",
+        "storybook": "^10.1.4",
+        "tslib": "2.8.1",
+        "typescript": "5.9.3"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.cjs.js"
+        },
+        "./styles.css": "./dist/styles.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": [
+        "**/*.css"
+    ]
+}