@plexui/ui 0.7.98 → 0.9.0

package/dist/es/components/Card/Card.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { useLinkComponent } from "../PlexUIProvider/internal";
+import s from "./Card.module.css";
+const hasHref = (props) => typeof props.href === "string";
+const CardRoot = (props) => {
+    const { variant = "outline", size = "md", interactive, className, } = props;
+    const sharedProps = {
+        "className": clsx(s.Card, className),
+        "data-variant": variant,
+        "data-size": size,
+        "data-interactive": (interactive || hasHref(props)) ? "" : undefined,
+    };
+    if (hasHref(props)) {
+        const { variant: _v, size: _s, interactive: _i, className: _c, href, external, as: OverrideComponent, ref, ...restProps } = props;
+        const isExternal = external ?? /^https?:\/\//.test(href);
+        const DefaultLink = useLinkComponent();
+        const LinkComponent = OverrideComponent || (isExternal ? "a" : DefaultLink);
+        const linkAttrs = isExternal
+            ? { target: "_blank", rel: "noopener noreferrer", href }
+            : { href };
+        return (_jsx(LinkComponent, { ref: ref, ...sharedProps, ...linkAttrs, ...restProps }));
+    }
+    const { variant: _v, size: _s, interactive: _i, className: _c, ref, ...restProps } = props;
+    return _jsx("div", { ref: ref, ...sharedProps, ...restProps });
+};
+const CardHeader = ({ className, ref, ...restProps }) => (_jsx("div", { ref: ref, className: clsx(s.Header, className), ...restProps }));
+const CardTitle = ({ className, ref, ...restProps }) => (_jsx("h3", { ref: ref, className: clsx(s.Title, className), ...restProps }));
+const CardDescription = ({ className, ref, ...restProps }) => (_jsx("p", { ref: ref, className: clsx(s.Description, className), ...restProps }));
+const CardContent = ({ className, ref, ...restProps }) => (_jsx("div", { ref: ref, className: clsx(s.Content, className), ...restProps }));
+const CardFooter = ({ className, ref, ...restProps }) => (_jsx("div", { ref: ref, className: clsx(s.Footer, className), ...restProps }));
+const CardAction = ({ className, ref, ...restProps }) => (_jsx("div", { ref: ref, className: clsx(s.Action, className), ...restProps }));
+export const Card = CardRoot;
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+Card.Action = CardAction;
+//# sourceMappingURL=Card.js.map

package/dist/es/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentProps,\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal\"\nimport s from \"./Card.module.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type CardVariant = \"outline\" | \"solid\" | \"ghost\"\nexport type CardSize = \"sm\" | \"md\" | \"lg\"\n\ntype CardCommonProps = {\n  /**\n   * Visual variant of the card.\n   * - `\"outline\"` — 1px border, transparent background (default)\n   * - `\"solid\"` — muted background, no border\n   * - `\"ghost\"` — no border, no background (hover-only surface)\n   * @default \"outline\"\n   */\n  variant?: CardVariant\n  /**\n   * Padding scale.\n   * @default \"md\"\n   */\n  size?: CardSize\n  /**\n   * When true, adds hover/focus affordances. Automatic when `href` is provided.\n   * @default false\n   */\n  interactive?: boolean\n  /** Class applied to the card container */\n  className?: string\n}\n\nexport type CardDivProps = CardCommonProps &\n  Omit<HTMLAttributes<HTMLDivElement>, \"className\"> & {\n    ref?: Ref<HTMLDivElement>\n  }\n\nexport type CardLinkProps<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends ComponentType<any> | \"a\" = \"a\",\n> = CardCommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"className\" | \"href\"> & {\n    /** When provided, the Card renders as a link. */\n    href: string\n    /** Explicitly flag as external — otherwise detected from `href`. */\n    external?: boolean\n    /** Override the rendered link component (e.g. next/link). */\n    as?: T\n    ref?: Ref<HTMLAnchorElement>\n  } & ComponentProps<T>\n\nexport type CardProps = CardDivProps | CardLinkProps\n\nconst hasHref = (props: CardProps): props is CardLinkProps =>\n  typeof (props as CardLinkProps).href === \"string\"\n\nconst CardRoot = (props: CardProps): ReactNode => {\n  const {\n    variant = \"outline\",\n    size = \"md\",\n    interactive,\n    className,\n  } = props as CardCommonProps\n\n  const sharedProps = {\n    \"className\": clsx(s.Card, className),\n    \"data-variant\": variant,\n    \"data-size\": size,\n    \"data-interactive\":\n      (interactive || hasHref(props)) ? \"\" : undefined,\n  }\n\n  if (hasHref(props)) {\n    const {\n      variant: _v,\n      size: _s,\n      interactive: _i,\n      className: _c,\n      href,\n      external,\n      as: OverrideComponent,\n      ref,\n      ...restProps\n    } = props\n    const isExternal = external ?? /^https?:\\/\\//.test(href)\n    const DefaultLink = useLinkComponent()\n    const LinkComponent = OverrideComponent || (isExternal ? \"a\" : DefaultLink)\n    const linkAttrs = isExternal\n      ? { target: \"_blank\", rel: \"noopener noreferrer\", href }\n      : { href }\n\n    return (\n      <LinkComponent ref={ref} {...sharedProps} {...linkAttrs} {...restProps} />\n    )\n  }\n\n  const {\n    variant: _v,\n    size: _s,\n    interactive: _i,\n    className: _c,\n    ref,\n    ...restProps\n  } = props as CardDivProps\n\n  return <div ref={ref} {...sharedProps} {...restProps} />\n}\n\n/* ------------------------------------------------------------------ */\n/*  Compound parts                                                     */\n/* ------------------------------------------------------------------ */\n\nexport type CardSlotProps = HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }\n\nconst CardHeader = ({ className, ref, ...restProps }: CardSlotProps) => (\n  <div ref={ref} className={clsx(s.Header, className)} {...restProps} />\n)\n\nconst CardTitle = ({\n  className,\n  ref,\n  ...restProps\n}: HTMLAttributes<HTMLHeadingElement> & { ref?: Ref<HTMLHeadingElement> }) => (\n  <h3 ref={ref} className={clsx(s.Title, className)} {...restProps} />\n)\n\nconst CardDescription = ({\n  className,\n  ref,\n  ...restProps\n}: HTMLAttributes<HTMLParagraphElement> & { ref?: Ref<HTMLParagraphElement> }) => (\n  <p ref={ref} className={clsx(s.Description, className)} {...restProps} />\n)\n\nconst CardContent = ({ className, ref, ...restProps }: CardSlotProps) => (\n  <div ref={ref} className={clsx(s.Content, className)} {...restProps} />\n)\n\nconst CardFooter = ({ className, ref, ...restProps }: CardSlotProps) => (\n  <div ref={ref} className={clsx(s.Footer, className)} {...restProps} />\n)\n\nconst CardAction = ({ className, ref, ...restProps }: CardSlotProps) => (\n  <div ref={ref} className={clsx(s.Action, className)} {...restProps} />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Export — compound API                                              */\n/* ------------------------------------------------------------------ */\n\ntype CardComponent = typeof CardRoot & {\n  Header: typeof CardHeader\n  Title: typeof CardTitle\n  Description: typeof CardDescription\n  Content: typeof CardContent\n  Footer: typeof CardFooter\n  Action: typeof CardAction\n}\n\nexport const Card = CardRoot as CardComponent\nCard.Header = CardHeader\nCard.Title = CardTitle\nCard.Description = CardDescription\nCard.Content = CardContent\nCard.Footer = CardFooter\nCard.Action = CardAction\n"]}

package/dist/es/components/Card/Card.module.css

@@ -0,0 +1,125 @@
+@layer components {.Card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--card-padding);
+  border-radius: var(--card-radius);
+  background: var(--card-background);
+  color: var(--card-text-color);
+  box-shadow: 0 0 0 1px var(--card-border-color) inset;
+  font-size: var(--card-font-size);
+  line-height: var(--font-text-sm-line-height);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color, box-shadow, border-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* When used as a link, flatten anchor defaults */
+  .Card:where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* =============================================
+    Interactive
+  ============================================= */
+  .Card:where([data-interactive]) {
+    cursor: pointer;
+  }
+
+    .Card:where([data-interactive]):hover {
+      --card-background: var(--card-background-hover);
+      --card-border-color: var(--card-border-color-hover);
+    }
+
+    .Card:where([data-interactive]):focus-visible {
+      outline: 2px solid var(--color-ring);
+      outline-offset: 2px;
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Card:where([data-size="sm"]) {
+    --card-padding: calc(var(--spacing) * 4);
+    --card-gap: calc(var(--spacing) * 3);
+  }
+
+  .Card:where([data-size="md"]) {
+    --card-padding: calc(var(--spacing) * 5);
+    --card-gap: calc(var(--spacing) * 4);
+  }
+
+  .Card:where([data-size="lg"]) {
+    --card-padding: calc(var(--spacing) * 6);
+    --card-gap: calc(var(--spacing) * 5);
+  }
+
+  /* =============================================
+    Variants
+  ============================================= */
+  .Card:where([data-variant="outline"]) {
+    --card-background: var(--color-surface);
+    --card-border-color: var(--color-border);
+  }
+
+  .Card:where([data-variant="solid"]) {
+    --card-background: var(--color-surface-secondary);
+    --card-border-color: transparent;
+    box-shadow: none;
+  }
+
+  .Card:where([data-variant="ghost"]) {
+    --card-background: transparent;
+    --card-border-color: transparent;
+    box-shadow: none;
+    padding: 0;
+  }/* ================================================
+  Header — stacked title + description
+================================================ */.Header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+}.Title {
+  margin: 0;
+  color: var(--card-title-color);
+  font-size: var(--card-title-font-size);
+  font-weight: var(--card-title-font-weight);
+  line-height: var(--font-heading-xs-line-height);
+  letter-spacing: var(--font-heading-xs-tracking);
+  text-wrap: balance;
+}.Description {
+  margin: 0;
+  color: var(--card-description-color);
+  font-size: var(--card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-wrap: pretty;
+}/* ================================================
+  Content — primary body
+================================================ */.Content {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 3);
+  min-width: 0;
+}/* ================================================
+  Footer — aligned actions
+================================================ */.Footer {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  min-width: 0;
+  margin-top: calc(var(--spacing) * 3);
+}/* ================================================
+  Action — top-right slot in Header
+================================================ */.Action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+}
+}

package/dist/es/components/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, } from "./Card";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,GAKL,MAAM,QAAQ,CAAA","sourcesContent":["export {\n  Card,\n  type CardProps,\n  type CardSlotProps,\n  type CardVariant,\n  type CardSize,\n} from \"./Card\"\n"]}

package/dist/es/components/EmptyMessage/EmptyMessage.module.css

@@ -53,10 +53,11 @@
     --badge-background-color: var(--color-background-danger-soft);
     --badge-text-color: var(--color-text-danger-soft);
   }.Title {
-  max-width: 90%;
   color: var(--color-text);
-  font-size: 16px;
+  font-size: var(--font-heading-xs-size);
   font-weight: var(--font-weight-semibold);
+  line-height: 1.25;
+  letter-spacing: var(--font-heading-xs-tracking);
   text-align: center;
   text-wrap: balance;
 }
@@ -68,13 +69,12 @@
   .Title:where([data-color="warning"]) {
     color: var(--color-text-warning);
   }.Description {
-  max-width: 90%;
   margin: 0;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  line-height: 1.45;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
   text-align: center;
-  text-wrap: balance;
+  text-wrap: pretty;
 }.ActionRow {
   margin-top: calc(var(--spacing) * 4);
 }

package/dist/es/components/Separator/Separator.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { Separator as RadixSeparator } from "radix-ui";
+import s from "./Separator.module.css";
+export const Separator = ({ orientation = "horizontal", decorative = true, className, ...restProps }) => {
+    return (_jsx(RadixSeparator.Root, { orientation: orientation, decorative: decorative, className: clsx(s.Separator, className), ...restProps }));
+};
+//# sourceMappingURL=Separator.js.map

package/dist/es/components/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAqBtC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,WAAW,GAAG,YAAY,EAC1B,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,OAAO,CACL,KAAC,cAAc,CAAC,IAAI,IAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Separator as RadixSeparator } from \"radix-ui\"\nimport s from \"./Separator.module.css\"\n\nexport type SeparatorProps = Omit<\n  ComponentProps<typeof RadixSeparator.Root>,\n  \"children\"\n> & {\n  /**\n   * Direction of the separator.\n   * @default horizontal\n   */\n  orientation?: \"horizontal\" | \"vertical\"\n  /**\n   * When `true`, the separator is ignored by assistive technologies.\n   * Leave `true` for purely visual dividers; set `false` when the separator\n   * conveys meaningful grouping (it will render with `role=\"separator\"`).\n   * @default true\n   */\n  decorative?: boolean\n  className?: string\n}\n\nexport const Separator = ({\n  orientation = \"horizontal\",\n  decorative = true,\n  className,\n  ...restProps\n}: SeparatorProps) => {\n  return (\n    <RadixSeparator.Root\n      orientation={orientation}\n      decorative={decorative}\n      className={clsx(s.Separator, className)}\n      {...restProps}\n    />\n  )\n}\n"]}

package/dist/es/components/Separator/Separator.module.css

@@ -0,0 +1,16 @@
+@layer components {.Separator {
+  flex-shrink: 0;
+  background: var(--separator-color);
+}
+
+  .Separator[data-orientation="horizontal"] {
+    width: 100%;
+    height: var(--separator-thickness);
+  }
+
+  .Separator[data-orientation="vertical"] {
+    width: var(--separator-thickness);
+    height: 100%;
+    min-height: 1em;
+  }
+}

package/dist/es/components/Separator/index.js

@@ -0,0 +1,2 @@
+export { Separator } from "./Separator";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA","sourcesContent":["export { Separator, type SeparatorProps } from \"./Separator\"\n"]}

package/dist/es/styles/variables-components.css

@@ -86,6 +86,27 @@
     --button-gap-lg: 6px;
     --button-font-weight: var(--font-weight-medium);
 
+    /* =============================================
+      Card
+    ============================================= */
+    --card-radius: var(--radius-xl);
+    --card-background: var(--color-surface);
+    --card-background-hover: var(--color-surface-secondary);
+    --card-border-color: var(--color-border);
+    --card-border-color-hover: var(--color-border-primary-outline-hover);
+    --card-text-color: var(--color-text);
+    --card-font-size: var(--font-text-sm-size);
+    --card-title-color: var(--color-text);
+    --card-title-font-size: var(--font-heading-xs-size);
+    --card-title-font-weight: var(--font-weight-semibold);
+    --card-description-color: var(--color-text-tertiary);
+    --card-description-font-size: var(--font-text-sm-size);
+
+    /* =============================================
+      Separator
+    ============================================= */
+    --separator-color: var(--color-border);
+    --separator-thickness: 1px;
 
     /* =============================================
       Checkbox

package/dist/types/components/Card/Card.d.ts

@@ -0,0 +1,62 @@
+import { type AnchorHTMLAttributes, type ComponentProps, type ComponentType, type HTMLAttributes, type ReactNode, type Ref } from "react";
+export type CardVariant = "outline" | "solid" | "ghost";
+export type CardSize = "sm" | "md" | "lg";
+type CardCommonProps = {
+    /**
+     * Visual variant of the card.
+     * - `"outline"` — 1px border, transparent background (default)
+     * - `"solid"` — muted background, no border
+     * - `"ghost"` — no border, no background (hover-only surface)
+     * @default "outline"
+     */
+    variant?: CardVariant;
+    /**
+     * Padding scale.
+     * @default "md"
+     */
+    size?: CardSize;
+    /**
+     * When true, adds hover/focus affordances. Automatic when `href` is provided.
+     * @default false
+     */
+    interactive?: boolean;
+    /** Class applied to the card container */
+    className?: string;
+};
+export type CardDivProps = CardCommonProps & Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export type CardLinkProps<T extends ComponentType<any> | "a" = "a"> = CardCommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "href"> & {
+    /** When provided, the Card renders as a link. */
+    href: string;
+    /** Explicitly flag as external — otherwise detected from `href`. */
+    external?: boolean;
+    /** Override the rendered link component (e.g. next/link). */
+    as?: T;
+    ref?: Ref<HTMLAnchorElement>;
+} & ComponentProps<T>;
+export type CardProps = CardDivProps | CardLinkProps;
+declare const CardRoot: (props: CardProps) => ReactNode;
+export type CardSlotProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const CardHeader: ({ className, ref, ...restProps }: CardSlotProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardTitle: ({ className, ref, ...restProps }: HTMLAttributes<HTMLHeadingElement> & {
+    ref?: Ref<HTMLHeadingElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const CardDescription: ({ className, ref, ...restProps }: HTMLAttributes<HTMLParagraphElement> & {
+    ref?: Ref<HTMLParagraphElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const CardContent: ({ className, ref, ...restProps }: CardSlotProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardFooter: ({ className, ref, ...restProps }: CardSlotProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardAction: ({ className, ref, ...restProps }: CardSlotProps) => import("react/jsx-runtime").JSX.Element;
+type CardComponent = typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+    Action: typeof CardAction;
+};
+export declare const Card: CardComponent;
+export {};

package/dist/types/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card, type CardProps, type CardSlotProps, type CardVariant, type CardSize, } from "./Card";

package/dist/types/components/Separator/Separator.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps } from "react";
+import { Separator as RadixSeparator } from "radix-ui";
+export type SeparatorProps = Omit<ComponentProps<typeof RadixSeparator.Root>, "children"> & {
+    /**
+     * Direction of the separator.
+     * @default horizontal
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * When `true`, the separator is ignored by assistive technologies.
+     * Leave `true` for purely visual dividers; set `false` when the separator
+     * conveys meaningful grouping (it will render with `role="separator"`).
+     * @default true
+     */
+    decorative?: boolean;
+    className?: string;
+};
+export declare const Separator: ({ orientation, decorative, className, ...restProps }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from "./Separator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.98",
+  "version": "0.9.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",