@krrli/cm-designsystem 1.32.0 → 1.32.2

package/dist/compositions/user-recommendation/UserRecommendation.js

@@ -1,34 +1,62 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Avatar } from "../../components/avatar/Avatar";
-import { Button } from "../../components/button/Button";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Mumble, Profile } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Button } from "../../components/button/Button.js";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Mumble } from "../../components/icons/generated/Mumble.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
 const userRecommendationStyles = tv({
-    slots: {
-        base: [
-            "flex",
-            "flex-col",
-            "gap-4",
-            "items-center",
-            "p-4",
-            "bg-white",
-            "rounded-2xl",
-        ],
-        userInfo: ["flex", "flex-col", "gap-2", "items-center"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
-    },
+  slots: {
+    base: [
+      "flex",
+      "flex-col",
+      "gap-4",
+      "items-center",
+      "p-4",
+      "bg-white",
+      "rounded-2xl"
+    ],
+    userInfo: ["flex", "flex-col", "gap-2", "items-center"],
+    displayName: ["text-slate-900", "**:cursor-pointer"]
+  }
 });
-/**
- * UserRecommendation Component
- *
- * Displays a recommended user with:
- * - A clickable avatar
- * - Display name and username
- * - A follow button
- */
-export const UserRecommendation = (props) => {
-    const { base, userInfo, displayName } = userRecommendationStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsx(Avatar, { alt: "Profile", size: "lg", src: props.src, onAvatarClick: props.onProfileClick }), _jsxs("div", { className: userInfo(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "lg", children: props.displayName }) }), _jsx(IconButton, { icon: Profile, intent: "secondary", onClick: props.onProfileClick, children: props.userName })] }), _jsx(Button, { icon: Mumble, intent: "secondary", onClick: props.onFollowClick, size: "md", children: props.label })] }));
+const UserRecommendation = (props) => {
+  const { base, userInfo, displayName } = userRecommendationStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "lg",
+        src: props.src,
+        onAvatarClick: props.onProfileClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onProfileClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: "lg", children: props.displayName }) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Profile,
+          intent: "secondary",
+          onClick: props.onProfileClick,
+          children: props.userName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: Mumble,
+        intent: "secondary",
+        onClick: props.onFollowClick,
+        size: "md",
+        children: props.label
+      }
+    )
+  ] });
+};
+export {
+  UserRecommendation
 };

package/dist/index.js

@@ -1,4 +1,129 @@
-// Entry point for npm package. Export all public components here.
-import "./index.css";
-export * from "./components";
-export * from "./compositions";
+/* empty css          */
+import { Avatar } from "./components/avatar/Avatar.js";
+import { BrandingGallery } from "./components/branding/BrandingGallery.js";
+import { Button } from "./components/button/Button.js";
+import { ColorDoc } from "./components/color/ColorDoc.js";
+import { FileUpload } from "./components/file-upload/FileUpload.js";
+import { Form, FormAction, FormFields } from "./components/form/Form.js";
+import { IconButton } from "./components/icon-button/IconButton.js";
+import { IconBase } from "./components/icons/IconBase.js";
+import { ArrowDown } from "./components/icons/generated/ArrowDown.js";
+import { ArrowLeft } from "./components/icons/generated/ArrowLeft.js";
+import { ArrowRight } from "./components/icons/generated/ArrowRight.js";
+import { ArrowUp } from "./components/icons/generated/ArrowUp.js";
+import { Calendar } from "./components/icons/generated/Calendar.js";
+import { Cancel } from "./components/icons/generated/Cancel.js";
+import { Checkmark } from "./components/icons/generated/Checkmark.js";
+import { Edit } from "./components/icons/generated/Edit.js";
+import { Eye } from "./components/icons/generated/Eye.js";
+import { Fullscreen } from "./components/icons/generated/Fullscreen.js";
+import { HeartFilled } from "./components/icons/generated/HeartFilled.js";
+import { HeartOutline } from "./components/icons/generated/HeartOutline.js";
+import { Location } from "./components/icons/generated/Location.js";
+import { LogOut } from "./components/icons/generated/LogOut.js";
+import { Mumble } from "./components/icons/generated/Mumble.js";
+import { Profile } from "./components/icons/generated/Profile.js";
+import { ReplyFilled } from "./components/icons/generated/ReplyFilled.js";
+import { ReplyOutline } from "./components/icons/generated/ReplyOutline.js";
+import { Repost } from "./components/icons/generated/Repost.js";
+import { Send } from "./components/icons/generated/Send.js";
+import { Settings } from "./components/icons/generated/Settings.js";
+import { Share } from "./components/icons/generated/Share.js";
+import { Time } from "./components/icons/generated/Time.js";
+import { Upload } from "./components/icons/generated/Upload.js";
+import { Input } from "./components/input/Input.js";
+import { LikeToggle } from "./components/like-toggle/LikeToggle.js";
+import { LogoLink } from "./components/logo-link/LogoLink.js";
+import { Modal, ModalActions, ModalBody } from "./components/modal/Modal.js";
+import { NaviButton } from "./components/navi-button/NaviButton.js";
+import { NaviUserButton } from "./components/navi-user-button/NaviUserButton.js";
+import { RoundButton } from "./components/round-button/RoundButton.js";
+import { TabItem } from "./components/tabs/TabItem.js";
+import { Tabs } from "./components/tabs/Tabs.js";
+import { TextLink } from "./components/text-link/TextLink.js";
+import { Textarea } from "./components/textarea/Textarea.js";
+import { TimedButton } from "./components/timed-button/TimedButton.js";
+import { Toggle } from "./components/toggle/Toggle.js";
+import { Heading } from "./components/typography/Heading.js";
+import { Label } from "./components/typography/Label.js";
+import { Paragraph } from "./components/typography/Paragraph.js";
+import { Placeholder } from "./components/typography/Placeholder.js";
+import { ValidationMessage } from "./components/typography/ValidationMessage.js";
+import { ImageBanner } from "./compositions/image-banner/ImageBanner.js";
+import { ImageUploadModal } from "./compositions/image-upload-modal/ImageUploadModal.js";
+import { Post } from "./compositions/post/Post.js";
+import { PostCreator } from "./compositions/post-creator/PostCreator.js";
+import { ProfileBanner } from "./compositions/profile-banner/ProfileBanner.js";
+import { ProfileBannerImage } from "./compositions/profile-banner-image/ProfileBannerImage.js";
+import { ProfileBannerInfo } from "./compositions/profile-banner-info/ProfileBannerInfo.js";
+import { Response } from "./compositions/response/Response.js";
+import { ResponseCreator } from "./compositions/response-creator/ResponseCreator.js";
+import { UserInfo } from "./compositions/user-info/UserInfo.js";
+import { UserRecommendation } from "./compositions/user-recommendation/UserRecommendation.js";
+export {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Avatar,
+  BrandingGallery,
+  Button,
+  Calendar,
+  Cancel,
+  Checkmark,
+  ColorDoc,
+  Edit,
+  Eye,
+  FileUpload,
+  Form,
+  FormAction,
+  FormFields,
+  Fullscreen,
+  Heading,
+  HeartFilled,
+  HeartOutline,
+  IconBase,
+  IconButton,
+  ImageBanner,
+  ImageUploadModal,
+  Input,
+  Label,
+  LikeToggle,
+  Location,
+  LogOut,
+  LogoLink,
+  Modal,
+  ModalActions,
+  ModalBody,
+  Mumble,
+  NaviButton,
+  NaviUserButton,
+  Paragraph,
+  Placeholder,
+  Post,
+  PostCreator,
+  Profile,
+  ProfileBanner,
+  ProfileBannerImage,
+  ProfileBannerInfo,
+  ReplyFilled,
+  ReplyOutline,
+  Repost,
+  Response,
+  ResponseCreator,
+  RoundButton,
+  Send,
+  Settings,
+  Share,
+  TabItem,
+  Tabs,
+  TextLink,
+  Textarea,
+  Time,
+  TimedButton,
+  Toggle,
+  Upload,
+  UserInfo,
+  UserRecommendation,
+  ValidationMessage
+};

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@krrli/cm-designsystem",
-  "version": "1.32.0",
-  "files": [
-    "dist/",
-    "dist/cm-designsystem.css"
-  ],
+  "version": "1.32.2",
+  "type": "module",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "preflight": "npm run prettier && npm run lint && npm run typecheck && npm run build && npm run knip",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "typecheck": "npx tsc -b --noEmit",
@@ -35,12 +35,12 @@
   },
   "peerDependencies": {
     "@radix-ui/react-accessible-icon": "1.1.8",
+    "@radix-ui/react-aspect-ratio": "1.1.8",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-form": "0.1.8",
     "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-toggle": "1.1.10",
-    "@radix-ui/react-aspect-ratio": "1.1.8",
     "react": "19.2.1",
     "react-dom": "19.2.1"
   },
@@ -76,17 +76,20 @@
     "eslint-plugin-unused-imports": "4.3.0",
     "globals": "16.5.0",
     "jsdom": "27.2.0",
-    "knip": "5.71.0",
+    "knip": "5.72.0",
     "playwright": "1.57.0",
     "prettier": "3.7.4",
     "prettier-plugin-tailwindcss": "0.7.2",
+    "rollup-preserve-directives": "1.1.3",
     "semantic-release": "25.0.2",
     "storybook": "10.1.4",
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.17",
     "typescript": "5.9.3",
     "typescript-eslint": "8.48.1",
-    "vite": "7.2.6",
+    "vite": "7.2.7",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-svgr": "^4.5.0",
     "vitest": "4.0.15"
   }
 }

package/dist/components/accessible-button/AccessibleButton.d.ts

@@ -1,32 +0,0 @@
-/**
- * Props for the AccessibleButton component.
- */
-export interface BaseAccessibleButtonProps {
-    /**
-     * Accessible label for the button, used by screen readers.
-     */
-    ariaLabel?: string;
-    /**
-     * Additional class names to apply to the button element.
-     */
-    className?: string;
-    /**
-     * HTML button type attribute.
-     */
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    /**
-     * Click handler for the button.
-     */
-    onClick?: () => void;
-}
-interface AccessibleButtonProps extends BaseAccessibleButtonProps {
-    /**
-     * The content displayed inside the button.
-     */
-    children?: React.ReactNode;
-}
-/**
- * A fully accessible button component.
- */
-export declare const AccessibleButton: React.FC<AccessibleButtonProps>;
-export {};

package/dist/components/accessible-button/AccessibleButton.test.d.ts

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

package/dist/components/accessible-button/AccessibleButton.test.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
-import { AccessibleButton } from "./AccessibleButton";
-describe("Button", () => {
-    test("should render button", async () => {
-        // Arrange
-        render(_jsx(AccessibleButton, { onClick: vi.fn(), children: "button" }));
-        // Assert
-        expect(screen.getByRole("button")).toBeVisible();
-        expect(screen.getByRole("button")).toHaveTextContent("button");
-    });
-    test("should render button with ariaLabel", async () => {
-        // Arrange
-        render(_jsx(AccessibleButton, { ariaLabel: "This is a button", onClick: vi.fn(), children: "button" }));
-        // Assert
-        expect(screen.getByRole("button")).toBeVisible();
-        expect(screen.getByRole("button")).toHaveTextContent("button");
-        expect(screen.queryByLabelText("This is a button")).toBeInTheDocument();
-    });
-    test("should call onClick when clicked", () => {
-        // Arrange
-        const onClick = vi.fn();
-        render(_jsx(AccessibleButton, { onClick: onClick, children: "button" }));
-        fireEvent.click(screen.getByRole("button"));
-        expect(onClick).toHaveBeenCalled();
-    });
-});

package/dist/components/avatar/Avatar.d.ts

@@ -1,118 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const avatarStyles: import("tailwind-variants").TVReturnType<{
-    isClickable: {
-        true: {
-            base: string[];
-        };
-    };
-    size: {
-        sm: {
-            avatar: string[];
-        };
-        md: {
-            avatar: string[];
-        };
-        lg: {
-            avatar: string[];
-        };
-        xl: {
-            avatar: string[];
-        };
-    };
-}, {
-    base: string[];
-    avatar: string[];
-    action: string[];
-}, undefined, {
-    isClickable: {
-        true: {
-            base: string[];
-        };
-    };
-    size: {
-        sm: {
-            avatar: string[];
-        };
-        md: {
-            avatar: string[];
-        };
-        lg: {
-            avatar: string[];
-        };
-        xl: {
-            avatar: string[];
-        };
-    };
-}, {
-    base: string[];
-    avatar: string[];
-    action: string[];
-}, import("tailwind-variants").TVReturnType<{
-    isClickable: {
-        true: {
-            base: string[];
-        };
-    };
-    size: {
-        sm: {
-            avatar: string[];
-        };
-        md: {
-            avatar: string[];
-        };
-        lg: {
-            avatar: string[];
-        };
-        xl: {
-            avatar: string[];
-        };
-    };
-}, {
-    base: string[];
-    avatar: string[];
-    action: string[];
-}, undefined, unknown, unknown, undefined>>;
-type AvatarVariants = VariantProps<typeof avatarStyles>;
-type AvatarSize = "sm" | "md" | "lg" | "xl";
-/**
- * Props for the Avatar component.
- */
-interface AvatarProps extends AvatarVariants {
-    /**
-     * Alternative text describing the avatar image.
-     */
-    alt: string;
-    /**
-     * Controls the visual size of the avatar.
-     */
-    size: AvatarSize;
-    /**
-     * The URL source of the avatar image.
-     */
-    src: string;
-    /**
-     * Accessible label for the action button that appears on extra-large (`xl`)
-     * avatars when `onActionClick` is provided.
-     */
-    actionAriaLabel?: string;
-    /**
-     * Click handler for the entire avatar.
-     * Makes the outer wrapper clickable.
-     */
-    onAvatarClick?: () => void;
-    /**
-     * Optional click handler for the action button.
-     * Only visible when:
-     * - `size === "xl"`
-     * - `onActionClick` is provided
-     *
-     * Useful for “Edit avatar” or “Change photo” actions.
-     */
-    onActionClick?: () => void;
-}
-/**
- * A flexible and accessible user avatar component.
- * Built on top of Radix UI’s `Avatar` primitives and styled with Tailwind variants.
- */
-export declare const Avatar: React.FC<AvatarProps>;
-export {};

package/dist/components/branding/BrandingGallery.d.ts

@@ -1 +0,0 @@
-export declare const BrandingGallery: React.FC;

package/dist/components/button/Button.d.ts

@@ -1,66 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
-import type { IconBaseProps } from "../icons/IconBase";
-declare const buttonStyles: import("tailwind-variants").TVReturnType<{
-    intent: {
-        primary: string[];
-        secondary: string[];
-        tertiary: string[];
-    };
-    size: {
-        md: string[];
-        lg: string[];
-    };
-}, undefined, string[], {
-    intent: {
-        primary: string[];
-        secondary: string[];
-        tertiary: string[];
-    };
-    size: {
-        md: string[];
-        lg: string[];
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    intent: {
-        primary: string[];
-        secondary: string[];
-        tertiary: string[];
-    };
-    size: {
-        md: string[];
-        lg: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-type ButtonVariants = VariantProps<typeof buttonStyles>;
-type ButtonIntent = "primary" | "secondary" | "tertiary";
-type ButtonSize = "md" | "lg";
-/**
- * Props for the Button component.
- *
- * @inheritdoc BaseAccessibleButtonProps
- * @inheritdoc ButtonVariants
- */
-interface ButtonProps extends ButtonVariants, BaseAccessibleButtonProps {
-    /**
-     * Visual intent of the button (controls background color, hover, and active styles).
-     */
-    intent: ButtonIntent;
-    /**
-     * Visual size of the button (padding and spacing).
-     */
-    size: ButtonSize;
-    /**
-     * Optional icon element rendered alongside the button label.
-     */
-    icon?: React.ComponentType<IconBaseProps>;
-    /**
-     * Visible text label displayed inside the button.
-     */
-    children: string;
-}
-/**
- * A fully accessible, stylable button component.
- */
-export declare const Button: React.FC<ButtonProps>;
-export {};

package/dist/components/button/Button.test.d.ts

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

package/dist/components/button/Button.test.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
-import { Mumble } from "../icons/generated";
-import { Button } from "./Button";
-describe("Button", () => {
-    test("should render button with icon", async () => {
-        // Arrange
-        render(_jsx(Button, { intent: "primary", size: "md", icon: Mumble, onClick: vi.fn(), children: "button" }));
-        // Assert
-        expect(screen.getByRole("button")).toBeVisible();
-        expect(screen.getByRole("button")).toHaveTextContent("button");
-        expect(screen.getByText("Mumble")).toBeVisible();
-    });
-    test("should render button without icon", async () => {
-        // Arrange
-        render(_jsx(Button, { intent: "primary", size: "md", onClick: vi.fn(), children: "button" }));
-        // Assert
-        expect(screen.getByRole("button")).toBeVisible();
-        expect(screen.getByRole("button")).toHaveTextContent("button");
-        expect(screen.queryByText("Mumble")).not.toBeInTheDocument();
-    });
-    test("should call onClick when clicked", () => {
-        // Arrange
-        const onClick = vi.fn();
-        render(_jsx(Button, { intent: "primary", size: "md", icon: Mumble, onClick: onClick, children: "button" }));
-        fireEvent.click(screen.getByRole("button"));
-        expect(onClick).toHaveBeenCalled();
-    });
-});

package/dist/components/color/ColorDoc.d.ts

@@ -1,4 +0,0 @@
-export declare const ColorDoc: ({ colorName, colorIntensity, }: {
-    colorName: string;
-    colorIntensity: number;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/file-upload/FileUpload.d.ts

@@ -1,83 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-declare const fileUploadStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            input?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            dropzone?: import("tailwind-merge").ClassNameValue;
-            uploadIcon?: import("tailwind-merge").ClassNameValue;
-            titleText?: import("tailwind-merge").ClassNameValue;
-            subtitleText?: import("tailwind-merge").ClassNameValue;
-            preview?: import("tailwind-merge").ClassNameValue;
-            previewLabel?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            input?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            dropzone?: import("tailwind-merge").ClassNameValue;
-            uploadIcon?: import("tailwind-merge").ClassNameValue;
-            titleText?: import("tailwind-merge").ClassNameValue;
-            subtitleText?: import("tailwind-merge").ClassNameValue;
-            preview?: import("tailwind-merge").ClassNameValue;
-            previewLabel?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    dropzone: string[];
-    uploadIcon: string[];
-    titleText: string[];
-    subtitleText: string[];
-    action: string[];
-    input: string[];
-    preview: string[];
-    previewLabel: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            input?: import("tailwind-merge").ClassNameValue;
-            action?: import("tailwind-merge").ClassNameValue;
-            dropzone?: import("tailwind-merge").ClassNameValue;
-            uploadIcon?: import("tailwind-merge").ClassNameValue;
-            titleText?: import("tailwind-merge").ClassNameValue;
-            subtitleText?: import("tailwind-merge").ClassNameValue;
-            preview?: import("tailwind-merge").ClassNameValue;
-            previewLabel?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    dropzone: string[];
-    uploadIcon: string[];
-    titleText: string[];
-    subtitleText: string[];
-    action: string[];
-    input: string[];
-    preview: string[];
-    previewLabel: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
-    base: string[];
-    dropzone: string[];
-    uploadIcon: string[];
-    titleText: string[];
-    subtitleText: string[];
-    action: string[];
-    input: string[];
-    preview: string[];
-    previewLabel: string[];
-}, undefined, unknown, unknown, undefined>>;
-type FileUploadVariants = VariantProps<typeof fileUploadStyles>;
-interface FileUploadProps extends FileUploadVariants {
-    title?: string;
-    subtitle?: string;
-    actionLabel?: string;
-    onFileSelect: (file: File | null) => void;
-}
-export declare const FileUpload: ({ title, subtitle, actionLabel, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
-export {};