@seed-design/react 0.0.7 → 0.0.8

package/lib/components/NotificationBadge/NotificationBadge.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const notificationBadge = require('@seed-design/css/recipes/notification-badge');
+const notificationBadgePositioner = require('@seed-design/css/recipes/notification-badge-positioner');
+const reactPrimitive = require('@seed-design/react-primitive');
+const clsx = require('clsx');
+const React = require('react');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const { withProvider, PropsProvider } = createRecipeContext.createRecipeContext(notificationBadge.notificationBadge);
+const NotificationBadge = withProvider(
+  reactPrimitive.Primitive.span
+);
+const NotificationBadgePositioner = React__namespace.forwardRef((props, ref) => {
+  const { attach, size, className, ...otherProps } = props;
+  const positionerClassName = notificationBadgePositioner.notificationBadgePositioner({ attach, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: React.useMemo(() => ({ size }), [size]), children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(positionerClassName, className), ...otherProps }) });
+});
+
+exports.NotificationBadge = NotificationBadge;
+exports.NotificationBadgePositioner = NotificationBadgePositioner;

package/lib/components/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,11 @@
+import { NotificationBadgeVariantProps } from '@seed-design/css/recipes/notification-badge';
+import { NotificationBadgePositionerVariantProps } from '@seed-design/css/recipes/notification-badge-positioner';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import * as React from "react";
+export interface NotificationBadgeProps extends NotificationBadgeVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export interface NotificationBadgePositionerProps extends NotificationBadgePositionerVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const NotificationBadgePositioner: React.ForwardRefExoticComponent<NotificationBadgePositionerProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=NotificationBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBadge/NotificationBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAEL,KAAK,uCAAuC,EAC7C,MAAM,wDAAwD,CAAC;AAChE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,iBAAiB,gGAE7B,CAAC;AAIF,MAAM,WAAW,gCACf,SAAQ,uCAAuC,EAC7C,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,2BAA2B,0GAYtC,CAAC"}

package/lib/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { notificationBadge } from '@seed-design/css/recipes/notification-badge';
+import { notificationBadgePositioner } from '@seed-design/css/recipes/notification-badge-positioner';
+import { Primitive } from '@seed-design/react-primitive';
+import clsx from 'clsx';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+
+const { withProvider, PropsProvider } = createRecipeContext(notificationBadge);
+const NotificationBadge = withProvider(
+  Primitive.span
+);
+const NotificationBadgePositioner = React.forwardRef((props, ref) => {
+  const { attach, size, className, ...otherProps } = props;
+  const positionerClassName = notificationBadgePositioner({ attach, size });
+  return /* @__PURE__ */ jsx(PropsProvider, { value: useMemo(() => ({ size }), [size]), children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(positionerClassName, className), ...otherProps }) });
+});
+
+export { NotificationBadge, NotificationBadgePositioner };

package/lib/components/NotificationBadge/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const NotificationBadge = require('./NotificationBadge.cjs');
+
+
+
+exports.NotificationBadge = NotificationBadge.NotificationBadge;
+exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;

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

@@ -0,0 +1,2 @@
+export { NotificationBadge, NotificationBadgePositioner, type NotificationBadgeProps, type NotificationBadgePositionerProps, } from './NotificationBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,2BAA2B,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,gCAAgC,GACtC,MAAM,qBAAqB,CAAC"}

package/lib/components/NotificationBadge/index.js

@@ -0,0 +1 @@
+export { NotificationBadge, NotificationBadgePositioner } from './NotificationBadge.js';

package/lib/components/Tabs/Tabs.cjs

@@ -2,26 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactPrimitive = require('@seed-design/react-primitive');
-const reactTabs = require('@seed-design/react-tabs');
 const tabs = require('@seed-design/css/recipes/tabs');
+const reactTabs = require('@seed-design/react-tabs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
-const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(tabs.tabs);
-const withStateProps = createWithStateProps.createWithStateProps([reactTabs.useTabsContext, reactTabs.useTabsTriggerContext], {
-  strict: false
-});
 const TabsRoot = withProvider(reactTabs.Tabs.Root, "root");
 const TabsList = withContext(reactTabs.Tabs.List, "list");
 const TabsTrigger = withContext(
   reactTabs.Tabs.Trigger,
   "trigger"
 );
-const TabsTriggerNotification = withContext(
-  withStateProps(reactPrimitive.Primitive.div),
-  "triggerNotification"
-);
 const TabsIndicator = withContext(
   reactTabs.Tabs.Indicator,
   "indicator"
@@ -46,4 +37,3 @@ exports.TabsIndicator = TabsIndicator;
 exports.TabsList = TabsList;
 exports.TabsRoot = TabsRoot;
 exports.TabsTrigger = TabsTrigger;
-exports.TabsTriggerNotification = TabsTriggerNotification;

package/lib/components/Tabs/Tabs.d.ts

@@ -1,29 +1,25 @@
-import { PrimitiveProps } from '@seed-design/react-primitive';
-import { Tabs as TabsPrimitive } from '@seed-design/react-tabs';
 import { TabsVariantProps } from '@seed-design/css/recipes/tabs';
-import { default as React } from 'react';
+import { Tabs as TabsPrimitive } from '@seed-design/react-tabs';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TabsRootProps extends TabsVariantProps, TabsPrimitive.RootProps {
 }
-export declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsRoot: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
 export interface TabsListProps extends TabsPrimitive.ListProps {
 }
-export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>>;
 export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
 }
-export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export interface TabsTriggerNotificationProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
-}
-export declare const TabsTriggerNotification: React.ForwardRefExoticComponent<TabsTriggerNotificationProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: ForwardRefExoticComponent<TabsTriggerProps & RefAttributes<HTMLButtonElement>>;
 export interface TabsIndicatorProps extends TabsPrimitive.IndicatorProps {
 }
-export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TabsIndicator: ForwardRefExoticComponent<TabsIndicatorProps & RefAttributes<HTMLSpanElement>>;
 export interface TabsContentProps extends TabsPrimitive.ContentProps {
 }
-export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TabsContent: ForwardRefExoticComponent<TabsContentProps & RefAttributes<HTMLSpanElement>>;
 export interface TabsCarouselProps extends TabsPrimitive.CarouselProps {
 }
-export declare const TabsCarousel: React.ForwardRefExoticComponent<TabsCarouselProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsCarousel: ForwardRefExoticComponent<TabsCarouselProps & RefAttributes<HTMLDivElement>>;
 export interface TabsCarouselCameraProps extends TabsPrimitive.CarouselCameraProps {
 }
-export declare const TabsCarouselCamera: React.ForwardRefExoticComponent<TabsCarouselCameraProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsCarouselCamera: ForwardRefExoticComponent<TabsCarouselCameraProps & RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,IAAI,IAAI,aAAa,EAGtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAG5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,aAAa,CAAC,SAAS;CAAG;AAEnF,eAAO,MAAM,QAAQ,sFAA0E,CAAC;AAIhG,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,SAAS;CAAG;AAEjE,eAAO,MAAM,QAAQ,sFAAyE,CAAC;AAI/F,MAAM,WAAW,gBAAiB,SAAQ,aAAa,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,WAAW,4FAGvB,CAAC;AAIF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,uBAAuB,qGAGnC,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,aAAa,CAAC,cAAc;CAAG;AAE3E,eAAO,MAAM,aAAa,4FAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,aAAa,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,WAAW,0FAGvB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,aAAa,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,YAAY,0FAGxB,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,aAAa,CAAC,mBAAmB;CAAG;AAErF,eAAO,MAAM,kBAAkB,gGAG9B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,aAAa,CAAC,SAAS;CAAG;AAEnF,eAAO,MAAM,QAAQ,0GAA0E,CAAC;AAIhG,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,SAAS;CAAG;AAEjE,eAAO,MAAM,QAAQ,0GAAyE,CAAC;AAI/F,MAAM,WAAW,gBAAiB,SAAQ,aAAa,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,WAAW,gHAGvB,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,aAAa,CAAC,cAAc;CAAG;AAE3E,eAAO,MAAM,aAAa,gHAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,aAAa,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,WAAW,8GAGvB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,aAAa,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,YAAY,8GAGxB,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,aAAa,CAAC,mBAAmB;CAAG;AAErF,eAAO,MAAM,kBAAkB,oHAG9B,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -1,23 +1,14 @@
-import { Primitive } from '@seed-design/react-primitive';
-import { Tabs, useTabsContext, useTabsTriggerContext } from '@seed-design/react-tabs';
 import { tabs } from '@seed-design/css/recipes/tabs';
+import { Tabs } from '@seed-design/react-tabs';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
-import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
-const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
-  strict: false
-});
 const TabsRoot = withProvider(Tabs.Root, "root");
 const TabsList = withContext(Tabs.List, "list");
 const TabsTrigger = withContext(
   Tabs.Trigger,
   "trigger"
 );
-const TabsTriggerNotification = withContext(
-  withStateProps(Primitive.div),
-  "triggerNotification"
-);
 const TabsIndicator = withContext(
   Tabs.Indicator,
   "indicator"
@@ -35,4 +26,4 @@ const TabsCarouselCamera = withContext(
   "carouselCamera"
 );
 
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification };
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger };

package/lib/components/Tabs/Tabs.namespace.cjs

@@ -13,4 +13,3 @@ exports.Indicator = Tabs.TabsIndicator;
 exports.List = Tabs.TabsList;
 exports.Root = Tabs.TabsRoot;
 exports.Trigger = Tabs.TabsTrigger;
-exports.TriggerNotification = Tabs.TabsTriggerNotification;

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

@@ -1,2 +1,2 @@
-export { TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsCarouselCamera as CarouselCamera, TabsCarousel as Carousel, TabsTrigger as Trigger, TabsTriggerNotification as TriggerNotification, type TabsContentProps as ContentProps, type TabsIndicatorProps as IndicatorProps, type TabsListProps as ListProps, type TabsRootProps as RootProps, type TabsCarouselCameraProps as CarouselCameraProps, type TabsCarouselProps as CarouselProps, type TabsTriggerNotificationProps as TriggerNotificationProps, type TabsTriggerProps as TriggerProps, } from './Tabs';
+export { TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsCarouselCamera as CarouselCamera, TabsCarousel as Carousel, TabsTrigger as Trigger, type TabsContentProps as ContentProps, type TabsIndicatorProps as IndicatorProps, type TabsListProps as ListProps, type TabsRootProps as RootProps, type TabsCarouselCameraProps as CarouselCameraProps, type TabsCarouselProps as CarouselProps, type TabsTriggerProps as TriggerProps, } from './Tabs';
 //# sourceMappingURL=Tabs.namespace.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,QAAQ,IAAI,IAAI,EAChB,kBAAkB,IAAI,cAAc,EACpC,YAAY,IAAI,QAAQ,EACxB,WAAW,IAAI,OAAO,EACtB,uBAAuB,IAAI,mBAAmB,EAC9C,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,4BAA4B,IAAI,wBAAwB,EAC7D,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"Tabs.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,QAAQ,IAAI,IAAI,EAChB,kBAAkB,IAAI,cAAc,EACpC,YAAY,IAAI,QAAQ,EACxB,WAAW,IAAI,OAAO,EACtB,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC"}

package/lib/components/Tabs/Tabs.namespace.js

@@ -1 +1 @@
-export { TabsCarousel as Carousel, TabsCarouselCamera as CarouselCamera, TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger, TabsTriggerNotification as TriggerNotification } from './Tabs.js';
+export { TabsCarousel as Carousel, TabsCarouselCamera as CarouselCamera, TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger } from './Tabs.js';

package/lib/components/Tabs/index.cjs

@@ -14,5 +14,4 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
-exports.TabsTriggerNotification = Tabs.TabsTriggerNotification;
 exports.Tabs = Tabs_namespace;

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

@@ -1,3 +1,3 @@
-export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsCarouselCamera, TabsCarousel, TabsTrigger, TabsTriggerNotification, type TabsContentProps, type TabsIndicatorProps, type TabsListProps, type TabsRootProps, type TabsCarouselCameraProps, type TabsCarouselProps, type TabsTriggerNotificationProps, type TabsTriggerProps, } from './Tabs';
+export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsCarouselCamera, TabsCarousel, TabsTrigger, type TabsContentProps, type TabsIndicatorProps, type TabsListProps, type TabsRootProps, type TabsCarouselCameraProps, type TabsCarouselProps, type TabsTriggerProps, } from './Tabs';
 export * as Tabs from './Tabs.namespace';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,4BAA4B,EACjC,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/Tabs/index.js

@@ -1,3 +1,3 @@
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification } from './Tabs.js';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './Tabs.js';
 import * as Tabs_namespace from './Tabs.namespace.js';
 export { Tabs_namespace as Tabs };

package/lib/components/index.cjs

@@ -41,6 +41,7 @@ const InlineBanner_namespace = require('./InlineBanner/InlineBanner.namespace.cj
 const LinkContent = require('./LinkContent/LinkContent.cjs');
 const LoadingIndicator = require('./LoadingIndicator/LoadingIndicator.cjs');
 const MannerTempBadge = require('./MannerTempBadge/MannerTempBadge.cjs');
+const NotificationBadge = require('./NotificationBadge/NotificationBadge.cjs');
 const ProgressCircle = require('./ProgressCircle/ProgressCircle.cjs');
 const ProgressCircle_namespace = require('./ProgressCircle/ProgressCircle.namespace.cjs');
 const PullToRefresh = require('./PullToRefresh/PullToRefresh.cjs');
@@ -186,6 +187,8 @@ exports.InlineBanner = InlineBanner_namespace;
 exports.LinkContent = LinkContent.LinkContent;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
+exports.NotificationBadge = NotificationBadge.NotificationBadge;
+exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
 exports.ProgressCircleRange = ProgressCircle.ProgressCircleRange;
 exports.ProgressCircleRoot = ProgressCircle.ProgressCircleRoot;
 exports.ProgressCircleTrack = ProgressCircle.ProgressCircleTrack;
@@ -248,7 +251,6 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
-exports.TabsTriggerNotification = Tabs.TabsTriggerNotification;
 exports.Tabs = Tabs_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;

package/lib/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './InlineBanner';
 export * from './LinkContent';
 export * from './LoadingIndicator';
 export * from './MannerTempBadge';
+export * from './NotificationBadge';
 export * from './ProgressCircle';
 export * from './PullToRefresh';
 export * from './ReactionButton';

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,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,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,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,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,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,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,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,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

@@ -48,6 +48,7 @@ export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './LinkContent/LinkContent.js';
 export { LoadingIndicator } from './LoadingIndicator/LoadingIndicator.js';
 export { MannerTempBadge } from './MannerTempBadge/MannerTempBadge.js';
+export { NotificationBadge, NotificationBadgePositioner } from './NotificationBadge/NotificationBadge.js';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './ProgressCircle/ProgressCircle.namespace.js';
 export { ProgressCircle_namespace as ProgressCircle };
@@ -74,7 +75,7 @@ export { Stack } from './Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './Switch/Switch.js';
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification } from './Tabs/Tabs.js';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './Tabs/Tabs.js';
 import * as Tabs_namespace from './Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './Text/Text.js';

package/lib/index.cjs

@@ -41,6 +41,7 @@ const InlineBanner_namespace = require('./components/InlineBanner/InlineBanner.n
 const LinkContent = require('./components/LinkContent/LinkContent.cjs');
 const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator.cjs');
 const MannerTempBadge = require('./components/MannerTempBadge/MannerTempBadge.cjs');
+const NotificationBadge = require('./components/NotificationBadge/NotificationBadge.cjs');
 const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs');
 const ProgressCircle_namespace = require('./components/ProgressCircle/ProgressCircle.namespace.cjs');
 const PullToRefresh = require('./components/PullToRefresh/PullToRefresh.cjs');
@@ -186,6 +187,8 @@ exports.InlineBanner = InlineBanner_namespace;
 exports.LinkContent = LinkContent.LinkContent;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
+exports.NotificationBadge = NotificationBadge.NotificationBadge;
+exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
 exports.ProgressCircleRange = ProgressCircle.ProgressCircleRange;
 exports.ProgressCircleRoot = ProgressCircle.ProgressCircleRoot;
 exports.ProgressCircleTrack = ProgressCircle.ProgressCircleTrack;
@@ -248,7 +251,6 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
-exports.TabsTriggerNotification = Tabs.TabsTriggerNotification;
 exports.Tabs = Tabs_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;

package/lib/index.js

@@ -48,6 +48,7 @@ export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './components/LinkContent/LinkContent.js';
 export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator.js';
 export { MannerTempBadge } from './components/MannerTempBadge/MannerTempBadge.js';
+export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './components/ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './components/ProgressCircle/ProgressCircle.namespace.js';
 export { ProgressCircle_namespace as ProgressCircle };
@@ -74,7 +75,7 @@ export { Stack } from './components/Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './components/Switch/Switch.js';
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification } from './components/Tabs/Tabs.js';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './components/Tabs/Tabs.js';
 import * as Tabs_namespace from './components/Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './components/Text/Text.js';

package/lib/utils/createWithStateProps.cjs

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 
 function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+  const strict = true;
   return function withStateProps(Component) {
     const Node = React.forwardRef((props, ref) => {
       const stateProps = {};

package/lib/utils/createWithStateProps.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
 function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+  const strict = true;
   return function withStateProps(Component) {
     const Node = forwardRef((props, ref) => {
       const stateProps = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -55,12 +55,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.7",
+    "@seed-design/css": "0.0.8",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.7",
+    "@seed-design/css": "0.0.8",
     "globby": "^14.1.0",
     "vite": "^6.1.1",
     "vite-plugin-dts": "^4.5.0"

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -0,0 +1,47 @@
+import {
+  notificationBadge,
+  type NotificationBadgeVariantProps,
+} from "@seed-design/css/recipes/notification-badge";
+import {
+  notificationBadgePositioner,
+  type NotificationBadgePositionerVariantProps,
+} from "@seed-design/css/recipes/notification-badge-positioner";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { useMemo } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withProvider, PropsProvider } = createRecipeContext(notificationBadge);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NotificationBadgeProps
+  extends NotificationBadgeVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NotificationBadge = withProvider<HTMLSpanElement, NotificationBadgeProps>(
+  Primitive.span,
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NotificationBadgePositionerProps
+  extends NotificationBadgePositionerVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NotificationBadgePositioner = React.forwardRef<
+  HTMLSpanElement,
+  NotificationBadgePositionerProps
+>((props, ref) => {
+  const { attach, size, className, ...otherProps } = props;
+  const positionerClassName = notificationBadgePositioner({ attach, size });
+
+  return (
+    <PropsProvider value={useMemo(() => ({ size }), [size])}>
+      <Primitive.span ref={ref} className={clsx(positionerClassName, className)} {...otherProps} />
+    </PropsProvider>
+  );
+});

package/src/components/NotificationBadge/index.ts

@@ -0,0 +1,6 @@
+export {
+  NotificationBadge,
+  NotificationBadgePositioner,
+  type NotificationBadgeProps,
+  type NotificationBadgePositionerProps,
+} from "./NotificationBadge";

package/src/components/Tabs/Tabs.namespace.ts

@@ -6,13 +6,11 @@ export {
   TabsCarouselCamera as CarouselCamera,
   TabsCarousel as Carousel,
   TabsTrigger as Trigger,
-  TabsTriggerNotification as TriggerNotification,
   type TabsContentProps as ContentProps,
   type TabsIndicatorProps as IndicatorProps,
   type TabsListProps as ListProps,
   type TabsRootProps as RootProps,
   type TabsCarouselCameraProps as CarouselCameraProps,
   type TabsCarouselProps as CarouselProps,
-  type TabsTriggerNotificationProps as TriggerNotificationProps,
   type TabsTriggerProps as TriggerProps,
 } from "./Tabs";

package/src/components/Tabs/Tabs.tsx

@@ -1,18 +1,8 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import {
-  Tabs as TabsPrimitive,
-  useTabsContext,
-  useTabsTriggerContext,
-} from "@seed-design/react-tabs";
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
+import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { createWithStateProps } from "../../utils/createWithStateProps";
-import type React from "react";
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
-const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
-  strict: false,
-});
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -37,17 +27,6 @@ export const TabsTrigger = withContext<HTMLButtonElement, TabsTriggerProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface TabsTriggerNotificationProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const TabsTriggerNotification = withContext<HTMLDivElement, TabsTriggerNotificationProps>(
-  withStateProps(Primitive.div),
-  "triggerNotification",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TabsIndicatorProps extends TabsPrimitive.IndicatorProps {}
 
 export const TabsIndicator = withContext<HTMLSpanElement, TabsIndicatorProps>(

package/src/components/Tabs/index.ts

@@ -6,14 +6,12 @@ export {
   TabsCarouselCamera,
   TabsCarousel,
   TabsTrigger,
-  TabsTriggerNotification,
   type TabsContentProps,
   type TabsIndicatorProps,
   type TabsListProps,
   type TabsRootProps,
   type TabsCarouselCameraProps,
   type TabsCarouselProps,
-  type TabsTriggerNotificationProps,
   type TabsTriggerProps,
 } from "./Tabs";
 

package/src/components/index.ts

@@ -26,6 +26,7 @@ export * from "./InlineBanner";
 export * from "./LinkContent";
 export * from "./LoadingIndicator";
 export * from "./MannerTempBadge";
+export * from "./NotificationBadge";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
 export * from "./ReactionButton";