@seed-design/react 0.1.13 → 0.1.14

package/lib/components/Badge/Badge.cjs

@@ -3,11 +3,19 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
 const reactPrimitive = require('@seed-design/react-primitive');
 const badge = require('@seed-design/css/recipes/badge');
-const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const React = require('react');
+const clsx = require('clsx');
 
-const { withContext } = createRecipeContext.createRecipeContext(badge.badge);
-const Badge = withContext(reactPrimitive.Primitive.span);
+const Badge = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [variantProps, restProps] = badge.badge.splitVariantProps(props);
+    const { root, label } = badge.badge(variantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { className: clsx(root, className), ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { className: label, children }) });
+  }
+);
+Badge.displayName = "Badge";
 
 exports.Badge = Badge;

package/lib/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,UACf,SAAQ,iBAAiB,EACvB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,KAAK,oFAA2D,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,UACf,SAAQ,iBAAiB,EACvB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,KAAK,oFAWjB,CAAC"}

package/lib/components/Badge/Badge.js

@@ -1,9 +1,17 @@
 'use client';
+import { jsx } from 'react/jsx-runtime';
 import { Primitive } from '@seed-design/react-primitive';
 import { badge } from '@seed-design/css/recipes/badge';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
 
-const { withContext } = createRecipeContext(badge);
-const Badge = withContext(Primitive.span);
+const Badge = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [variantProps, restProps] = badge.splitVariantProps(props);
+    const { root, label } = badge(variantProps);
+    return /* @__PURE__ */ jsx(Primitive.span, { className: clsx(root, className), ...restProps, ref, children: /* @__PURE__ */ jsx(Primitive.span, { className: label, children }) });
+  }
+);
+Badge.displayName = "Badge";
 
 export { Badge };

package/lib/components/InlineBanner/InlineBanner.d.ts

@@ -2,22 +2,58 @@ import { InlineBannerVariantProps } from '@seed-design/css/recipes/inline-banner
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { DismissibleRootProps } from '../private/useDismissible';
 import type * as React from "react";
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerRootProps extends InlineBannerVariantProps, DismissibleRootProps {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerRoot: React.ForwardRefExoticComponent<InlineBannerRootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerContent: React.ForwardRefExoticComponent<InlineBannerContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerTitle: React.ForwardRefExoticComponent<InlineBannerTitleProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerDescription: React.ForwardRefExoticComponent<InlineBannerDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerLinkProps extends PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerLink: React.ForwardRefExoticComponent<InlineBannerLinkProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerCloseButtonProps extends PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export declare const InlineBannerCloseButton: React.ForwardRefExoticComponent<InlineBannerCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=InlineBanner.d.ts.map

package/lib/components/InlineBanner/InlineBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../src/components/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAInC,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB,EAAE,oBAAoB;CAAG;AAEhG,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,iBAAiB,gGAG7B,CAAC;AAEF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,uBAAuB,sGAGnC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,iGAG5B,CAAC;AAEF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,uBAAuB,wGAGnC,CAAC"}
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../src/components/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAInC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB,EAAE,oBAAoB;CAAG;AAEhG;;GAEG;AACH,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C;;GAEG;AACH,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,gGAG7B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sGAGnC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD;;GAEG;AACH,eAAO,MAAM,gBAAgB,iGAG5B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD;;GAEG;AACH,eAAO,MAAM,uBAAuB,wGAGnC,CAAC"}

package/lib/components/PageBanner/PageBanner.cjs

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const pageBanner = require('@seed-design/css/recipes/page-banner');
+const reactPrimitive = require('@seed-design/react-primitive');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const useDismissible = require('../private/useDismissible.cjs');
+
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(pageBanner.pageBanner);
+const PageBannerRoot = withProvider(
+  useDismissible.DismissibleRoot,
+  "root"
+);
+const PageBannerTextContent = withContext(
+  reactPrimitive.Primitive.div,
+  "textContent"
+);
+const PageBannerTitle = withContext(
+  reactPrimitive.Primitive.span,
+  "title"
+);
+const PageBannerDescription = withContext(
+  reactPrimitive.Primitive.span,
+  "description"
+);
+const PageBannerButton = withContext(
+  reactPrimitive.Primitive.button,
+  "button"
+);
+const PageBannerCloseButton = withContext(
+  useDismissible.DismissibleCloseButton,
+  "closeButton"
+);
+
+exports.PageBannerButton = PageBannerButton;
+exports.PageBannerCloseButton = PageBannerCloseButton;
+exports.PageBannerDescription = PageBannerDescription;
+exports.PageBannerRoot = PageBannerRoot;
+exports.PageBannerTextContent = PageBannerTextContent;
+exports.PageBannerTitle = PageBannerTitle;

package/lib/components/PageBanner/PageBanner.d.ts

@@ -0,0 +1,23 @@
+import { PageBannerVariantProps } from '@seed-design/css/recipes/page-banner';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { DismissibleRootProps } from '../private/useDismissible';
+import type * as React from "react";
+export interface PageBannerRootProps extends PageBannerVariantProps, DismissibleRootProps {
+}
+export declare const PageBannerRoot: React.ForwardRefExoticComponent<PageBannerRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface PageBannerTextContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const PageBannerTextContent: React.ForwardRefExoticComponent<PageBannerTextContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface PageBannerTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const PageBannerTitle: React.ForwardRefExoticComponent<PageBannerTitleProps & React.RefAttributes<HTMLSpanElement>>;
+export interface PageBannerDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const PageBannerDescription: React.ForwardRefExoticComponent<PageBannerDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+export interface PageBannerButtonProps extends PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare const PageBannerButton: React.ForwardRefExoticComponent<PageBannerButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface PageBannerCloseButtonProps extends PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare const PageBannerCloseButton: React.ForwardRefExoticComponent<PageBannerCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=PageBanner.d.ts.map

package/lib/components/PageBanner/PageBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAInC,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,oBAAoB;CAAG;AAE5F,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAG3B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,qBAAqB,oGAGjC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,iGAG5B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,qBAAqB,sGAGjC,CAAC"}

package/lib/components/PageBanner/PageBanner.js

@@ -0,0 +1,33 @@
+'use client';
+import { pageBanner } from '@seed-design/css/recipes/page-banner';
+import { Primitive } from '@seed-design/react-primitive';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { DismissibleCloseButton, DismissibleRoot } from '../private/useDismissible.js';
+
+const { withContext, withProvider } = createSlotRecipeContext(pageBanner);
+const PageBannerRoot = withProvider(
+  DismissibleRoot,
+  "root"
+);
+const PageBannerTextContent = withContext(
+  Primitive.div,
+  "textContent"
+);
+const PageBannerTitle = withContext(
+  Primitive.span,
+  "title"
+);
+const PageBannerDescription = withContext(
+  Primitive.span,
+  "description"
+);
+const PageBannerButton = withContext(
+  Primitive.button,
+  "button"
+);
+const PageBannerCloseButton = withContext(
+  DismissibleCloseButton,
+  "closeButton"
+);
+
+export { PageBannerButton, PageBannerCloseButton, PageBannerDescription, PageBannerRoot, PageBannerTextContent, PageBannerTitle };

package/lib/components/PageBanner/PageBanner.namespace.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const PageBanner = require('./PageBanner.cjs');
+
+
+
+exports.Button = PageBanner.PageBannerButton;
+exports.CloseButton = PageBanner.PageBannerCloseButton;
+exports.Description = PageBanner.PageBannerDescription;
+exports.Root = PageBanner.PageBannerRoot;
+exports.TextContent = PageBanner.PageBannerTextContent;
+exports.Title = PageBanner.PageBannerTitle;

package/lib/components/PageBanner/PageBanner.namespace.d.ts

@@ -0,0 +1,2 @@
+export { PageBannerCloseButton as CloseButton, PageBannerTextContent as TextContent, PageBannerDescription as Description, PageBannerButton as Button, PageBannerRoot as Root, PageBannerTitle as Title, type PageBannerCloseButtonProps as CloseButtonProps, type PageBannerTextContentProps as TextContentProps, type PageBannerDescriptionProps as DescriptionProps, type PageBannerButtonProps as ButtonProps, type PageBannerRootProps as RootProps, type PageBannerTitleProps as TitleProps, } from './PageBanner';
+//# sourceMappingURL=PageBanner.namespace.d.ts.map

package/lib/components/PageBanner/PageBanner.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,IAAI,WAAW,EACpC,qBAAqB,IAAI,WAAW,EACpC,qBAAqB,IAAI,WAAW,EACpC,gBAAgB,IAAI,MAAM,EAC1B,cAAc,IAAI,IAAI,EACtB,eAAe,IAAI,KAAK,EACxB,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,qBAAqB,IAAI,WAAW,EACzC,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,oBAAoB,IAAI,UAAU,GACxC,MAAM,cAAc,CAAC"}

package/lib/components/PageBanner/PageBanner.namespace.js

@@ -0,0 +1 @@
+export { PageBannerButton as Button, PageBannerCloseButton as CloseButton, PageBannerDescription as Description, PageBannerRoot as Root, PageBannerTextContent as TextContent, PageBannerTitle as Title } from './PageBanner.js';

package/lib/components/PageBanner/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const PageBanner = require('./PageBanner.cjs');
+const PageBanner_namespace = require('./PageBanner.namespace.cjs');
+
+
+
+exports.PageBannerButton = PageBanner.PageBannerButton;
+exports.PageBannerCloseButton = PageBanner.PageBannerCloseButton;
+exports.PageBannerDescription = PageBanner.PageBannerDescription;
+exports.PageBannerRoot = PageBanner.PageBannerRoot;
+exports.PageBannerTextContent = PageBanner.PageBannerTextContent;
+exports.PageBannerTitle = PageBanner.PageBannerTitle;
+exports.PageBanner = PageBanner_namespace;

package/lib/components/PageBanner/index.d.ts

@@ -0,0 +1,3 @@
+export { PageBannerCloseButton, PageBannerTextContent, PageBannerDescription, PageBannerButton, PageBannerRoot, PageBannerTitle, type PageBannerCloseButtonProps, type PageBannerTextContentProps, type PageBannerDescriptionProps, type PageBannerButtonProps, type PageBannerRootProps, type PageBannerTitleProps, } from './PageBanner';
+export * as PageBanner from './PageBanner.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PageBanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}

package/lib/components/PageBanner/index.js

@@ -0,0 +1,3 @@
+export { PageBannerButton, PageBannerCloseButton, PageBannerDescription, PageBannerRoot, PageBannerTextContent, PageBannerTitle } from './PageBanner.js';
+import * as PageBanner_namespace from './PageBanner.namespace.js';
+export { PageBanner_namespace as PageBanner };

package/lib/components/index.cjs

@@ -53,6 +53,8 @@ const MannerTempBadge = require('./MannerTempBadge/MannerTempBadge.cjs');
 const MenuSheet = require('./MenuSheet/MenuSheet.cjs');
 const MenuSheet_namespace = require('./MenuSheet/MenuSheet.namespace.cjs');
 const NotificationBadge = require('./NotificationBadge/NotificationBadge.cjs');
+const PageBanner = require('./PageBanner/PageBanner.cjs');
+const PageBanner_namespace = require('./PageBanner/PageBanner.namespace.cjs');
 const reactPortal = require('@seed-design/react-portal');
 const ProgressCircle = require('./ProgressCircle/ProgressCircle.cjs');
 const ProgressCircle_namespace = require('./ProgressCircle/ProgressCircle.namespace.cjs');
@@ -230,6 +232,13 @@ exports.MenuSheetTrigger = MenuSheet.MenuSheetTrigger;
 exports.MenuSheet = MenuSheet_namespace;
 exports.NotificationBadge = NotificationBadge.NotificationBadge;
 exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
+exports.PageBannerButton = PageBanner.PageBannerButton;
+exports.PageBannerCloseButton = PageBanner.PageBannerCloseButton;
+exports.PageBannerDescription = PageBanner.PageBannerDescription;
+exports.PageBannerRoot = PageBanner.PageBannerRoot;
+exports.PageBannerTextContent = PageBanner.PageBannerTextContent;
+exports.PageBannerTitle = PageBanner.PageBannerTitle;
+exports.PageBanner = PageBanner_namespace;
 Object.defineProperty(exports, "Portal", {
 	enumerable: true,
 	get: () => reactPortal.Portal

package/lib/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './MannerTemp';
 export * from './MannerTempBadge';
 export * from './MenuSheet';
 export * from './NotificationBadge';
+export * from './PageBanner';
 export * from './Portal';
 export * from './ProgressCircle';
 export * from './PullToRefresh';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -63,6 +63,9 @@ export { MenuSheetBackdrop, MenuSheetCloseButton, MenuSheetContent, MenuSheetFoo
 import * as MenuSheet_namespace from './MenuSheet/MenuSheet.namespace.js';
 export { MenuSheet_namespace as MenuSheet };
 export { NotificationBadge, NotificationBadgePositioner } from './NotificationBadge/NotificationBadge.js';
+export { PageBannerButton, PageBannerCloseButton, PageBannerDescription, PageBannerRoot, PageBannerTextContent, PageBannerTitle } from './PageBanner/PageBanner.js';
+import * as PageBanner_namespace from './PageBanner/PageBanner.namespace.js';
+export { PageBanner_namespace as PageBanner };
 export { Portal } from '@seed-design/react-portal';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './ProgressCircle/ProgressCircle.namespace.js';

package/lib/index.cjs

@@ -53,6 +53,8 @@ const MannerTempBadge = require('./components/MannerTempBadge/MannerTempBadge.cj
 const MenuSheet = require('./components/MenuSheet/MenuSheet.cjs');
 const MenuSheet_namespace = require('./components/MenuSheet/MenuSheet.namespace.cjs');
 const NotificationBadge = require('./components/NotificationBadge/NotificationBadge.cjs');
+const PageBanner = require('./components/PageBanner/PageBanner.cjs');
+const PageBanner_namespace = require('./components/PageBanner/PageBanner.namespace.cjs');
 const reactPortal = require('@seed-design/react-portal');
 const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs');
 const ProgressCircle_namespace = require('./components/ProgressCircle/ProgressCircle.namespace.cjs');
@@ -230,6 +232,13 @@ exports.MenuSheetTrigger = MenuSheet.MenuSheetTrigger;
 exports.MenuSheet = MenuSheet_namespace;
 exports.NotificationBadge = NotificationBadge.NotificationBadge;
 exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
+exports.PageBannerButton = PageBanner.PageBannerButton;
+exports.PageBannerCloseButton = PageBanner.PageBannerCloseButton;
+exports.PageBannerDescription = PageBanner.PageBannerDescription;
+exports.PageBannerRoot = PageBanner.PageBannerRoot;
+exports.PageBannerTextContent = PageBanner.PageBannerTextContent;
+exports.PageBannerTitle = PageBanner.PageBannerTitle;
+exports.PageBanner = PageBanner_namespace;
 Object.defineProperty(exports, "Portal", {
 	enumerable: true,
 	get: () => reactPortal.Portal

package/lib/index.js

@@ -63,6 +63,9 @@ export { MenuSheetBackdrop, MenuSheetCloseButton, MenuSheetContent, MenuSheetFoo
 import * as MenuSheet_namespace from './components/MenuSheet/MenuSheet.namespace.js';
 export { MenuSheet_namespace as MenuSheet };
 export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
+export { PageBannerButton, PageBannerCloseButton, PageBannerDescription, PageBannerRoot, PageBannerTextContent, PageBannerTitle } from './components/PageBanner/PageBanner.js';
+import * as PageBanner_namespace from './components/PageBanner/PageBanner.namespace.js';
+export { PageBanner_namespace as PageBanner };
 export { Portal } from '@seed-design/react-portal';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './components/ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './components/ProgressCircle/ProgressCircle.namespace.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,12 +58,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.1.13",
+    "@seed-design/css": "0.1.14",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.1.13",
+    "@seed-design/css": "0.1.14",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/Badge/Badge.tsx

@@ -1,9 +1,8 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
 import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withContext } = createRecipeContext(badge);
+import { forwardRef } from "react";
+import clsx from "clsx";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +11,16 @@ export interface BadgeProps
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const Badge = withContext<HTMLSpanElement, BadgeProps>(Primitive.span);
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, children, ...props }, ref) => {
+    const [variantProps, restProps] = badge.splitVariantProps(props);
+    const { root, label } = badge(variantProps);
+
+    return (
+      <Primitive.span className={clsx(root, className)} {...restProps} ref={ref}>
+        <Primitive.span className={label}>{children}</Primitive.span>
+      </Primitive.span>
+    );
+  },
+);
+Badge.displayName = "Badge";

package/src/components/InlineBanner/InlineBanner.tsx

@@ -14,53 +14,89 @@ import {
 
 const { withContext, withProvider } = createSlotRecipeContext(inlineBanner);
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerRootProps extends InlineBannerVariantProps, DismissibleRootProps {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerRoot = withProvider<HTMLDivElement, InlineBannerRootProps>(
   DismissibleRoot,
   "root",
 );
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerContentProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerContent = withContext<HTMLDivElement, InlineBannerContentProps>(
   Primitive.div,
   "content",
 );
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerTitleProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerTitle = withContext<HTMLSpanElement, InlineBannerTitleProps>(
   Primitive.span,
   "title",
 );
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerDescriptionProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerDescription = withContext<HTMLSpanElement, InlineBannerDescriptionProps>(
   Primitive.span,
   "description",
 );
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerLinkProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerLink = withContext<HTMLButtonElement, InlineBannerLinkProps>(
   Primitive.button,
   "link",
 );
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export interface InlineBannerCloseButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `PageBanner` instead.
+ */
 export const InlineBannerCloseButton = withContext<HTMLButtonElement, InlineBannerCloseButtonProps>(
   DismissibleCloseButton,
   "closeButton",

package/src/components/PageBanner/PageBanner.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  PageBannerCloseButton as CloseButton,
+  PageBannerTextContent as TextContent,
+  PageBannerDescription as Description,
+  PageBannerButton as Button,
+  PageBannerRoot as Root,
+  PageBannerTitle as Title,
+  type PageBannerCloseButtonProps as CloseButtonProps,
+  type PageBannerTextContentProps as TextContentProps,
+  type PageBannerDescriptionProps as DescriptionProps,
+  type PageBannerButtonProps as ButtonProps,
+  type PageBannerRootProps as RootProps,
+  type PageBannerTitleProps as TitleProps,
+} from "./PageBanner";

package/src/components/PageBanner/PageBanner.tsx

@@ -0,0 +1,64 @@
+import type * as React from "react";
+
+import { pageBanner, type PageBannerVariantProps } from "@seed-design/css/recipes/page-banner";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import {
+  DismissibleCloseButton,
+  DismissibleRoot,
+  type DismissibleRootProps,
+} from "../private/useDismissible";
+
+const { withContext, withProvider } = createSlotRecipeContext(pageBanner);
+
+export interface PageBannerRootProps extends PageBannerVariantProps, DismissibleRootProps {}
+
+export const PageBannerRoot = withProvider<HTMLDivElement, PageBannerRootProps>(
+  DismissibleRoot,
+  "root",
+);
+
+export interface PageBannerTextContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const PageBannerTextContent = withContext<HTMLDivElement, PageBannerTextContentProps>(
+  Primitive.div,
+  "textContent",
+);
+
+export interface PageBannerTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const PageBannerTitle = withContext<HTMLSpanElement, PageBannerTitleProps>(
+  Primitive.span,
+  "title",
+);
+
+export interface PageBannerDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const PageBannerDescription = withContext<HTMLSpanElement, PageBannerDescriptionProps>(
+  Primitive.span,
+  "description",
+);
+
+export interface PageBannerButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const PageBannerButton = withContext<HTMLButtonElement, PageBannerButtonProps>(
+  Primitive.button,
+  "button",
+);
+
+export interface PageBannerCloseButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const PageBannerCloseButton = withContext<HTMLButtonElement, PageBannerCloseButtonProps>(
+  DismissibleCloseButton,
+  "closeButton",
+);

package/src/components/PageBanner/index.ts

@@ -0,0 +1,16 @@
+export {
+  PageBannerCloseButton,
+  PageBannerTextContent,
+  PageBannerDescription,
+  PageBannerButton,
+  PageBannerRoot,
+  PageBannerTitle,
+  type PageBannerCloseButtonProps,
+  type PageBannerTextContentProps,
+  type PageBannerDescriptionProps,
+  type PageBannerButtonProps,
+  type PageBannerRootProps,
+  type PageBannerTitleProps,
+} from "./PageBanner";
+
+export * as PageBanner from "./PageBanner.namespace";

package/src/components/index.ts

@@ -34,6 +34,7 @@ export * from "./MannerTemp";
 export * from "./MannerTempBadge";
 export * from "./MenuSheet";
 export * from "./NotificationBadge";
+export * from "./PageBanner";
 export * from "./Portal";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";