@dito-uai/components 5.1.0-alpha.29 → 5.1.0-alpha.31

package/dist/ui/alert.d.ts

@@ -1,5 +1,211 @@
 import { VariantProps } from 'tailwind-variants';
 import React from 'react';
+declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}, {
+    container: string;
+    icon: string;
+    message: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}, {
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}>, {
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}, {
+    container: string;
+    icon: string;
+    message: string;
+}, import("tailwind-variants").TVReturnType<{
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}, {
+    container: string;
+    icon: string;
+    message: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}, {
+    type: {
+        success: {
+            container: string;
+            icon: string;
+        };
+        warning: {
+            container: string;
+            icon: string;
+        };
+        error: {
+            container: string;
+            icon: string;
+        };
+        info: {
+            container: string;
+            icon: string;
+        };
+    };
+    closable: {
+        true: {
+            message: string;
+        };
+        false: {
+            message: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & {
+    message: string | React.ReactNode;
+    closable?: boolean;
+};
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<import("tailwind-variants").TVReturnType<{
     type: {
         success: {

package/dist/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAmB,MAAM,OAAO,CAAC;AA6DxC,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAXE,MAAM,GAAG,KAAK,CAAC,SAAS;eACtB,OAAO;wCAiCrB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAqCjB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC3D,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AASJ,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAXE,MAAM,GAAG,KAAK,CAAC,SAAS;eACtB,OAAO;wCAiCrB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/ui/switch.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type SwitchProps = HTMLAttributes<HTMLInputElement> & PropsWithChildren<{
+    name: string;
+    disabled?: boolean;
+    checked?: boolean;
+}>;
+declare const Switch: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
+    name: string;
+    disabled?: boolean;
+    checked?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Switch;
+//# sourceMappingURL=switch.d.ts.map

package/dist/ui/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/D,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,gBAAgB,CAAC,GACxD,iBAAiB,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEL,QAAA,MAAM,MAAM;UALF,MAAM;eACD,OAAO;cACR,OAAO;;;oDAsBpB,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/ui/toggle-group.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import type { VariantProps } from 'tailwind-variants';
+import { toggleVariants } from './toggle';
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>;
+export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>;
+export declare const Toggle: {
+    Group: React.ForwardRefExoticComponent<ToggleGroupProps>;
+    Item: React.ForwardRefExoticComponent<ToggleGroupItemProps>;
+};
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/ui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/ui/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAC3D,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAC/D,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAqDtC,eAAO,MAAM,MAAM,EAAE;IACnB,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IACzD,IAAI,EAAE,KAAK,CAAC,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;CAI7D,CAAC"}

package/dist/ui/toggle.d.ts

@@ -1,15 +1,105 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type ToggleProps = HTMLAttributes<HTMLInputElement> & PropsWithChildren<{
-    name: string;
-    disabled?: boolean;
-    checked?: boolean;
-}>;
-declare const Toggle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
-    name: string;
-    disabled?: boolean;
-    checked?: boolean;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export default Toggle;
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { type VariantProps } from 'tailwind-variants';
+declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, "ring-offset-background hover:bg-muted focus-visible:ring-ring rounded-m inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-600 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, "ring-offset-background hover:bg-muted focus-visible:ring-ring rounded-m inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-600 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, "ring-offset-background hover:bg-muted focus-visible:ring-ring rounded-m inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-600 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, undefined, "ring-offset-background hover:bg-muted focus-visible:ring-ring rounded-m inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-600 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

package/dist/ui/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/ui/toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/D,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,gBAAgB,CAAC,GACxD,iBAAiB,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEL,QAAA,MAAM,MAAM;UALF,MAAM;eACD,OAAO;cACR,OAAO;;;oDAsBpB,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAelB,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAUV,CAAC;AAIH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@dito-uai/components",
-  "version": "5.1.0-alpha.29",
-  "descriptin": "Dito's design system component library, made in TSX",
+  "version": "5.1.0-alpha.31",
+  "description": "Dito's design system component library, made in TSX",
+  "license": "MIT",
   "repository": "git+https://github.com/ditointernet/dito-uai.git",
+  "homepage": "https://github.com/ditointernet/dito-uai#readme",
+  "bugs": {
+    "url": "https://github.com/ditointernet/dito-uai/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -28,34 +33,77 @@
     }
   },
   "scripts": {
-    "dev": "yarn build --watch",
-    "semantic-release": "semantic-release",
-    "build": "yarn bundle",
-    "bundle": "yarn build:js & yarn build:types & yarn build:css",
+    "dev": "storybook dev -p 6006 --config-dir ./src/storybook/.storybook",
+    "build:storybook": "storybook build --config-dir ./src/storybook/.storybook --output-dir ./src/storybook/storybook-static",
+    "build:uai": "yarn build:js & yarn build:types & yarn build:css",
     "build:js": "tsup",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir dist",
-    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify -v"
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir dist --project tsconfig.build.json",
+    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify -v",
+    "publish:uai": "semantic-release",
+    "format:ts": "prettier",
+    "format:ts:all": "yarn format:ts --check \"src/**/*.{ts,tsx}\"",
+    "format": "yarn format:ts:all",
+    "lint:ts": "eslint --cache",
+    "lint:ts:all": "yarn lint:ts \"src/**/*.{ts,tsx}\"",
+    "lint": "yarn lint:ts:all --fix",
+    "cz": "cz"
   },
-  "packageManager": "yarn@4.1.1",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "13.1.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "9.0.0",
     "@semantic-release/github": "^10.1.3",
     "@semantic-release/release-notes-generator": "^14.0.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-onboarding": "8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@types/eslint__js": "^8.42.3",
+    "@types/postcss-flexbugs-fixes": "^5",
+    "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
-    "esbuild": "^0.23.0",
+    "chromatic": "^11.7.0",
+    "commitizen": "^4.3.0",
+    "commitlint": "^19.3.0",
+    "cz-conventional-changelog": "3.3.0",
+    "cz-customizable": "6.9.2",
+    "dotenv-cli": "^7.4.2",
+    "esbuild": "^0.12.15",
     "esbuild-plugin-svgr": "^2.1.0",
     "esbuild-plugin-tsc": "^0.4.0",
     "esbuild-ts-paths": "^1.1.3",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "firebase-tools": "13.14.2",
+    "husky": "7.0.1",
+    "lint-staged": "15.2.7",
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
     "semantic-release": "^17",
+    "storybook": "8.6.14",
     "supports-color": "^9.4.0",
     "tailwindcss": "^3.4.13",
     "tsup": "^8.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5"
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.3.5",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
     "@dito-uai/icons": "^1.8.0",
@@ -70,11 +118,11 @@
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.418.0",
@@ -97,5 +145,29 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "zod": "^3.23.8"
-  }
+  },
+  "engines": {
+    "node": ">= 20"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-customizable",
+      "defaultType": "fix",
+      "defaultScope": "components"
+    },
+    "cz-customizable": {
+      "config": ".cz-config.cjs"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true"
+    }
+  },
+  "resolutions": {
+    "underscore.string": "npm:underscore.string@*",
+    "eslint": "npm:eslint@9.8.0",
+    "typescript-eslint": "npm:typescript-eslint@8.0.0"
+  },
+  "packageManager": "yarn@4.3.1"
 }

package/tailwind.config.ts

@@ -93,7 +93,7 @@ export const COLORS = {
 /** @type {import('tailwindcss').Config} */
 export default {
   mode: 'jit',
-  content: ['./src/**/*.{ts,tsx}'],
+  content: ['./src/ui/**/*.{ts,tsx}'],
   theme: {
     screens: {
       sm: '480px',