@artivism/ui 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,11 @@
+# @artivism/ui
+
+React components for Artivism.
+
+## Installation
+
+npm install @artivism/ui
+
+## Usage
+
+import { Button } from "@artivism/ui";

package/dist/badge.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+type BadgeProps = React.ComponentProps<typeof Badge>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.mjs

@@ -0,0 +1,9 @@
+import {
+  Badge,
+  badgeVariants
+} from "./chunk-LSGIYX2Z.mjs";
+import "./chunk-SZOFVBTZ.mjs";
+export {
+  Badge,
+  badgeVariants
+};

package/dist/button.d.mts

@@ -1,10 +1,16 @@
-import * as react from 'react';
-import { ButtonHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost";
-    size?: "sm" | "md" | "lg";
-}
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps };
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/button.mjs

@@ -1,31 +1,9 @@
-// src/button.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Button = forwardRef(
-  ({ variant = "primary", size = "md", className = "", children, ...props }, ref) => {
-    const baseClasses = "inline-flex items-center justify-center font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
-    const variantClasses = {
-      primary: "bg-accent text-white hover:bg-accent-hover",
-      secondary: "bg-surface-muted text-text hover:bg-border",
-      ghost: "text-text hover:bg-surface-muted"
-    };
-    const sizeClasses = {
-      sm: "px-3 py-1.5 text-sm rounded-sm",
-      md: "px-4 py-2 text-base rounded-md",
-      lg: "px-6 py-3 text-lg rounded-lg"
-    };
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-HUOOVZOV.mjs";
+import "./chunk-SZOFVBTZ.mjs";
 export {
-  Button
+  Button,
+  buttonVariants
 };

package/dist/card.d.mts

@@ -1,9 +1,12 @@
-import * as react from 'react';
-import { HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: "default" | "bordered";
-}
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-export { Card, type CardProps };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/card.mjs

@@ -1,25 +1,19 @@
-// src/card.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Card = forwardRef(
-  ({ variant = "default", className = "", children, ...props }, ref) => {
-    const baseClasses = "rounded-lg p-6";
-    const variantClasses = {
-      default: "bg-surface shadow-sm",
-      bordered: "bg-surface border border-border"
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: `${baseClasses} ${variantClasses[variant]} ${className}`,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "./chunk-LNBDAIPM.mjs";
+import "./chunk-SZOFVBTZ.mjs";
 export {
-  Card
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
 };

package/dist/chunk-GRHBB7TD.mjs

@@ -0,0 +1,26 @@
+import {
+  cn
+} from "./chunk-SZOFVBTZ.mjs";
+
+// src/input.tsx
+import { jsx } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  Input
+};

package/dist/chunk-HUOOVZOV.mjs

@@ -0,0 +1,61 @@
+import {
+  cn
+} from "./chunk-SZOFVBTZ.mjs";
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/chunk-LNBDAIPM.mjs

@@ -0,0 +1,95 @@
+import {
+  cn
+} from "./chunk-SZOFVBTZ.mjs";
+
+// src/card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter
+};

package/dist/chunk-LSGIYX2Z.mjs

@@ -0,0 +1,48 @@
+import {
+  cn
+} from "./chunk-SZOFVBTZ.mjs";
+
+// src/badge.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+export {
+  badgeVariants,
+  Badge
+};

package/dist/chunk-SZOFVBTZ.mjs

@@ -0,0 +1,10 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/index.d.mts

@@ -1,3 +1,13 @@
-export { Button, ButtonProps } from './button.mjs';
-export { Card, CardProps } from './card.mjs';
+export { Button, ButtonProps, buttonVariants } from './button.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.mjs';
+export { Input } from './input.mjs';
+export { Badge, BadgeProps, badgeVariants } from './badge.mjs';
+import { ClassValue } from 'clsx';
+import 'react/jsx-runtime';
+import 'class-variance-authority/types';
 import 'react';
+import 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/index.mjs

@@ -1,55 +1,36 @@
-// src/button.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Button = forwardRef(
-  ({ variant = "primary", size = "md", className = "", children, ...props }, ref) => {
-    const baseClasses = "inline-flex items-center justify-center font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
-    const variantClasses = {
-      primary: "bg-accent text-white hover:bg-accent-hover",
-      secondary: "bg-surface-muted text-text hover:bg-border",
-      ghost: "text-text hover:bg-surface-muted"
-    };
-    const sizeClasses = {
-      sm: "px-3 py-1.5 text-sm rounded-sm",
-      md: "px-4 py-2 text-base rounded-md",
-      lg: "px-6 py-3 text-lg rounded-lg"
-    };
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/card.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Card = forwardRef2(
-  ({ variant = "default", className = "", children, ...props }, ref) => {
-    const baseClasses = "rounded-lg p-6";
-    const variantClasses = {
-      default: "bg-surface shadow-sm",
-      bordered: "bg-surface border border-border"
-    };
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        ref,
-        className: `${baseClasses} ${variantClasses[variant]} ${className}`,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
+import {
+  Badge,
+  badgeVariants
+} from "./chunk-LSGIYX2Z.mjs";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-HUOOVZOV.mjs";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "./chunk-LNBDAIPM.mjs";
+import {
+  Input
+} from "./chunk-GRHBB7TD.mjs";
+import {
+  cn
+} from "./chunk-SZOFVBTZ.mjs";
 export {
+  Badge,
   Button,
-  Card
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  badgeVariants,
+  buttonVariants,
+  cn
 };

package/dist/input.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+
+export { Input };

package/dist/input.mjs

@@ -0,0 +1,7 @@
+import {
+  Input
+} from "./chunk-GRHBB7TD.mjs";
+import "./chunk-SZOFVBTZ.mjs";
+export {
+  Input
+};

package/package.json

@@ -1,44 +1,50 @@
 {
   "name": "@artivism/ui",
-  "version": "0.1.0",
-  "description": "React UI components for Artivism Design System",
+  "version": "0.1.2",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
-    ".": "./dist/index.mjs",
-    "./button": "./dist/button.mjs",
-    "./card": "./dist/card.mjs"
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./button": {
+      "types": "./dist/button.d.mts",
+      "import": "./dist/button.mjs"
+    },
+    "./card": {
+      "types": "./dist/card.d.mts",
+      "import": "./dist/card.mjs"
+    },
+    "./input": {
+      "types": "./dist/input.d.mts",
+      "import": "./dist/input.mjs"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.mts",
+      "import": "./dist/badge.mjs"
+    }
   },
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "react": "^18.0.0"
-  },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "build": "tsup"
   },
-  "devDependencies": {
-    "@types/react": "^18.2.48",
-    "react": "^18.2.0",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
   },
-  "keywords": [
-    "design-system",
-    "react",
-    "components",
-    "ui",
-    "artivism"
-  ],
-  "author": "artivism",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/artivism/design-system.git",
-    "directory": "packages/ui"
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "homepage": "https://design.artivism.it"
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
 }