@starasia/box 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Box } from './Box';
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,148 @@
+import { CSSProperties } from 'react';
+
+export declare const DisplayConst: readonly ["flex", "block", "inline-block", "inline-flex", "none"];
+export type Display = (typeof DisplayConst)[number];
+export declare const DirectionConst: readonly ["row", "column", "sm-row", "sm-column", "md-row", "md-column", "lg-row", "lg-column", "xl-row", "xl-column"];
+export type Direction = (typeof DirectionConst)[number];
+export declare const JustifyConst: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
+export type Justify = (typeof JustifyConst)[number];
+export declare const DisplayAlignConst: readonly ["flex-start", "flex-end", "center", "baseline", "stretch"];
+export type DisplayAlign = (typeof DisplayAlignConst)[number];
+export declare const SpacingConst: readonly ["auto", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "spacing-0", "spacing-1", "spacing-2", "spacing-4", "spacing-6", "spacing-8", "spacing-10", "spacing-12", "spacing-14", "spacing-16", "spacing-18", "spacing-20", "spacing-24", "spacing-28", "spacing-32", "spacing-36", "spacing-40", "spacing-48", "spacing-64", "spacing-80", "spacing-96", "spacing-128", "spacing-160", "spacing-192", "spacing-224", "spacing-256"];
+export type Spacing = (typeof SpacingConst)[number];
+export declare const PaddingConst: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "spacing-0", "spacing-1", "spacing-2", "spacing-4", "spacing-6", "spacing-8", "spacing-10", "spacing-12", "spacing-14", "spacing-16", "spacing-18", "spacing-20", "spacing-24", "spacing-28", "spacing-32", "spacing-36", "spacing-40", "spacing-48", "spacing-64", "spacing-80", "spacing-96", "spacing-128", "spacing-160", "spacing-192", "spacing-224", "spacing-256"];
+export type Padding = (typeof PaddingConst)[number];
+export declare const ColorSchemeGenerator: readonly [{
+    readonly name: "brand";
+    readonly colors: readonly ["primary", "secondary", "tertiary", "border-base"];
+}, {
+    readonly name: "accent";
+    readonly colors: readonly ["accent-dark-primary", "accent-dark-secondary", "accent-dark-tertiary"];
+}, {
+    readonly name: "state";
+    readonly colors: readonly ["success", "error", "warning", "info"];
+}, {
+    readonly name: "text";
+    readonly colors: readonly ["text", "text-light", "text-muted", "text-dark"];
+}, {
+    readonly name: "gray";
+    readonly colors: readonly ["gray-50", "gray-100", "gray-200", "gray-300", "gray-400", "gray-500", "gray-600", "gray-700", "gray-800", "gray-900", "gray-950"];
+}, {
+    readonly name: "red";
+    readonly colors: readonly ["red-50", "red-100", "red-200", "red-300", "red-400", "red-500", "red-600", "red-700", "red-800", "red-900", "red-950"];
+}, {
+    readonly name: "orange";
+    readonly colors: readonly ["orange-50", "orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-950"];
+}, {
+    readonly name: "yellow";
+    readonly colors: readonly ["yellow-50", "yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "yellow-950"];
+}, {
+    readonly name: "green";
+    readonly colors: readonly ["green-50", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "green-950"];
+}, {
+    readonly name: "blue";
+    readonly colors: readonly ["blue-50", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "blue-950"];
+}, {
+    readonly name: "purple";
+    readonly colors: readonly ["purple-50", "purple-100", "purple-200", "purple-300", "purple-400", "purple-500", "purple-600", "purple-700", "purple-800", "purple-900", "purple-950"];
+}, {
+    readonly name: "pink";
+    readonly colors: readonly ["pink-50", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
+}, {
+    readonly name: "aloha";
+    readonly colors: readonly ["aloha-50", "aloha-100", "aloha-200", "aloha-300", "aloha-400", "aloha-500", "aloha-600", "aloha-700", "aloha-800", "aloha-900"];
+}];
+export declare const ColorConst: ("primary" | "secondary" | "tertiary" | "border-base" | "accent-dark-primary" | "accent-dark-secondary" | "accent-dark-tertiary" | "success" | "error" | "warning" | "info" | "text" | "text-light" | "text-muted" | "text-dark" | "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-950" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-950" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-950" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-950" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-950" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-950" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-950" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "aloha-50" | "aloha-100" | "aloha-200" | "aloha-300" | "aloha-400" | "aloha-500" | "aloha-600" | "aloha-700" | "aloha-800" | "aloha-900")[];
+export type Color = (typeof ColorConst)[number];
+export declare const FluidConst: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45"];
+export type Fluid = (typeof FluidConst)[number];
+export interface DeviceMediaQueriesObject {
+    mobile?: boolean;
+    tablet?: boolean;
+    desktop?: boolean;
+}
+export type DeviceMediaQueries = "mobile" | "tablet" | "desktop";
+export declare const WidthConst: readonly ["width-0", "width-1", "width-2", "width-4", "width-6", "width-8", "width-10", "width-12", "width-14", "width-16", "width-18", "width-20", "width-24", "width-28", "width-32", "width-36", "width-40", "width-48", "width-56", "width-64", "width-80", "width-96", "width-128", "width-160", "width-192", "width-224", "width-256", "width-xs", "width-sm", "width-md", "width-lg", "width-auto", "width-1-2", "width-1-3", "width-2-3", "width-1-4", "width-2-4", "width-3-4", "width-1-5", "width-2-5", "width-3-5", "width-4-5", "width-1-6", "width-2-6", "width-3-6", "width-4-6", "width-5-6", "width-full", "width-screen", "width-min", "width-max", "width-fit "];
+export type Width = (typeof WidthConst)[number];
+export declare const ShadowConst: readonly ["shadow-sm", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl", "shadow-inner", "shadow"];
+export type Shadow = (typeof ShadowConst)[number];
+export declare const FlexWrapConst: readonly ["nowrap", "wrap", "wrap-reverse", "initial", "inherit"];
+export type FlexWrap = (typeof FlexWrapConst)[number];
+export declare const HeightConst: readonly ["height-0", "height-1", "height-2", "height-4", "height-6", "height-8", "height-10", "height-12", "height-14", "height-16", "height-18", "height-20", "height-24", "height-28", "height-32", "height-36", "height-40", "height-48", "height-56", "height-64", "height-80", "height-96", "height-128", "height-160", "height-192", "height-224", "height-256", "height-xs", "height-sm", "height-md", "height-lg", "height-auto", "height-1-2", "height-1-3", "height-2-3", "height-1-4", "height-2-4", "height-3-4", "height-1-5", "height-2-5", "height-3-5", "height-4-5", "height-1-6", "height-2-6", "height-3-6", "height-4-6", "height-5-6", "height-full", "height-screen", "height-min", "height-max", "height-fit"];
+export type Height = (typeof HeightConst)[number];
+export declare const BorderRadiusConst: readonly ["rounded-none", "rounded-xs", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-full"];
+export type BorderRadius = (typeof BorderRadiusConst)[number];
+export declare const BorderWidthConst: readonly ["border-0", "border-2", "border-4", "border-8", "border", "border-t-0", "border-t-2", "border-t-4", "border-t-8", "border-t", "border-r-0", "border-r-2", "border-r-4", "border-r-8", "border-r", "border-b-0", "border-b-2", "border-b-4", "border-b-8", "border-b", "border-l-0", "border-l-2", "border-l-4", "border-l-8", "border-l", "border-x-0", "border-x-2", "border-x-4", "border-x-8", "border-x", "border-y-0", "border-y-2", "border-y-4", "border-y-8", "border-y", "border-tr-0", "border-tr-2", "border-tr-4", "border-tr-8", "border-tr", "border-rb-0", "border-rb-2", "border-rb-4", "border-rb-8", "border-rb", "border-bl-0", "border-bl-2", "border-bl-4", "border-bl-8", "border-bl", "border-lt-0", "border-lt-2", "border-lt-4", "border-lt-8", "border-lt", "border-trb-0", "border-trb-2", "border-trb-4", "border-trb-8", "border-trb", "border-rbl-0", "border-rbl-2", "border-rbl-4", "border-rbl-8", "border-rbl", "border-blt-0", "border-blt-2", "border-blt-4", "border-blt-8", "border-blt", "border-ltr-0", "border-ltr-2", "border-ltr-4", "border-ltr-8", "border-ltr"];
+export type BorderWidth = (typeof BorderWidthConst)[number];
+export declare const BorderStyleConst: readonly ["border-solid", "border-dashed", "border-dotted", "border-double", "border-hidden", "border-none", "border-solid-t", "border-dashed-t", "border-dotted-t", "border-double-t", "border-hidden-t", "border-none-t", "border-solid-r", "border-dashed-r", "border-dotted-r", "border-double-r", "border-hidden-r", "border-none-r", "border-solid-b", "border-dashed-b", "border-dotted-b", "border-double-b", "border-hidden-b", "border-none-b", "border-solid-l", "border-dashed-l", "border-dotted-l", "border-double-l", "border-hidden-l", "border-none-l", "border-solid-y", "border-dashed-y", "border-dotted-y", "border-double-y", "border-hidden-y", "border-none-y", "border-solid-x", "border-dashed-x", "border-dotted-x", "border-double-x", "border-hidden-x", "border-none-x", "border-solid-tr", "border-dashed-tr", "border-dotted-tr", "border-double-tr", "border-hidden-tr", "border-none-tr", "border-solid-rb", "border-dashed-rb", "border-dotted-rb", "border-double-rb", "border-hidden-rb", "border-none-rb", "border-solid-bl", "border-dashed-bl", "border-dotted-bl", "border-double-bl", "border-hidden-bl", "border-none-bl", "border-solid-lt", "border-dashed-lt", "border-dotted-lt", "border-double-lt", "border-hidden-lt", "border-none-lt", "border-solid-trb", "border-dashed-trb", "border-dotted-trb", "border-double-trb", "border-hidden-trb", "border-none-trb", "border-solid-rbl", "border-dashed-rbl", "border-dotted-rbl", "border-double-rbl", "border-hidden-rbl", "border-none-rbl", "border-solid-blt", "border-dashed-blt", "border-dotted-blt", "border-double-blt", "border-hidden-blt", "border-none-blt", "border-solid-ltr", "border-dashed-ltr", "border-dotted-ltr", "border-double-ltr", "border-hidden-ltr", "border-none-ltr"];
+export type BorderStyle = (typeof BorderStyleConst)[number];
+export declare const PositionConst: readonly ["static", "absolute", "fixed", "relative", "sticky", "initial", "inherit"];
+export type Position = (typeof PositionConst)[number];
+export declare const TranslateConts: readonly ["translate-x-0", "translate-y-0", "translate-x-1", "translate-y-1", "translate-x-2", "translate-y-2", "translate-x-3", "translate-y-3", "translate-x-4", "translate-y-4", "translate-x-5", "translate-y-5", "translate-x-6", "translate-y-6", "translate-x-7", "translate-y-7", "translate-x-8", "translate-y-8", "translate-x-9", "translate-y-9", "translate-x-10", "translate-y-10", "translate-x-11", "translate-y-11", "translate-x-12", "translate-y-12", "translate-x-14", "translate-y-14", "translate-x-16", "translate-y-16", "translate-x-20", "translate-y-20", "translate-x-24", "translate-y-24", "translate-x-28", "translate-y-28", "translate-x-32", "translate-y-32", "translate-x-36", "translate-y-36", "translate-x-40", "translate-y-40", "translate-x-44", "translate-y-44", "translate-x-48", "translate-y-48", "translate-x-52", "translate-y-52", "translate-x-56", "translate-y-56", "translate-x-60", "translate-y-60", "translate-x-64", "translate-y-64", "translate-x-72", "translate-y-72", "translate-x-80", "translate-y-80", "translate-x-96", "translate-y-96", "translate-x-1-2", "translate-x-1-3", "translate-x-2-3", "translate-x-1-4", "translate-x-2-4", "translate-x-3-4", "translate-x-full", "translate-y-1-2", "translate-y-1-3", "translate-y-2-3", "translate-y-1-4", "translate-y-2-4", "translate-y-3-4", "translate-y-full"];
+export type Translate = (typeof TranslateConts)[number];
+declare const OverflowConst: readonly ["overflow-auto", "overflow-hidden", "overflow-clip", "overflow-visible", "overflow-scroll", "overflow-x-auto", "overflow-y-auto", "overflow-x-hidden", "overflow-y-hidden", "overflow-x-clip", "overflow-y-clip", "overflow-x-visible", "overflow-y-visible", "overflow-x-scroll", "overflow-y-scroll"];
+export type Overflow = (typeof OverflowConst)[number];
+export declare const CursorVariantConst: readonly ["pointer"];
+export type Cursor = (typeof CursorVariantConst)[number];
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    display?: Display;
+    direction?: Direction;
+    justify?: Justify;
+    align?: DisplayAlign;
+    gap?: Spacing;
+    rowGap?: Spacing;
+    margin?: Spacing;
+    marginTop?: Spacing;
+    marginBottom?: Spacing;
+    marginLeft?: Spacing;
+    marginRight?: Spacing;
+    marginInline?: Spacing;
+    marginBlock?: Spacing;
+    padding?: Padding;
+    paddingTop?: Padding;
+    paddingBottom?: Padding;
+    paddingLeft?: Padding;
+    paddingRight?: Padding;
+    paddingBlock?: Padding;
+    paddingInline?: Padding;
+    bg?: Color;
+    variant?: "article" | "aside" | "header" | "main" | "nav" | "section" | "div";
+    flex?: Fluid;
+    show?: DeviceMediaQueries | DeviceMediaQueriesObject;
+    hide?: DeviceMediaQueries | DeviceMediaQueriesObject;
+    minWidth?: Width;
+    shadow?: Shadow;
+    flexWrap?: FlexWrap;
+    width?: Width;
+    height?: Height;
+    wrap?: FlexWrap;
+    borderRadius?: BorderRadius;
+    borderTopLeftRadius?: BorderRadius;
+    borderTopRightRadius?: BorderRadius;
+    borderBottomRightRadius?: BorderRadius;
+    borderBottomLeftRadius?: BorderRadius;
+    borderWidth?: BorderWidth;
+    borderColor?: Color;
+    borderStyle?: BorderStyle;
+    position?: Position;
+    top?: "top-0";
+    left?: "left-0";
+    right?: "right-0";
+    bottom?: "bottom-0";
+    Translate?: Translate;
+    overflow?: Overflow;
+    cursor?: Cursor;
+    customBorder?: CSSProperties["border"];
+    customMaxHeight?: CSSProperties["maxHeight"];
+    customMinHeight?: CSSProperties["minHeight"];
+    customMaxWidth?: CSSProperties["maxWidth"];
+    customMinWidth?: CSSProperties["minWidth"];
+    customWidth?: CSSProperties["width"];
+    customHeight?: CSSProperties["height"];
+    customBackgroundColor?: CSSProperties["backgroundColor"];
+    customMargin?: CSSProperties["margin"];
+    customPadding?: CSSProperties["padding"];
+}
+export {};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@starasia/box",
+  "version": "1.0.0",
+  "description": "box component for starasia UI",
+  "author": "Prawito Hudoro",
+  "main": "dist/box.umd.js",
+  "module": "dist/box.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*.js",
+    "dist/*.d.ts",
+    "dist/*.map",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.16",
+    "@vitejs/plugin-react": "^4.2.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}