quix-ui 1.1.0

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ViewProps {
+    display?: "block" | "flex" | "inline-block" | "inline-flex";
+    isScrollable?: boolean;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    alignItems?: "stretch" | "center" | "flex-start";
+    justifyContent?: "flex-start" | "center" | "space-between";
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    paddingX?: number;
+    paddingY?: number;
+    textColor?: string;
+    children?: React.ReactNode | string;
+    rounded?: {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    } | number;
+    className?: string;
+    onClick?: () => void;
+}
+
+declare function ViewContainer(props: ViewProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonsProps {
+    onClick: () => void;
+    width?: number;
+    height?: number;
+    label?: string;
+    paddingX?: number;
+    paddingY?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    rounded?: {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    } | number;
+    className?: string;
+}
+
+declare function Buttons(props: ButtonsProps): react_jsx_runtime.JSX.Element;
+
+export { Buttons, ViewContainer };

package/dist/index.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ViewContainer(props) {
+    const { display, isScrollable, direction, alignItems, justifyContent, width, height, backgroundColor, paddingX, paddingY, textColor, className, rounded } = props;
+    return jsx("div", { className: className, style: {
+            display: display || 'block',
+            overflowY: isScrollable ? 'scroll' : 'hidden',
+            flexDirection: direction || 'row',
+            alignItems: alignItems || 'stretch',
+            justifyContent: justifyContent || 'flex-start',
+            width: width ? `${width}px` : 'auto',
+            height: height ? `${height}px` : 'auto',
+            backgroundColor: backgroundColor || 'transparent',
+            paddingInline: paddingX ? `${paddingX}px` : undefined,
+            paddingBlock: paddingY ? `${paddingY}px` : undefined,
+            color: textColor || 'inherit',
+            borderTopLeftRadius: typeof rounded === 'number' ? rounded : rounded?.topLeft ?? 4,
+            borderTopRightRadius: typeof rounded === 'number' ? rounded : rounded?.topRight ?? 4,
+            borderBottomLeftRadius: typeof rounded === 'number' ? rounded : rounded?.bottomLeft ?? 4,
+            borderBottomRightRadius: typeof rounded === 'number' ? rounded : rounded?.bottomRight ?? 4,
+        }, children: props.children });
+}
+
+function Buttons(props) {
+    const { onClick, width, height, label, paddingX, paddingY, backgroundColor, textColor, rounded, className } = props;
+    return jsx("button", { className: className, style: {
+            width: width ? `${width}px` : 'auto',
+            height: height ? `${height}px` : 'auto',
+            paddingInline: paddingX ?? 4,
+            paddingBlock: paddingY ?? 4,
+            backgroundColor: backgroundColor || 'transparent',
+            color: textColor || 'inherit',
+            borderTopLeftRadius: typeof rounded === 'number' ? rounded : rounded?.topLeft ?? 4,
+            borderTopRightRadius: typeof rounded === 'number' ? rounded : rounded?.topRight ?? 4,
+            borderBottomLeftRadius: typeof rounded === 'number' ? rounded : rounded?.bottomLeft ?? 4,
+            borderBottomRightRadius: typeof rounded === 'number' ? rounded : rounded?.bottomRight ?? 4,
+            cursor: 'pointer',
+        }, onClick: onClick, children: label });
+}
+
+export { Buttons, ViewContainer };
+//# sourceMappingURL=index.js.map
+
+exports.ViewContainer = ViewContainer;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/view/ViewContainer.tsx","../../src/components/Buttons/Buttons.tsx"],"sourcesContent":[null,null],"names":["_jsx"],"mappings":"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"}

package/dist/types/eslint.config.d.mts

@@ -0,0 +1,2 @@
+declare const _default: import("@eslint/config-helpers").Config[];
+export default _default;

package/dist/types/node_modules/@eslint/config-helpers/dist/esm/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @fileoverview Types for this package.
+ */
+import type { ConfigObject } from "@eslint/core";
+/**
+ * Infinite array type.
+ */
+export type InfiniteArray<T> = T | InfiniteArray<T>[];
+/**
+ * The type of array element in the `extends` property after flattening.
+ */
+export type SimpleExtendsElement = string | ConfigObject;
+/**
+ * The type of array element in the `extends` property before flattening.
+ */
+export type ExtendsElement = SimpleExtendsElement | InfiniteArray<ConfigObject>;
+/**
+ * Config with extends. Valid only inside of `defineConfig()`.
+ */
+export interface ConfigWithExtends extends ConfigObject {
+    extends?: ExtendsElement[];
+}
+export type ConfigWithExtendsArray = InfiniteArray<ConfigWithExtends>[];

package/dist/types/src/components/Buttons/Buttons.d.ts

@@ -0,0 +1,2 @@
+import { ButtonsProps } from "./types";
+export default function Buttons(props: ButtonsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Buttons/Buttons.stories.d.ts

@@ -0,0 +1,56 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Buttons from './Buttons';
+declare const meta: {
+    title: string;
+    component: typeof Buttons;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+        textColor: {
+            control: "color";
+        };
+        width: {
+            control: "number";
+        };
+        height: {
+            control: "number";
+        };
+        paddingX: {
+            control: "number";
+        };
+        paddingY: {
+            control: "number";
+        };
+        label: {
+            control: "text";
+        };
+        rounded: {
+            topLeft: {
+                control: string;
+            };
+            topRight: {
+                control: string;
+            };
+            bottomLeft: {
+                control: string;
+            };
+            bottomRight: {
+                control: string;
+            };
+        };
+        className: {
+            control: "text";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Button: Story;

package/dist/types/src/components/Buttons/types.d.ts

@@ -0,0 +1,17 @@
+export interface ButtonsProps {
+    onClick: () => void;
+    width?: number;
+    height?: number;
+    label?: string;
+    paddingX?: number;
+    paddingY?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    rounded?: {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    } | number;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { default as ViewContainer } from './view/ViewContainer';
+export { default as Buttons } from './components/Buttons/Buttons';

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

@@ -0,0 +1,7 @@
+interface figmaColorToRgbaProps {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+declare function figmaColorToRgba({ r, g, b, a }: figmaColorToRgbaProps): string;

package/dist/types/src/view/Layout.stories.d.ts

@@ -0,0 +1,71 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ViewContainer from './ViewContainer';
+declare const meta: {
+    title: string;
+    component: typeof ViewContainer;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+        textColor: {
+            control: "color";
+        };
+        width: {
+            control: "number";
+        };
+        height: {
+            control: "number";
+        };
+        display: {
+            options: string[];
+        };
+        direction: {
+            options: string[];
+        };
+        isScrollable: {
+            control: "boolean";
+        };
+        alignItems: {
+            options: string[];
+        };
+        justifyContent: {
+            options: string[];
+        };
+        paddingX: {
+            control: "number";
+        };
+        paddingY: {
+            control: "number";
+        };
+        children: {
+            control: "text";
+        };
+        rounded: {
+            topLeft: {
+                control: string;
+            };
+            topRight: {
+                control: string;
+            };
+            bottomLeft: {
+                control: string;
+            };
+            bottomRight: {
+                control: string;
+            };
+        };
+        className: {
+            control: "text";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const View: Story;

package/dist/types/src/view/ViewContainer.d.ts

@@ -0,0 +1,2 @@
+import { ViewProps } from "./types";
+export default function ViewContainer(props: ViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+export interface ViewProps {
+    display?: "block" | "flex" | "inline-block" | "inline-flex";
+    isScrollable?: boolean;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    alignItems?: "stretch" | "center" | "flex-start";
+    justifyContent?: "flex-start" | "center" | "space-between";
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    paddingX?: number;
+    paddingY?: number;
+    textColor?: string;
+    children?: React.ReactNode | string;
+    rounded?: {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    } | number;
+    className?: string;
+    onClick?: () => void;
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "quix-ui",
+  "version": "1.1.0",
+  "description": "This is a react component library.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest --watchAll --verbose",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky",
+    "lint": "eslint ./src/ --ext .ts,.tsx",
+    "lint:fix": "eslint ./src --ext .ts,.tsx --fix",
+    "release": "standard-version",
+    "compile": "rimraf dist/lib && tsc && tsc --build tsconfig.es5.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lizzy-km/figma-component-library.git"
+  },
+  "author": "Kaung Myat Soe",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lizzy-km/figma-component-library/issues"
+  },
+  "homepage": "https://github.com/lizzy-km/figma-component-library#readme",
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
+  "babel": {
+    "sourceType": "unambiguous",
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-typescript",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.6",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@eslint/js": "^9.39.2",
+    "@figma/eslint-plugin-figma-plugins": "^1.0.0",
+    "@figma/plugin-typings": "^1.122.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.8",
+    "axios": "^1.13.2",
+    "eslint": "^9.39.2",
+    "globals": "^17.0.0",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jiti": "^2.6.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.55.1",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.1.11",
+    "styled-components": "^6.3.6",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.0"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "dependencies": {
+    "fs": "^0.0.1-security",
+    "rimraf": "^6.1.2"
+  }
+}