@xingxingmofashu/ui 0.1.9 → 0.1.10

package/README.md

@@ -1,7 +1,7 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/surface-lab-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset=".github/assets/surface-lab-light.png">
-  <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src=".github/assets/surface-lab-light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
+  <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
 </picture>
 
 <div align="center">

package/dist/components/card.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/card";
 type Card = ComponentConfig<typeof theme>;
-type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
+type CardProps = Omit<React.ComponentProps<"div">, "style" | "title"> & {
     /** Classes merged into the root element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/menu.d.ts

@@ -3,9 +3,6 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/menu";
 type Menu = ComponentConfig<typeof theme>;
-type MenuItemUi = Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
-type MenuGroupUi = Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
-type MenuSeparatorUi = Partial<Pick<Menu["slots"], "separator">>;
 /** One action item in the menu. */
 type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "style" | "label" | "onClick"> & {
     type?: "item";
@@ -24,10 +21,10 @@ type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "chi
     /** Tailwind classes merged into the item. */
     className?: string;
     /** Tailwind classes for this item's internal slots. */
-    ui?: MenuItemUi;
+    ui?: Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A labelled group of menu items. */
-type MenuGroupProps<Value extends string = string> = {
+type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className" | "style"> & {
     type: "group";
     /** Group heading. */
     label: React.ReactNode;
@@ -36,22 +33,21 @@ type MenuGroupProps<Value extends string = string> = {
     /** Tailwind classes merged into the group. */
     className?: string;
     /** Tailwind classes for the group slots. */
-    ui?: MenuGroupUi;
+    ui?: Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A separator between menu items. */
-type MenuSeparatorProps = {
+type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation" | "style"> & {
     type: "separator";
     /** Tailwind classes merged into the separator. */
     className?: string;
     /** Tailwind classes for the separator slot. */
-    ui?: MenuSeparatorUi;
+    ui?: Partial<Pick<Menu["slots"], "separator">>;
 };
-type MenuEntry<Value extends string = string> = MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps;
 type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the menu. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Items, groups, and separators rendered by the menu. */
-    items: readonly MenuEntry<Value>[];
+    items: readonly (MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps)[];
     /** Tailwind classes merged into the popup. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
@@ -59,4 +55,4 @@ type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "childre
 };
 declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: MenuProps<Value>): React.JSX.Element;
 export { Menu };
-export type { MenuEntry, MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };
+export type { MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };

package/dist/components/menu.mjs

@@ -152,12 +152,15 @@ function MenuGroup({
   className,
   ui,
   label,
-  items
+  items,
+  type: _type,
+  ...props
 }) {
   const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIMenu.Group,
     {
+      ...props,
       "data-slot": "group",
       className: cn(styles.group(), ui?.group, className)
     },
@@ -184,11 +187,17 @@ function MenuGroup({
     ))
   );
 }
-function MenuSeparator({ className, ui }) {
+function MenuSeparator({
+  className,
+  ui,
+  type: _type,
+  ...props
+}) {
   const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIMenu.Separator,
     {
+      ...props,
       "data-slot": "separator",
       className: cn(styles.separator(), ui?.separator, className)
     }

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { Field, type FieldProps } from "./components/field";
 export { Fieldset, type FieldsetProps } from "./components/fieldset";
 export { Form, type FormProps } from "./components/form";
 export { Input, type InputProps } from "./components/input";
-export { Menu, type MenuEntry, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
+export { Menu, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
 export { Popover, type PopoverProps } from "./components/popover";
 export { Progress, type ProgressProps } from "./components/progress";
 export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/radio-group";

package/dist/theme/alert-dialog.mjs

@@ -7,9 +7,9 @@ export default tv({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
       "motion-reduce:transition-none"
     ],
-    viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
+    viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/card.mjs

@@ -7,7 +7,7 @@ export default tv({
     ],
     glass: [
       "ui-glass ui-glass-inner ui-glass-highlight",
-      "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[2rem]"
+      "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     layout: [

package/dist/theme/dialog.mjs

@@ -7,9 +7,9 @@ export default tv({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
       "motion-reduce:transition-none"
     ],
-    viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
+    viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/tabs.mjs

@@ -50,7 +50,7 @@ export default tv({
       "text-[length:var(--ui-tabs-panel-font-size)]",
       "transition-[opacity,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-1 data-[starting-style]:opacity-0",
-      "data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
+      "data-[ending-style]:pointer-events-none data-[ending-style]:absolute data-[ending-style]:inset-x-0 data-[ending-style]:top-0 data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
       "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus"
     ],
     panelContent: "leading-relaxed text-ui-ink/70"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
@@ -80,6 +80,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.64.1",
+    "@release-it/conventional-changelog": "12.0.2",
     "@tailwindcss/node": "4.3.3",
     "@testing-library/dom": "10.4.2",
     "@testing-library/jest-dom": "7.0.1",
@@ -91,6 +92,7 @@
     "husky": "9.1.7",
     "jsdom": "30.1.3",
     "oxlint": "1.90.0",
+    "release-it": "21.1.2",
     "tailwindcss": "4.3.3",
     "typescript": "5.9.3",
     "unbuild": "3.6.1",
@@ -115,6 +117,7 @@
     "docs:typecheck": "pnpm --filter @xingxingmofashu/docs typecheck",
     "playground:dev": "pnpm --filter @xingxingmofashu/playground dev",
     "playground:build": "pnpm --filter @xingxingmofashu/playground build",
-    "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck"
+    "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck",
+    "release": "release-it"
   }
 }