torch-glare 1.0.8 → 1.1.0

package/dist/bin/index.js

@@ -11,7 +11,7 @@ const program = new Command();
 program
     .name("torch-glare")
     .description("Torch Glare for managing React components")
-    .version("1.0.7");
+    .version("1.0.8");
 program
     .command("init")
     .description("Initialize torch.json configuration file")

package/dist/src/shared/detectPackageManager.d.ts

@@ -1,6 +1,6 @@
 /**
  * Detect the package manager used in the project.
- * @returns {string} - The detected package manager (pnpm, yarn, or npm).
+ * @returns {string} - The detected package manager (pnpm, yarn, npm, bun, etc).
  */
 export declare function detectPackageManager(): string;
 //# sourceMappingURL=detectPackageManager.d.ts.map

package/dist/src/shared/detectPackageManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detectPackageManager.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/detectPackageManager.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAK7C"}
+{"version":3,"file":"detectPackageManager.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/detectPackageManager.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAO7C"}

package/dist/src/shared/detectPackageManager.js

@@ -2,7 +2,7 @@ import * as fs from "fs";
 import path from "path";
 /**
  * Detect the package manager used in the project.
- * @returns {string} - The detected package manager (pnpm, yarn, or npm).
+ * @returns {string} - The detected package manager (pnpm, yarn, npm, bun, etc).
  */
 export function detectPackageManager() {
     if (fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml")))
@@ -11,6 +11,10 @@ export function detectPackageManager() {
         return "yarn";
     if (fs.existsSync(path.join(process.cwd(), "package-lock.json")))
         return "npm";
+    if (fs.existsSync(path.join(process.cwd(), "bun.lockb")))
+        return "bun";
+    if (fs.existsSync(path.join(process.cwd(), ".yarnrc.yml")))
+        return "yarn";
     return "npm"; // Default to npm if no lock file is found
 }
 //# sourceMappingURL=detectPackageManager.js.map

package/dist/src/shared/detectPackageManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"detectPackageManager.js","sourceRoot":"","sources":["../../../cli/src/shared/detectPackageManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IAC7E,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IACxE,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,mBAAmB,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IAC/E,OAAO,KAAK,CAAC,CAAC,0CAA0C;AAC5D,CAAC"}
+{"version":3,"file":"detectPackageManager.js","sourceRoot":"","sources":["../../../cli/src/shared/detectPackageManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IAC7E,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IACxE,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,mBAAmB,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IAC/E,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IACvE,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,aAAa,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IAC1E,OAAO,KAAK,CAAC,CAAC,0CAA0C;AAC5D,CAAC"}

package/dist/src/shared/tailwindInit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindInit.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"AAqJA,wBAAgB,YAAY,IAAI,IAAI,CAqBnC"}
+{"version":3,"file":"tailwindInit.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,IAAI,IAAI,CASnC"}

package/dist/src/shared/tailwindInit.js

@@ -1,21 +1,14 @@
-import path from "path";
-import fs from "fs";
 import { execSync } from "child_process";
 import { detectPackageManager } from "./detectPackageManager.js";
-import { getCurrentInstalledDependencies } from "./getCurrentInstalledDependencies.js";
-const tailwindConfigPath = path.join(process.cwd(), "tailwind.config.ts");
-function generatePlugins() {
-    return `
-    require('tailwindcss-animate'),
-    require('tailwind-scrollbar-hide'),
-    require('glare-typography'),
-    require('glare-themes'),
-    require('glare-torch-mode'),
-      function ({ addVariant }: any) {
-        addVariant("rtl", '&[dir="rtl"]');
-        addVariant("ltr", '&[dir="ltr"]');
-      },
-  `;
+export function tailwindInit() {
+    const dependencies = [
+        "tailwindcss-animate",
+        "tailwind-scrollbar-hide",
+        "glare-typography",
+        "mapping-color-system",
+        "glare-torch-mode",
+    ];
+    installDependencies(dependencies);
 }
 /**
  * Installs dependencies using the detected package manager.
@@ -31,21 +24,23 @@ function installDependencies(dependencies = []) {
     console.log(`📦 Detected package manager: ${packageManager}`);
     // Generate the install command based on the package manager
     let installCommand;
-    const latestDeps = dependencies.map(dep => `${dep}@latest`).join(" ");
+    const latestDeps = dependencies.map(dep => `${dep}`).join(" ");
     switch (packageManager) {
         case "pnpm":
-            installCommand = `pnpm add ${latestDeps}`;
+            installCommand = `pnpm add ${latestDeps} --prefer-offline`;
             break;
         case "yarn":
-            installCommand = `yarn add ${latestDeps}`;
+            installCommand = `yarn add ${latestDeps} --ignore-engines --ignore-platform --prefer-offline`;
             break;
-        case "npm":
-        default:
-            installCommand = `npm install ${latestDeps}`;
+        case "bun":
+            installCommand = `bun add ${latestDeps} --no-save && bun install`;
             break;
+        default:
+            installCommand = `npm install ${latestDeps} --legacy-peer-deps`;
     }
     try {
         // Execute the install command
+        console.log(`Running: ${installCommand}`);
         execSync(installCommand, { stdio: "inherit" });
         console.log("✅ Dependencies installed successfully.");
     }
@@ -59,86 +54,11 @@ function installDependencies(dependencies = []) {
         else if (error.message.includes("not found")) {
             console.error("💡 The package manager might not be installed. Please ensure it is installed and available in your PATH.");
         }
-        else {
-            console.error("💡 Check your internet connection and try again.");
-        }
-    }
-}
-function createTailwindConfig() {
-    const tailwindConfig = `
-    import type { Config } from "tailwindcss";
-    export default {
-      content: [
-        "./app/**/*.{js,ts,jsx,tsx}",
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-        "./features/**/*.{js,ts,jsx,tsx,mdx}",
-        "./components/**/*.{js,ts,jsx,tsx,mdx}",
-        "./layout/**/*.{js,ts,jsx,tsx,mdx}",
-      ],
-      theme: {
-        extend: {},
-      },
-      screens: {
-        sm: "600px",
-        md: "768px",
-        lg: "1024px",
-        xl: "1280px",
-        "2xl": "1536px",
-      },
-      plugins: [${generatePlugins()}],
-    }satisfies Config;
-  `;
-    fs.writeFileSync(tailwindConfigPath, tailwindConfig);
-    console.log("✅ Created tailwind.config.ts");
-}
-function modifyTailwindConfig() {
-    let tailwindConfigContent = fs.readFileSync(tailwindConfigPath, "utf-8");
-    if (!tailwindConfigContent.includes("glare-typography") && !tailwindConfigContent.includes("glare-themes")) {
-        if (!tailwindConfigContent.includes("plugins")) {
-            tailwindConfigContent = tailwindConfigContent.replace("],", `],plugins: [${generatePlugins()}],`);
+        else if (error.message.includes("ERESOLVE") || error.message.includes("peer dependency conflict")) {
+            console.error("💡 There are dependency conflicts. Try manually installing with 'npm install --force' or 'npm install --legacy-peer-deps'.");
         }
         else {
-            tailwindConfigContent = tailwindConfigContent.replace("plugins: [", `plugins: [${generatePlugins()}`);
-        }
-        console.log("✅ Modified tailwind.config.ts");
-    }
-    fs.writeFileSync(tailwindConfigPath, tailwindConfigContent);
-}
-/**
- * Checks if the installed Tailwind CSS version is less than v4.
- * @param {string} version - The version string of Tailwind CSS.
- * @returns {boolean} - True if the version is less than v4, otherwise false.
- */
-function isTailwindVersionLessThanV4(version) {
-    if (!version) {
-        console.warn("⚠️ Tailwind CSS is not installed.");
-        return false; // Assume it needs to be installed
-    }
-    // Extract the major version number
-    const majorVersion = parseInt(version?.replace(/^[^0-9]*/, "").split(".")[0] || "3", 10);
-    return majorVersion < 4;
-}
-export function tailwindInit() {
-    const dependencies = [
-        "tailwindcss-animate",
-        "tailwind-scrollbar-hide",
-        "glare-typography",
-        "glare-themes",
-        "glare-torch-mode",
-    ];
-    installDependencies(dependencies);
-    const { depsNamesAndVersions } = getCurrentInstalledDependencies();
-    if (depsNamesAndVersions["tailwindcss"]) {
-        const tailwindVersion = depsNamesAndVersions["tailwindcss"];
-        if (isTailwindVersionLessThanV4(tailwindVersion)) {
-            if (!fs.existsSync(tailwindConfigPath)) {
-                createTailwindConfig();
-            }
-            else {
-                modifyTailwindConfig();
-            }
+            console.error("💡 Check your internet connection and try again.");
         }
     }
 }

package/dist/src/shared/tailwindInit.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindInit.js","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwindInit.js","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,UAAU,YAAY;IAC1B,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,yBAAyB;QACzB,kBAAkB;QAClB,sBAAsB;QACtB,kBAAkB;KACnB,CAAC;IACF,mBAAmB,CAAC,YAAY,CAAC,CAAC;AACpC,CAAC;AAGD;;;GAGG;AACH,SAAS,mBAAmB,CAAC,eAAyB,EAAE;IACtD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;QACzB,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;QACxD,OAAO;IACT,CAAC;IAED,6BAA6B;IAC7B,MAAM,cAAc,GAAG,oBAAoB,EAAE,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,gCAAgC,cAAc,EAAE,CAAC,CAAC;IAE9D,4DAA4D;IAC5D,IAAI,cAAc,CAAC;IACnB,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/D,QAAQ,cAAc,EAAE,CAAC;QACvB,KAAK,MAAM;YACT,cAAc,GAAG,YAAY,UAAU,mBAAmB,CAAC;YAC3D,MAAM;QACR,KAAK,MAAM;YACT,cAAc,GAAG,YAAY,UAAU,sDAAsD,CAAC;YAC9F,MAAM;QACR,KAAK,KAAK;YACR,cAAc,GAAG,WAAW,UAAU,2BAA2B,CAAC;YAClE,MAAM;QACR;YACE,cAAc,GAAG,eAAe,UAAU,qBAAqB,CAAC;IACpE,CAAC;IAED,IAAI,CAAC;QAEH,8BAA8B;QAC9B,OAAO,CAAC,GAAG,CAAC,YAAY,cAAc,EAAE,CAAC,CAAC;QAC1C,QAAQ,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC/C,OAAO,CAAC,GAAG,CAAC,wCAAwC,CAAC,CAAC;IACxD,CAAC;IAAC,OAAO,KAAU,EAAE,CAAC;QACpB,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC,CAAC;QAClD,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAE7B,0CAA0C;QAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,KAAK,CACX,oIAAoI,CACrI,CAAC;QACJ,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;YAC/C,OAAO,CAAC,KAAK,CACX,0GAA0G,CAC3G,CAAC;QACJ,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EAAE,CAAC;YACpG,OAAO,CAAC,KAAK,CACX,4HAA4H,CAC7H,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;AACH,CAAC"}

package/docs/README.md

@@ -0,0 +1,207 @@
+# TORCH Glare Components Library
+
+Welcome to the **TORCH Glare Components Library**! This library provides a collection of reusable React components to help you build user interfaces efficiently. Additionally, a CLI tool (**torch-glare CLI**) is available to streamline component management.
+
+## Table of Contents
+
+1. [Installation](#installation)
+2. [Usage](#usage)
+3. [CLI Commands](#cli-commands)
+4. [Theming](#theming)
+5. [Contributing](#contributing)
+6. [License](#license)
+
+## Installation
+
+
+## 1. Initialize Your Project
+
+To install the TORCH Glare Components Library, run the following command:
+
+```sh
+npx torch-glare@latest init
+```
+
+This command will:
+- Create or modify the `tailwind.config.js` file to support Tailwind CSS for Tailwind versions less then 4.
+- Generate a `torch.json` file where you can customize the installation path for components.
+
+### Tailwind CSS Requirement
+Ensure that Tailwind CSS is installed in your project before running the initialization command.
+
+## 2. Add Essential Plugins for Tailwind CSS
+
+If you're using Tailwind CSS version 4 or above, add the following plugins to your global CSS file:
+
+```css
+@import "tailwindcss";
+/* Essential plugins */
+@plugin 'glare-typography';
+@plugin 'mapping-color-system';
+@plugin 'glare-torch-mode';
+@plugin 'tailwind-scrollbar-hide';
+@plugin 'tailwindcss-animate';
+```
+
+
+### 2. Add Remix Icon Library
+Include the following in `index.html` or nextjs `layout.tsx` or meta data for icon support:
+
+```html
+<html>
+<head>
+  <link
+    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
+    rel="stylesheet"
+  />
+</head>
+<body></body>
+</html>
+
+```
+
+## 3. Configure Installation Path
+
+Adjust the `glare.json` file to specify where you want to install components:
+
+```json
+{
+  "path": "./src" // The directory where components will be installed
+}
+```
+
+### 4. Add Components
+To add a specific component, run:
+
+```sh
+npx torch-glare@latest add [component-name]
+```
+
+Or, to add components interactively:
+
+```sh
+npx torch-glare@latest add
+```
+
+## Usage
+
+Once installed, import and use the components as needed:
+
+```tsx
+import React from "react";
+import { Button } from "./components";
+
+const App = () => {
+  return (
+    <div>
+      <Button >Hello.</Button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+## CLI Commands
+
+### Initialize Configuration
+```sh
+npx torch-glare@latest init
+```
+- Creates a `torch.json` configuration file.
+- Create or modify `tailwind.config.ts` file for tailwind support.
+
+### Add Components
+```sh
+npx torch-glare@latest add [component]
+```
+Adds a specific component or runs an interactive prompt if no name is provided.
+
+### Add Hooks
+```sh
+npx torch-glare@latest hook [hook]
+```
+Adds a specific hook or runs an interactive prompt if no name is provided.
+
+### Add Utilities
+```sh
+npx torch-glare@latest util [util]
+```
+Adds a specific utility or runs an interactive prompt if no name is provided.
+
+### Providers
+```sh
+npx torch-glare@latest provider [provider]
+```
+Adds a specific provider or runs an interactive prompt if no name is provided.
+
+### Update Installed Resources
+
+```sh
+npx torch-glare@latest update
+```
+Updates all installed components, hooks, utilities, and providers.
+
+
+## Theming
+
+The TORCH Glare Components Library supports both light and dark themes. You can set a fixed theme for your components using the `theme` attribute.
+
+### Setting a Fixed Theme
+
+To apply a fixed theme (dark or light) to a component, add the `theme `attribute with the desired theme value:
+
+```tsx
+import React from "react";
+import { Button } from "./components";
+
+const App = () => {
+  return (
+    <div>
+      <Button theme="dark">Dark Theme Button</Button>
+      <Button theme="light">Light Theme Button</Button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Global Theme
+
+To apply a theme globally, wrap your application with the `ThemeProvider` and set the optional `defaultTheme` props:
+
+
+```tsx
+import { ThemeProvider } from "./components";
+
+const App = () => {
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
+    <App />
+  </ThemeProvider>
+);
+};
+
+export default App;
+```
+
+## Contributing
+
+We welcome contributions! Follow these steps:
+
+1. Fork the repository.
+2. Create a new branch.
+3. Implement your changes.
+4. Commit with a clear message.
+5. Push your changes and open a pull request.
+
+### Contribution Guidelines
+- Follow existing code style.
+- Update documentation if necessary.
+
+## License
+
+This project is licensed under the **MIT License**.
+
+

package/lib/components/AlertDialog.tsx

@@ -4,8 +4,8 @@ import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "../utils/cn"
-import { buttonVariants } from "./Button"
-import { ButtonVariant } from "@/utils/types"
+import { Button, buttonVariants } from "./Button"
+import { ButtonVariant } from "../utils/types"
 import { cva } from "class-variance-authority"
 
 const StatusTextStyle = cva("", {
@@ -55,10 +55,18 @@ const AlertDialogContent = React.forwardRef<
         <AlertDialogOverlay />
         <AlertDialogPrimitive.Content
             ref={ref}
-            className={cn(StatusTextStyle({ variant }),
-                "text-content-presentation-global-primary max-w-[800px] !m-1 sm:m-0",
-                "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-2 border bg-background-presentation-body-overlay-primary p-2 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-                "rounded-[16px] border-2 border-border-presentation-global-primary",
+            className={cn(
+                StatusTextStyle({ variant }),
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[800px] translate-x-[-50%] translate-y-[-50%]",
+                "gap-2 rounded-[16px] border-2 border-border-presentation-global-primary",
+                "bg-background-presentation-body-overlay-primary p-[12px]",
+                "text-content-presentation-global-primary",
+                "shadow-lg duration-200",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out",
+                "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+                "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
                 className
             )}
             {...props}
@@ -120,11 +128,11 @@ const AlertDialogLabel = React.forwardRef<
     return (
         <AlertDialogPrimitive.Title
             ref={ref}
-            className={cn("text-lg font-semibold", className)}
+            className={cn("typography-display-medium-semibold", className)}
             {...props}
         >
-            <p className="first-letter:uppercase" >
-                <strong >{firstWord}</strong>
+            <p className="first-letter:uppercase typography-display-medium-semibold" >
+                <strong className="typography-display-medium-semibold" >{firstWord}</strong>
                 {restOfTitle.length > 0 && ' ' + restOfTitle}
             </p>
         </AlertDialogPrimitive.Title>
@@ -139,14 +147,15 @@ const AlertDialogDescription = React.forwardRef<
     <AlertDialogPrimitive.Description
         data-description=""
         ref={ref}
-        className={cn("bg-background-presentation-form-base border border-border-presentation-global-primary p-2 rounded-[8px]"
-            , "p-[12px_8px_12px_8px] sm:p-[24px_48px_48px_48px] typography-body-large-medium",
-            className)}
-
+        className={cn(
+            "typography-body-large-medium",
+            "bg-background-presentation-form-base",
+            "border border-border-presentation-global-primary",
+            "rounded-[8px] p-[24px_48px_48px_48px]",
+            className
+        )}
         {...props}
-    >
-        {props.children}
-    </AlertDialogPrimitive.Description>
+    />
 ))
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName
@@ -166,8 +175,10 @@ const AlertDialogAction = React.forwardRef<
     <AlertDialogPrimitive.Action
         ref={ref}
         className={cn(buttonVariants({ variant: variant, size: size, buttonType: buttonType }), className)}
-        {...props}
-    />
+        asChild
+    >
+        <Button size={size} variant={variant} buttonType={buttonType} {...props} />
+    </AlertDialogPrimitive.Action>
 ))
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 

package/lib/components/BadgeField.tsx

@@ -11,9 +11,9 @@ import { Tooltip, ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Themes } from "../utils/types";
 import { Icon, Input, Group, Trilling } from "./Input";
-import { useClickOutside } from "@/hooks/useClickOutside";
+import { useClickOutside } from "../hooks/useClickOutside";
 import { Badge } from "./Badge";
-import { Tag, useTagSelection } from "@/hooks/useTagSelection";
+import { Tag, useTagSelection } from "../hooks/useTagSelection";
 
 
 interface Props
@@ -30,6 +30,7 @@ interface Props
   actionButton?: ReactNode
   tags: Tag[]
   onValueChange?: (tags: Tag[]) => void
+  singleSelect?: boolean
 }
 
 
@@ -50,9 +51,9 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       tags,
       onValueChange,
       children,
+      singleSelect = false,
       ...props
     },
-    forwardedRef
   ) => {
     const [dropDownListWidth, setDropDownListWidth] = useState(0);
     const popoverContentRef = useRef<HTMLDivElement>(null);
@@ -79,7 +80,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       focusedPopoverIndex,
       isPopoverOpen,
       setIsPopoverOpen,
-    } = useTagSelection({ Tags: tags, onTagsChange: onValueChange, inputRef });
+    } = useTagSelection({ Tags: tags, onTagsChange: onValueChange, inputRef, singleSelect });
 
     return (
       <Popover open={isPopoverOpen}>
@@ -93,7 +94,6 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
             <Group
               error={errorMessage !== undefined}
               onTable={onTable}
-              data-theme={theme}
               variant={variant}
               tabIndex={isPopoverOpen ? 0 : -1}
               onKeyDown={handleKeyDown}
@@ -102,9 +102,9 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
               onFocus={(e: any) => {
                 setDropDownListWidth(e.currentTarget.offsetWidth);
               }}
-              className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end h-fit items-center",
+              className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-start  items-center",
                 {
-                  "flex-wrap justify-start": isPopoverOpen,
+                  "flex-wrap justify-start h-fit": isPopoverOpen && !singleSelect,
                 },
                 className
               )}
@@ -163,7 +163,6 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
         </Tooltip>
 
         <PopoverContent
-          data-theme={theme}
           ref={popoverContentRef}
           style={{ width: dropDownListWidth }}
           variant={variant}

package/lib/components/Checkbox.tsx

@@ -12,7 +12,7 @@ const glareCheckBoxStyles = cva(
     "border border-border-presentation-action-checkbox-primary",
     "bg-background-presentation-action-borderstyle",
     "focus:bg-blue-sparkle-alpha-15 focus:border-border-presentation-state-focus",
-    'disabled:bg-background-presentation-state-information-primary disabled:border-transparent disabled:cursor-not-allowed',
+    'disabled:bg-background-presentation-action-disabled disabled:border-border-presentation-action-disabled disabled:cursor-not-allowed',
     "data-[state=checked]:bg-blue-sparkle-600 data-[state=checked]:border-blue-sparkle-600",
     "hover:border-border-presentation-action-hover",
   ],

package/lib/components/Dialog.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 flex flex-col items-start w-full translate-x-[-50%] translate-y-[-50%]  shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+                "fixed left-[50%] top-[50%] z-50 flex flex-col items-start w-fit translate-x-[-50%] translate-y-[-50%]  shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
                 "flex justify-center items-center",
                 className
             )}

package/lib/components/ImageAttachment.tsx

@@ -7,7 +7,7 @@ import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogCancel
 
 const dropZoneStyles = cva(
   [
-    "w-full min-w-[200px] h-[65px] flex flex-col rounded-lg border-dashed !border-2 transition-all duration-300 ease-in-out ",
+    "w-full  h-[65px] flex flex-col rounded-lg border-dashed !border-2 transition-all duration-300 ease-in-out ",
     "!border-border-presentation-action-borderstyle bg-background-presentation-badge-gray",
     "hover:border-border-presentation-action-borderstyle  hover:bg-background-presentation-badge-gray",
   ],
@@ -60,7 +60,7 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
           <h1 className="text-content-presentation-action-light-primary typography-body-large-medium">
             {mainLabel}
           </h1>
-          <p className="text-content-presentation-action-light-secondary typography-body-small-medium">
+          <p className="text-content-presentation-action-light-secondary typography-body-small-medium text-wrap whitespace-pre-wrap text-center">
             {secondaryLabel}
           </p>
           <input ref={ref} {...props} type="file" hidden />

package/lib/components/Input.tsx

@@ -11,17 +11,19 @@ interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "size"> {
     className?: string;
 }
 
-export const Group = ({ size = 'M', variant = "PresentationStyle", error = false, onTable = false, ref, className, ...props }: InputGroupProps) => {
-    return (
-        <div
-            className={cn(GroupStyles({ size, variant, error, onTable }), className)}
-            ref={ref}
-            {...props}>
-        </div>
-    )
-}
-
+export const Group = forwardRef<HTMLDivElement, InputGroupProps>(
+    ({ size = 'M', variant = "PresentationStyle", error = false, onTable = false, className, ...props }, ref) => {
+        return (
+            <div
+                className={cn(GroupStyles({ size, variant, error, onTable }), className)}
+                ref={ref}
+                {...props}>
+            </div>
+        )
+    }
+);
 
+Group.displayName = "Group";
 
 interface IconProps {
     children: React.ReactNode;
@@ -116,10 +118,10 @@ export const GroupStyles = cva(
         "transition-all duration-200 ease-in-out",
         "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
         "[&_i]:leading-[0px] leading-[0px]",
-        '[&:has(input[disabled="true"])]:!border-border-presentation-action-disabled',
-        '[&:has(input[disabled="true"])]:!bg-background-presentation-action-disabled',
-        '[&:has(input[disabled="true"])]:hover:border-border-presentation-action-disabled',
-        '[&:has(input[disabled="true"])]:hover:bg-background-presentation-action-disabled',
+        '[&:has(input[disabled])]:!border-border-presentation-action-disabled',
+        '[&:has(input[disabled])]:!bg-background-presentation-action-disabled',
+        '[&:has(input[disabled])]:hover:border-border-presentation-action-disabled',
+        '[&:has(input[disabled])]:hover:bg-background-presentation-action-disabled',
     ],
     {
         variants: {

package/lib/components/InputField.tsx

@@ -98,7 +98,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
               <Trilling >
                 {childrenSide}
                 {popoverChildren && (
-                  <PopoverActionButton size={size} variant={variant} isPopoverOpen={isPopoverOpen} />
+                  <PopoverActionButton size={size} variant={variant} isPopoverOpen={isPopoverOpen} disabled={props.disabled} />
                 )}
               </Trilling>
             </Group>
@@ -107,7 +107,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
 
 
         {
-          popoverChildren && (
+          (popoverChildren && !props.disabled) && (
             <PopoverContent
               theme={theme}
               variant={variant}
@@ -125,16 +125,16 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
 
 InputField.displayName = "InputField";
 
-const PopoverActionButton = ({ size, variant, isPopoverOpen }: { size: "S" | "M", variant: "SystemStyle" | "PresentationStyle", isPopoverOpen: boolean }) => {
+const PopoverActionButton = ({ size, variant, isPopoverOpen, disabled }: { size: "S" | "M", variant: "SystemStyle" | "PresentationStyle", isPopoverOpen: boolean, disabled?: boolean }) => {
   return (
-    <ActionButton size={size}>
+    <ActionButton disabled={disabled} size={size}>
       <i
         className={cn(
           "ri-arrow-down-s-line",
           "transition-[transform,rotate]",
           "duration-200",
           "ease-in-out",
-          { "rotate-180": isPopoverOpen },
+          { "rotate-180": (isPopoverOpen && !disabled) },
           { "!text-[16px]": size === "S" },
           { "!text-[26px]": size === "M" },
           { "text-white": variant === "SystemStyle" }

package/lib/components/InputOTP.tsx

@@ -77,7 +77,7 @@ const InputOTPSeparator = React.forwardRef<
     React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
     <div ref={ref} role="separator" {...props}>
-        <i className="ri-subtract-line"></i>
+        <i className="ri-subtract-line text-border-presentation-global-primary"></i>
     </div>
 ))
 InputOTPSeparator.displayName = "InputOTPSeparator"

package/lib/components/LinkButton.tsx

@@ -49,15 +49,14 @@ export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asCh
         className
       )}
     >
-      <div className="px-[3px]">{props.children}</div>
+      <div className="px-[3px] whitespace-nowrap break-keep">{props.children}</div>
       <div
         className={cn(
           "rounded-[4px]",
           "bg-background-presentation-state-information-primary",
           "transition-all duration-[100] ease-in-out",
           "h-0 w-0  p-0",
-          "opacity-0 group-hover:opacity-100",
-          "p-[3px]",
+          "opacity-0 group-hover:opacity-100 group-hover:p-[3px]",
           {
             "group-hover:w-[20px] group-hover:h-[20px]": size === "S",
             "group-hover:w-[22px] group-hover:h-[22px]": size === "M",

package/lib/components/Select.tsx

@@ -227,9 +227,8 @@ const SelectContentStyles = cva(
   [
     "p-1",
     "rounded-[8px]",
-    "border",
-    "max-h-[200px]",
     "min-w-[240px]",
+    "border",
     "outline-none",
     "overflow-scroll",
     "data-[state=open]:animate-in",
@@ -238,6 +237,7 @@ const SelectContentStyles = cva(
     "data-[state=open]:fade-in-0",
     "overflow-x-hidden",
     "scrollbar-hide",
+    "z-[1000]",
   ],
   {
     variants: {
@@ -408,7 +408,7 @@ const PopoverTriggerStyles = cva(
           "[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium",
         ],
         XL: [
-          "h-[40px] p-[4px] rounded-[6px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-small-regular [&_p]:px-[4px]",
+          "h-[40px] p-[4px] rounded-[6px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
         ],
       },
     },

package/lib/components/Skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div
-            className={cn("animate-pulse rounded-md bg-primary/10", className)}
+            className={cn("animate-pulse rounded-md bg-border-presentation-global-primary", className)}
             {...props}
         />
     )

package/lib/components/TabFormItem.tsx

@@ -32,7 +32,7 @@ const TabFormItem: React.FC<Props> = ({
       {...props}
       className={cn(
         formBarItemStyles({ componentType, active, buttonType }),
-        className
+        className,
       )}
     >
       {props.children}

package/lib/components/Table.tsx

@@ -188,9 +188,10 @@ const TableCell = React.forwardRef<
   >
     <div
       className={cn(
-        "flex justify-start items-center gap-1 w-[200px] min-w-full overflow-hidden",
+        "flex justify-start items-center gap-1 w-[200px] min-w-full overflow-hidden has-input:bg-blue-200",
         "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
         "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
+        "[&:has(input)]:[mask-image:none]",
         { "w-auto justify-center": isDummy }, childrenClassName)}
     >
       {props.children}

package/lib/hooks/useClickOutside.tsx

@@ -5,7 +5,7 @@ export function useClickOutside<T extends HTMLElement>(callback: (event?: any) =
 
     useEffect(() => {
         function handleOutsideClick(event: MouseEvent) {
-            if (ref.current) {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
                 callback(event);
             }
         }

package/lib/hooks/useTagSelection.tsx

@@ -12,17 +12,27 @@ export interface Tag {
 export const useTagSelection = ({
     Tags,
     onTagsChange,
-    inputRef
+    inputRef,
+    singleSelect = false
 }: {
     Tags: Tag[],
     onTagsChange?: (selectedTags: Tag[]) => void,
-    inputRef?: React.RefObject<HTMLInputElement | null>
+    inputRef?: React.RefObject<HTMLInputElement | null>,
+    singleSelect?: boolean
 }) => {
+    // Split initial tags into selected and unselected
+    const initialSelectedTags = Tags.filter(tag => tag.isSelected);
+    const initialUnselectedTags = Tags.filter(tag => !tag.isSelected);
+
     // Initialize with available tags (excluding any initially selected ones)
-    const [tags, setTags] = useState<Tag[]>(Tags);
+    const [tags, setTags] = useState<Tag[]>(initialUnselectedTags);
 
     // Initialize with any pre-selected tags
-    const [selectedTagsStack, setSelectedTagsStack] = useState<Tag[]>([]);
+    const [selectedTagsStack, setSelectedTagsStack] = useState<Tag[]>(
+        singleSelect && initialSelectedTags.length > 0
+            ? [initialSelectedTags[0]]
+            : initialSelectedTags
+    );
     const [searchTags, filterTagsBySearch] = useState('');
     const [focusedTagIndex, setFocusedTagIndex] = useState<number | null>(null);
     const [focusedPopoverIndex, setFocusedPopoverIndex] = useState<number | null>(null);
@@ -47,11 +57,29 @@ export const useTagSelection = ({
         tag.name.toLowerCase().includes(searchTags.toLowerCase())
     );
 
+    // Filter selected tags based on search input
+    const filteredSelectedTags = searchTags.length > 0
+        ? selectedTagsStack.filter(tag =>
+            tag.name.toLowerCase().includes(searchTags.toLowerCase()))
+        : selectedTagsStack;
+
     const handleSelectTag = (id: string) => {
         const tagToSelect = tags.find(tag => tag.id === id);
         if (tagToSelect) {
-            setSelectedTagsStack(prev => [...prev, { ...tagToSelect, isSelected: true }]);
-            setTags(prev => prev.filter(tag => tag.id !== id));
+            // If in single select mode, replace the current selection
+            if (singleSelect) {
+                // Move any currently selected tag back to available tags
+                if (selectedTagsStack.length > 0) {
+                    const currentSelected = selectedTagsStack[0];
+                    setTags(prev => [...prev, { ...currentSelected, isSelected: false }]);
+                }
+                setSelectedTagsStack([{ ...tagToSelect, isSelected: true }]);
+                setTags(prev => prev.filter(tag => tag.id !== id));
+            } else {
+                // Multi-select behavior (original)
+                setSelectedTagsStack(prev => [...prev, { ...tagToSelect, isSelected: true }]);
+                setTags(prev => prev.filter(tag => tag.id !== id));
+            }
         }
         filterTagsBySearch('');
         setFocusedPopoverIndex(null);
@@ -68,8 +96,13 @@ export const useTagSelection = ({
 
     // Reset the hook state with new data
     const reset = (newTags: Tag[] = [], newSelectedTags: Tag[] = []) => {
+        // In single select mode, ensure we only have at most one selected tag
+        const selectedTags = singleSelect && newSelectedTags.length > 0
+            ? [newSelectedTags[0]]
+            : newSelectedTags;
+
         setTags(newTags);
-        setSelectedTagsStack(newSelectedTags);
+        setSelectedTagsStack(selectedTags);
         filterTagsBySearch('');
         setFocusedTagIndex(null);
         setFocusedPopoverIndex(null);
@@ -169,11 +202,13 @@ export const useTagSelection = ({
         setFocusedPopoverIndex,
         filterTagsBySearch,
         filteredTags,
+        filteredSelectedTags,
         focusedTagIndex,
         focusedPopoverIndex,
         isPopoverOpen,
         setIsPopoverOpen,
-        reset
+        reset,
+        singleSelect
     };
 };
 

package/lib/layouts/FieldSection.tsx

@@ -58,7 +58,7 @@ export function FieldSection({
       </div>
 
       {/* Flexible section that takes up the remaining space */}
-      <div className="flex flex-col items-end gap-[12px]">{children}</div>
+      <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
     </section>
   );
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "torch-glare",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "type": "module",
   "license": "MIT",
   "files": [
     "dist",
-    "lib"
+    "lib",
+    "docs"
   ],
   "bin": {
     "torch-glare": "dist/bin/index.js"
@@ -15,7 +16,7 @@
   },
   "scripts": {
     "build": "tsc -b",
-    "deploy": "tsc && node ./scripts/publish/index.js"
+    "deploy": "tsc && node ./scripts/bin/publish/index.js"
   },
   "dependencies": {
     "commander": "^13.1.0",