@apptify-labs/ui 1.0.0

package/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/styles.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.turbo/turbo-build.log

@@ -0,0 +1,19 @@
+$ tsup
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /Volumes/iExternal/Developer/Website/apptify/ui-framework/framework/packages/ui/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     6.01 KB
+CJS dist/index.js.map 7.25 KB
+CJS ⚡️ Build success in 9ms
+ESM dist/index.mjs     3.77 KB
+ESM dist/index.mjs.map 6.94 KB
+ESM ⚡️ Build success in 9ms
+DTS Build start
+DTS ⚡️ Build success in 665ms
+DTS dist/index.d.ts  2.18 KB
+DTS dist/index.d.mts 2.18 KB

package/README.md

@@ -0,0 +1,107 @@
+# @apptify/ui
+
+แพ็กเกจนี้คือ **Shared UI Framework** สำหรับใช้งานในแอปพลิเคชันและโปรเจกต์ต่างๆ 
+โดยถูกพัฒนาต่อยอดมาจาก `shadcn/ui` และ `Tailwind CSS` เพื่อใช้เป็น **Enterprise Design System** แบบรวมศูนย์ 
+
+> **สำคัญ:** แพ็กเกจนี้ถูกออกแบบให้ใช้งานในรูปแบบ **NPM Package** ที่มี Versioning ดังนั้นโค้ดของ Component ต่างๆ จะถูกล็อกอยู่ใน `node_modules` เพื่อรักษามาตรฐานและ Design ให้ตรงกันทุกโปรเจกต์ (Centralized Updates) จะแตกต่างจากการใช้งาน `shadcn/ui` แบบปกติที่คุณคัดลอกโค้ดมาปรับแต่งเองได้
+
+---
+
+## 📦 การติดตั้ง (Installation)
+
+สำหรับการนำไปใช้ในโปรเจกต์ภายนอก ให้ทำการติดตั้งแพ็กเกจผ่าน Package Manager ที่คุณใช้งาน:
+
+```bash
+npm install @apptify/ui
+# หรือ
+pnpm add @apptify/ui
+# หรือ
+yarn add @apptify/ui
+```
+
+---
+
+## 🚀 การตั้งค่าและเรียกใช้งาน (Setup & Usage)
+
+เนื่องจาก `@apptify/ui` ใช้ Tailwind CSS เป็นแกนหลัก คุณจำเป็นต้องตั้งค่าโปรเจกต์ของคุณเล็กน้อย เพื่อให้แอปพลิเคชันของคุณอ่านคลาสต่างๆ ได้อย่างถูกต้อง
+
+### 1. การตั้งค่า Tailwind CSS
+
+คุณต้องเพิ่ม Path ของไฟล์จากแพ็กเกจนี้เข้าไปใน `content` ของไฟล์ `tailwind.config.js` ในโปรเจกต์ของคุณ เพื่อไม่ให้คลาสของ Component ถูกลบออก (Purge) ตอน Build
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    
+    // สำคัญ: สแกนหา class จาก package @apptify/ui ที่ติดตั้งผ่าน npm
+    "./node_modules/@apptify/ui/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### 2. การนำเข้า Styles (CSS)
+
+ในไฟล์ CSS หลักของแอปคุณ (เช่น `globals.css` สำหรับ Next.js หรือ `index.css` สำหรับ React/Vite) ให้ทำการ import stylesheet ของ UI Framework เข้ามาด้วย:
+
+```css
+@import "@apptify/ui/styles.css";
+
+/* โค้ด CSS เดิมของโปรเจกต์... */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### 3. การเรียกใช้งาน Components
+
+คุณสามารถ import components ต่างๆ ที่มีให้ใช้งานในแพ็กเกจ และนำไปใช้ได้ทันที:
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, Input, Label } from "@apptify/ui";
+
+export default function MyPage() {
+  return (
+    <Card className="max-w-md mx-auto mt-10">
+      <CardHeader>
+        <CardTitle>เข้าสู่ระบบ</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1">
+          <Label htmlFor="email">อีเมล</Label>
+          <Input id="email" placeholder="email@example.com" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+---
+
+## 🛠️ การแก้ไขและ Customization
+
+- หากคุณต้องการปรับแต่งสไตล์ย่อยๆ ของ Component ในหน้าเว็บนั้นๆ สามารถส่ง Prop `className` เข้าไปเพื่อ Override คลาสผ่าน Tailwind ได้ (ระบบใช้ `tailwind-merge` จัดการคลาสที่ซ้ำซ้อนให้แล้ว)
+- หากต้องการเปลี่ยนแปลงโครงสร้างหลัก หรือแก้บัคของ Component คุณจะต้องทำการแก้ไขที่ Source Code ของโปรเจกต์ `@apptify/ui` ต้นทาง ทำการ Build และ **Publish Version ใหม่** เพื่อให้โปรเจกต์อื่นๆ กดอัปเดตเวอร์ชันนำไปใช้งานต่อ
+
+---
+
+## 💻 สำหรับนักพัฒนาแพ็กเกจนี้ (Development & Publishing)
+
+หากคุณเป็นผู้พัฒนา UI Framework ตัวนี้ และต้องการ Build โค้ดเพื่อ Publish:
+
+1. ติดตั้ง Dependencies ใน Workspace: `pnpm install`
+2. ทำการ Build ตัวแพ็กเกจ:
+   ```bash
+   pnpm run build --filter @apptify/ui
+   ```
+3. อัปเดตเลขเวอร์ชันใน `package.json` (เช่น `1.0.0` เป็น `1.0.1`)
+4. สั่ง Publish ขึ้นสู่ NPM Registry หรือ Private Registry ขององค์กร:
+   ```bash
+   npm publish
+   ```

package/STORYBOOK.md

@@ -0,0 +1,112 @@
+# Storybook & การจัดการ Components
+
+คู่มือนี้จะอธิบายขั้นตอนการรัน Storybook รวมถึงการนำ Component ใหม่จาก Shadcn UI มาใช้งานใน `@apptify/ui` ตั้งแต่ขั้นตอนการดาวน์โหลด การปรับแต่ง จนถึงการเขียนเอกสาร (Docs) ลงใน Storybook ครับ
+
+---
+
+## 🏃‍♂️ การรัน Storybook
+
+หากต้องการดู Document หรือทดสอบ UI Components สามารถรัน Storybook ได้ด้วยคำสั่ง:
+
+```bash
+cd packages/ui
+pnpm run storybook
+```
+จากนั้นเปิดเบราว์เซอร์ไปที่ `http://localhost:6006`
+
+---
+
+## 📦 การนำ Component ใหม่เข้ามาใน Project
+
+คุณสามารถนำ Component จาก Shadcn UI เข้ามาในโฟลเดอร์ `packages/ui/src/components` ได้ 2 วิธี:
+
+### วิธีที่ 1: ผ่าน CLI (แนะนำ)
+ถ้าคุณรันคำสั่งของ Shadcn ได้ในโปรเจ็กต์ ให้ใช้คำสั่ง:
+```bash
+npx shadcn-ui@latest add input
+```
+*(ระบบจะสร้างไฟล์และติดตั้ง Dependencies ของ Radix UI ให้ถ้าจำเป็น)*
+
+### วิธีที่ 2: Copy & Paste แบบ Manual
+1. ไปที่เว็บ [Shadcn UI](https://ui.shadcn.com/docs/components)
+2. เลือก Component (เช่น Input, Label) แล้วกดคัดลอกโค้ด
+3. สร้างโฟลเดอร์สำหรับ Component นั้น เช่น `src/components/input/`
+4. สร้างไฟล์ `input.tsx` และวางโค้ดลงไป
+
+> ⚠️ **ข้อควรระวังเรื่อง Import Path:**
+> Shadcn UI จะตั้งค่าเริ่มต้นให้ Import ฟังก์ชัน `cn` จาก `@/lib/utils`
+> แต่โครงสร้างของเราอยู่ที่ `../../utils/cn` ดังนั้นคุณต้องแก้ Import ให้ถูกต้องตามโครงสร้างของเรา:
+> ```diff
+> - import { cn } from "@/lib/utils"
+> + import { cn } from "../../utils/cn"
+> ```
+
+---
+
+## 📝 การสร้างไฟล์ Storybook สำหรับ Component
+
+เมื่อคุณมีไฟล์ `input.tsx` แล้ว ขั้นตอนต่อไปคือการสร้างไฟล์ Story เพื่อให้ Component นั้นไปแสดงใน Storybook
+
+1. สร้างไฟล์ชื่อ `input.stories.tsx` ในโฟลเดอร์เดียวกัน (เช่น `src/components/input/input.stories.tsx`)
+2. วางโครงสร้างมาตรฐานสำหรับ Storybook ดังนี้:
+
+```tsx
+// src/components/input/input.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from './input';
+
+// 1. ตั้งค่า Meta สำหรับ Component
+const meta = {
+  title: 'Components/Input', // ชื่อหมวดหมู่และชื่อ Component ใน Sidebar
+  component: Input, // Component หลักที่เราจะทำ Docs
+  parameters: {
+    layout: 'centered', // จัดกึ่งกลางหน้าจอ
+  },
+  tags: ['autodocs'], // สร้างหน้า Docs ให้โดยอัตโนมัติ
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 2. สร้าง Story รูปแบบต่างๆ (เช่น แบบ Default, Disabled, หรือมี Label)
+export const Default: Story = {
+  args: {
+    type: 'text',
+    placeholder: 'Email address',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled input',
+  },
+};
+```
+
+> **Tip:** `args` ใน Storybook คือการจำลองการส่ง `props` เข้าไปใน Component ของเรา คุณสามารถใส่ `className`, `disabled`, หรือ props อื่นๆ เพื่อจำลอง State แบบต่างๆ ได้เลย
+
+---
+
+## 🚀 การ Export Component เพื่อให้แอปพลิเคชันอื่นนำไปใช้ (สำคัญ)
+
+หลังจากทำ Component และ Storybook เสร็จแล้ว อย่าลืม Export Component นั้นที่ไฟล์ `packages/ui/src/index.ts` เพื่อให้ Package หรือแอปพลิเคชันอื่นๆ ใน Monorepo มองเห็นและนำไปใช้งานได้
+
+แก้ไขไฟล์ `src/index.ts`:
+```ts
+// Export แบบนี้สำหรับทุก Component ใหม่ที่คุณเพิ่มเข้ามา
+export * from "./components/card/card";
+export * from "./components/input/input";
+export * from "./components/label/label";
+export * from "./components/separator/separator";
+// ...
+```
+
+---
+
+## ✅ สรุป Workflow ในการทำงาน
+1. **ดึงโค้ด** (จาก Shadcn) -> ใส่ใน `src/components/[ชื่อ]/`
+2. **แก้ `cn`** -> เปลี่ยน `import { cn }` ให้ชี้ไปที่ `utils/cn` ของเรา
+3. **เขียน Story** -> สร้างไฟล์ `.stories.tsx` คู่กัน
+4. **Export** -> เอาไปใส่ใน `src/index.ts`
+5. **ดูผลลัพธ์** -> รัน `pnpm run storybook` เพื่อตรวจสอบความเรียบร้อย

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { ClassValue } from 'clsx';
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Merges Tailwind CSS classes with proper conflict resolution.
+ * Combines clsx for conditional classes and tailwind-merge for deduplication.
+ *
+ * @example
+ * cn("px-4 py-2", "px-8") // => "px-8 py-2"
+ * cn("text-red-500", isActive && "text-blue-500")
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, type InputProps, Label, Separator, cn };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { ClassValue } from 'clsx';
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Merges Tailwind CSS classes with proper conflict resolution.
+ * Combines clsx for conditional classes and tailwind-merge for deduplication.
+ *
+ * @example
+ * cn("px-4 py-2", "px-8") // => "px-8 py-2"
+ * cn("text-red-500", isActive && "text-blue-500")
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, type InputProps, Label, Separator, cn };

package/dist/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Input: () => Input,
+  Label: () => Label,
+  Separator: () => Separator,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/card/card.tsx
+var React = __toESM(require("react"));
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/card/card.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/components/input/input.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/label/label.tsx
+var React3 = __toESM(require("react"));
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/separator/separator.tsx
+var React4 = __toESM(require("react"));
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Separator = React4.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  cn
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/card/card.tsx","../src/utils/cn.ts","../src/components/input/input.tsx","../src/components/label/label.tsx","../src/components/separator/separator.tsx"],"sourcesContent":["export * from \"./components/card\";\nexport * from \"./components/input\";\nexport * from \"./components/label\";\nexport * from \"./components/separator\";\nexport * from \"./utils/cn\";\n","import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merges Tailwind CSS classes with proper conflict resolution.\n * Combines clsx for conditional classes and tailwind-merge for deduplication.\n *\n * @example\n * cn(\"px-4 py-2\", \"px-8\") // => \"px-8 py-2\"\n * cn(\"text-red-500\", isActive && \"text-blue-500\")\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n","import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","import * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport { cn } from \"../../utils/cn\";\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n"],"mappings":"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","names":["React","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime"]}