@edu-tosel/design 1.0.6 → 1.0.7

package/interface/Card.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+import { ImageSize, Size } from "./Property";
+/**
+ * CardProps is an interface.
+ * @interface CardProps
+ * @property {React.ReactNode} children
+ * @property {object} options
+ * @property {Size} options.height
+ * @property {Size} options.width
+ * @property {object} options.text
+ * @property {string} options.text.size
+ * @property {string} options.text.color
+ * @property {() => unknown | (() => Promise<unknown>)} options.onClick
+ */
+export interface CardProps {
+    children: React.ReactNode;
+    options?: {
+        boundary?: "shadow" | "border" | "none";
+        rounded?: string;
+        height?: Size;
+        width?: Size;
+        text?: {
+            size?: string;
+            color?: string;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+        overflow?: "hiden" | "auto";
+    };
+}
+export interface ChartCardProps {
+    data: Record<string, string | number>[];
+    xAxis: string;
+    yAxis: string;
+    lines?: {
+        dataKey: string;
+        stroke: string;
+    }[];
+    bars?: {
+        dataKey: string;
+        fill: string;
+    }[];
+    areas?: {
+        dataKey: string;
+        fill: string;
+    }[];
+}
+export interface TableCardProps {
+    data: Record<string, string | number>[];
+    fields: Record<string, string>;
+    sizes: Record<string, string>;
+    options?: {
+        color?: {
+            background: string;
+            text: string;
+        };
+    };
+}
+export interface TrumpCardProps {
+    titles: {
+        title: string;
+        subTitle?: string[];
+        color?: string;
+    };
+    options?: {
+        width?: Size;
+        image?: {
+            path: string;
+            size?: ImageSize;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+        subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
+    };
+}
+export interface InfoCardProps {
+    type: "information" | "profile" | "prpfileSmall";
+}

package/interface/Card.js

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

package/{src/interface/HTMLElement.ts → interface/HTMLElement.d.ts}

@@ -1,27 +1,23 @@
-import { Dispatch } from "react";
-import { Size } from "./Property";
-
-export type HTMLElementType = "text" | "input" | "select";
-
-export interface HTMLElement {
-  title: string;
-  onChange: Dispatch<string>;
-  width?: Size;
-}
-
-export interface HTMLElementSetting {
-  [key: string]: {
-    label: string;
-    type: HTMLElementType;
-    placeholder?: string;
-    options?: [string, string][];
-    onChnage?: Dispatch<string>;
-  };
-}
-
-export interface HTMLSelectElement extends HTMLElement {
-  selectOptions?: [string | number, string][];
-}
-export interface HTMLInputElement extends HTMLElement {
-  placeholder?: string;
-}
+import { Dispatch } from "react";
+import { Size } from "./Property";
+export type HTMLElementType = "text" | "input" | "select";
+export interface HTMLElement {
+    title: string;
+    onChange: Dispatch<string>;
+    width?: Size;
+}
+export interface HTMLElementSetting {
+    [key: string]: {
+        label: string;
+        type: HTMLElementType;
+        placeholder?: string;
+        options?: [string, string][];
+        onChnage?: Dispatch<string>;
+    };
+}
+export interface HTMLSelectElement extends HTMLElement {
+    selectOptions?: [string | number, string][];
+}
+export interface HTMLInputElement extends HTMLElement {
+    placeholder?: string;
+}

package/interface/HTMLElement.js

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

package/interface/Interaction.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ExceptionProps {
+    exceptions?: [boolean, React.ReactNode][];
+    children: React.ReactNode;
+}

package/interface/Interaction.js

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

package/{src/interface/Menu.ts → interface/Menu.d.ts}

@@ -1,5 +1,5 @@
-import { Log, HTMLElementSetting } from "../interface";
-export interface SideMenuProps<K extends string, T extends string | number> {
-  log: Log<K, T>;
-  setting: HTMLElementSetting;
-}
+import { Log, HTMLElementSetting } from "../interface";
+export interface SideMenuProps<K extends string, T extends string | number> {
+    log: Log<K, T>;
+    setting: HTMLElementSetting;
+}

package/interface/Menu.js

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

package/interface/Modal.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Button, Scripts, Size } from "./Property";
+export interface ModalProps {
+    children: React.ReactNode;
+    options?: {
+        width?: Size;
+        height?: Size;
+        padding?: boolean;
+        buttons?: Button[];
+    };
+}
+export interface AlertModalProps {
+    title: string;
+    scripts: Scripts;
+    options?: {
+        buttons?: Button[];
+    };
+}

package/interface/Modal.js

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

package/{src/interface/Property.ts → interface/Property.d.ts}

@@ -1,46 +1,40 @@
-/**
- * Size type
- * @enum {string}
- * @readonly
- * @description - Size type for the component
- * @property {"xs"} xs - Extra small size
- * @property {"sm"} sm - Small size
- * @property {"md"} md - Medium size
- * @property {"lg"} lg - Large size
- * @property {"xl"} xl - Extra large size
- * @property {"2xl"} 2xl - Double extra large size
- * @property {"full"} full - Full size
- */
-
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-
-/**
- * Image size type
- * @enum {string}
- * @readonly
- * @description - Size type for the image
- * @property {"sub"} sub - Sub size
- * @property {"full"} full - Full size
- */
-
-export type ImageSize = "sub" | "full";
-
-export type OnClick = () => unknown | Promise<unknown>;
-
-export type Button = [string, OnClick];
-
-export type Scripts = {
-  script: string;
-  subScript?: string;
-};
-
-export type Titles = {
-  title: string;
-  subTitle?: string[];
-  color?: string;
-};
-
-export interface Log<K extends string, T extends string | number> {
-  prints: K[];
-  logs: { [p in K]: T }[] | undefined;
-}
+/**
+ * Size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the component
+ * @property {"xs"} xs - Extra small size
+ * @property {"sm"} sm - Small size
+ * @property {"md"} md - Medium size
+ * @property {"lg"} lg - Large size
+ * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
+ */
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+/**
+ * Image size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the image
+ * @property {"sub"} sub - Sub size
+ * @property {"full"} full - Full size
+ */
+export type ImageSize = "sub" | "full";
+export type OnClick = () => unknown | Promise<unknown>;
+export type Button = [string, OnClick];
+export type Scripts = {
+    script: string;
+    subScript?: string;
+};
+export type Titles = {
+    title: string;
+    subTitle?: string[];
+    color?: string;
+};
+export interface Log<K extends string, T extends string | number> {
+    prints: K[];
+    logs: {
+        [p in K]: T;
+    }[] | undefined;
+}

package/interface/Property.js

@@ -0,0 +1,14 @@
+/**
+ * Size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the component
+ * @property {"xs"} xs - Extra small size
+ * @property {"sm"} sm - Small size
+ * @property {"md"} md - Medium size
+ * @property {"lg"} lg - Large size
+ * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
+ */
+export {};

package/interface/Widget.d.ts

@@ -0,0 +1,4 @@
+export interface WidgetEvent {
+    event: string;
+    type: "view" | "modal";
+}

package/interface/Widget.js

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

package/{src/interface/index.ts → interface/index.d.ts}

@@ -1,3 +1,3 @@
-export * from "./HTMLElement";
-export * from "./Property";
-export * from "./Widget";
+export * from "./HTMLElement";
+export * from "./Property";
+export * from "./Widget";

package/interface/index.js

@@ -0,0 +1,3 @@
+export * from "./HTMLElement";
+export * from "./Property";
+export * from "./Widget";

package/layout/dashboard/Header.d.ts

@@ -0,0 +1,5 @@
+import "../../globals.css";
+export declare function Header({ title, image, }: {
+    title: string;
+    image?: [string, string];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/dashboard/Header.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../globals.css";
+import { useState } from "react";
+import { cn } from "../../util";
+export function Header({ title, image, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [src, href] = image ?? [];
+    return (_jsx("div", { className: "fixed top-0 left-0 xl:relative flex h-20 w-full items-center justify-between bg-white px-9 shadow-black/10 shadow-b-md z-40", children: _jsxs("div", { className: "flex h-12 items-center gap-12", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-12 w-50" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold ", children: title })] }) }));
+}
+function Menu({ flag }) {
+    const positions = "absolute right-0 z-40 ";
+    const layouts = "w-48 overflow-hidden";
+    const styles = "shadow-md bg-white";
+    const animations = () => {
+        const height = flag ? "h-80" : "h-0";
+        return [height, "duration-500"].join(" ");
+    };
+    return (_jsxs("div", { className: cn(positions, layouts, styles, animations()), children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] }));
+}

package/layout/dashboard/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function DashboardLayout({ subject, colors, navigations, children, }: {
+    subject: [string, string, string];
+    colors?: [string, string];
+    navigations: React.ReactNode[];
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/dashboard/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { NavigationContainer } from "../../navigation";
+import { Header } from "./Header";
+import { cn } from "../../util";
+export function DashboardLayout({ subject, colors, navigations, children, }) {
+    const [title, image, imageUrl] = subject ?? ["", "", ""];
+    const [bgColor, textColor] = colors ?? ["white", "black"];
+    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen h-screen xl:h-auto font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "h-full flex gap-12 pt-20 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-10 xl:m-0 ", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+}

package/{src/layout/index.tsx → layout/index.d.ts}

@@ -1 +1 @@
-export * from "./dashboard";
+export * from "./dashboard";

package/layout/index.js

@@ -0,0 +1 @@
+export * from "./dashboard";

package/menu/SideMenu.d.ts

@@ -0,0 +1,2 @@
+import { SideMenuProps } from "../interface/Menu";
+export default function SideMenu<K extends string, T extends string | number>({ log, setting, }: SideMenuProps<K, T>): import("react/jsx-runtime").JSX.Element;

package/menu/SideMenu.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetStore } from "../store";
+import { cn } from "../util";
+export default function SideMenu({ log, setting, }) {
+    const { tempData, setTempData, clearTempData, events, removeView } = useWidgetStore();
+    const isOpen = events.some(({ event }) => event === "sideMenu");
+    const positions = "absolute top-20 right-0";
+    const paddings = "pt-8";
+    const sizes = `${isOpen ? "w-160" : "w-0"} h-full`;
+    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500`;
+    const { prints, logs } = log ?? {};
+    return (_jsx("div", { className: cn(positions, sizes, styles, paddings), children: _jsxs("div", { className: `relative w-full h-full flex flex-col items-center gap-12 ${isOpen ? "block" : "hidden"}`, children: [_jsx("div", { className: "w-9/10 border-2 border-black p-2 h-80", children: _jsx("div", { className: "grid grid-cols-2", children: Object.entries(setting).map(([key, value]) => (_jsxs("div", { className: "text-base font-bold flex gap-2", children: [_jsxs("div", { className: "w-16", children: [value["label"], ":"] }), _jsx(HTMLElement, { type: value["type"], value: tempData[key], options: value["options"], onChange: (value) => setTempData({
+                                        ...tempData,
+                                        [key]: value,
+                                    }) })] }, key))) }) }), _jsx("div", { className: "border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll", children: logs?.map((log, i) => (_jsx("div", { className: "text-base flex gap-2", children: prints?.map((print) => (_jsx("div", { className: "", children: log[print] }, print))) }, i))) }), _jsx("button", { onClick: () => {
+                        clearTempData();
+                        return removeView("sideMenu");
+                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
+}
+function HTMLElement({ type, value, options, onChange, }) {
+    if (type === "text")
+        return _jsx("div", { children: value });
+    if (type === "input")
+        return (_jsx("input", { className: "w-32", value: value, onChange: (e) => onChange?.(e.target.value) }));
+    if (type === "select")
+        return (_jsx("select", { value: value, onChange: (e) => onChange?.(e.target.value), children: options?.map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) }));
+}

package/{src/menu/index.tsx → menu/index.d.ts}

@@ -1 +1 @@
-export { default as SideMenu } from "./SideMenu";
+export { default as SideMenu } from "./SideMenu";

package/menu/index.js

@@ -0,0 +1 @@
+export { default as SideMenu } from "./SideMenu";

package/modal/AlertModal.d.ts

@@ -0,0 +1,2 @@
+import { AlertModalProps } from "../interface/Modal";
+export default function AlertModal({ title, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/AlertModal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { col } from "../util";
+import { Modal } from "./Modal";
+export default function AlertModal({ title, scripts, options, }) {
+    const { script, subScript } = scripts ?? {};
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { buttons }, children: _jsx("div", { className: col(3) + "pl-25 pt-18 h-full pb-12", children: _jsxs("div", { className: col(6), children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: script })] }) }) }));
+}

package/modal/ControllerModal.d.ts

@@ -0,0 +1,6 @@
+import { Button } from "../interface";
+export default function ControllerModal({ options, }: {
+    options?: {
+        buttons?: Button[];
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/modal/ControllerModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./Modal";
+export default function ControllerModal({ options, }) {
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "w-full h-120 border-2 " }) }));
+}

package/modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from "../interface/Modal";
+export declare function Modal({ children, options }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/Modal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetStore } from "../store";
+import { absolute, cn } from "../util";
+const background = "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm fixed top-0 left-0";
+const widthSize = {
+    xs: "w-2/3 min-w-76 max-w-176",
+    sm: "w-2/3 min-w-76 max-w-176",
+    md: "w-2/3 min-w-76 max-w-176",
+    lg: "w-full min-w-76 max-w-360",
+    xl: "w-2/3 min-w-76 max-w-176",
+    "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "w-full",
+};
+const heightSize = {
+    xs: "",
+    sm: "h-100",
+    md: "h-72 sm:h-48",
+    lg: "h-120",
+    xl: "h-180",
+    "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "h-full",
+};
+export function Modal({ children, options }) {
+    const { buttons, width, height } = options ?? {};
+    const { clearModal } = useWidgetStore();
+    const sizes = `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`;
+    const paddings = "pt-18 px-25";
+    const styles = "rounded-xl bg-white relative overflow-hidden";
+    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles, paddings), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(8, 10)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-2xl font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
+                        "bg-black rounded-full h-9 w-9 flex justify-center items-center", onClick: clearModal, children: _jsx("div", { className: "x-shape" }) })] }) }));
+}

package/modal/TestModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Button } from "../interface";
+export default function TestModal({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        buttons?: Button[];
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/modal/TestModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./Modal";
+export default function TestModal({ children, options, }) {
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "pt-18 pl-25", children: children }) }));
+}

package/{src/modal/index.tsx → modal/index.d.ts}

@@ -1,3 +1,3 @@
-export { default as TestModal } from "./TestModal";
-export { default as AlertModal } from "./AlertModal";
-export { default as ControllerModal } from "./ControllerModal";
+export { default as TestModal } from "./TestModal";
+export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

package/modal/index.js

@@ -0,0 +1,3 @@
+export { default as TestModal } from "./TestModal";
+export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

package/navigation/Navigation.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
+export declare function NavigationContainer({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/navigation/Navigation.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { center, cn } from "../util";
+export const buttonClassNames = (href, nowPath, color) => {
+    const [bg, text] = color ?? ["white", "black"];
+    const classNames = [
+        center.row(6),
+        `text-${text}`,
+        "font-bold w-full xl:w-50 h-11 xl:rounded-2xl flex justify-center xl:justify-start xl:pl-5",
+    ].join(" ");
+    const checkPathMatch = (href, nowPath) => {
+        return href.split("/").pop() === nowPath.split("/").pop();
+    };
+    const toggle = checkPathMatch(href, nowPath)
+        ? `bg-${bg}`
+        : "bg-gray-500 xl:bg-transparent";
+    return [classNames, toggle].join(" ");
+};
+export function NavigationContainer({ children, }) {
+    const displays = "flex flex-row xl:flex-col z-40";
+    const positions = "fixed bottom-0 left-0 xl:static";
+    const sizes = "w-full xl:w-auto";
+    const styles = "";
+    return (_jsx("div", { className: cn(displays, positions, sizes, styles), children: children }));
+}

package/{src/navigation/index.tsx → navigation/index.d.ts}

@@ -1 +1 @@
-export * from "./Navigation";
+export * from "./Navigation";

package/navigation/index.js

@@ -0,0 +1 @@
+export * from "./Navigation";

package/package.json

@@ -1,49 +1,28 @@
-{
-  "name": "@edu-tosel/design",
-  "version": "1.0.6",
-  "description": "UI components for International TOSEL Committee",
-  "keywords": [
-    "jsx",
-    "tsx",
-    "tailwindcss",
-    "ui",
-    "design system"
-  ],
-  "author": "International TOSEL Committee",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "build-publish": "rimraf ./dist && tsc -p tsconfig.build.json --noEmit false",
-    "publish": "npm run build-publish && node setupPackage.js && cd dist && npm publish"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-lottie-player": "^1.5.6",
-    "react-router-dom": "^6.21.3",
-    "recharts": "^2.11.0",
-    "tailwind-scrollbar-hide": "^1.1.7",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.2.2",
-    "zustand": "^4.5.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.33",
-    "rimraf": "^5.0.5",
-    "tailwindcss": "^3.4.1",
-    "vite": "^5.0.8"
-  }
-}
+{
+  "name": "@edu-tosel/design",
+  "version": "1.0.7",
+  "description": "UI components for International TOSEL Committee",
+  "keywords": [
+    "jsx",
+    "tsx",
+    "tailwindcss",
+    "ui",
+    "design system"
+  ],
+  "author": "International TOSEL Committee",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-lottie-player": "^1.5.6",
+    "react-router-dom": "^6.21.3",
+    "recharts": "^2.11.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {}
+}

package/shelf/Shelf.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function Shelf({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/shelf/Shelf.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Shelf({ children }) {
+    return _jsx("div", { className: "inline-flex flex-col gap-8 xl:w-auto", children: children });
+}