@liner-fe/prism 3.0.9 → 3.0.10

package/lib/index.css

@@ -1967,3 +1967,65 @@
   position: absolute;
   transform: translateX(-5.7%);
 }
+
+/* esbuild-sass-plugin:css-chunk:src/components/Badge/style.module.scss */
+._badge_f8fzb_1 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  box-sizing: border-box;
+  gap: var(--lp-sys-padding-component-50);
+}
+._s_f8fzb_10 {
+  padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
+  border-radius: var(--lp-sys-radius-xs);
+}
+._m_f8fzb_15 {
+  padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
+  border-radius: var(--lp-sys-radius-xs);
+}
+._l_f8fzb_20 {
+  padding: var(--lp-sys-padding-component-100) var(--lp-sys-padding-component-150);
+  border-radius: var(--lp-sys-radius-s);
+}
+._text_f8fzb_25 {
+  padding: 0 var(--lp-sys-padding-component-50);
+}
+._subtle_f8fzb_29 {
+  background: var(--neutral-fill-overlay-mid);
+}
+._outlined_f8fzb_33 {
+  background: var(--neutral-fill-opaque-lowest);
+  border: 1px solid var(--neutral-border-overlay-subtle);
+}
+._fill-primary_f8fzb_38 {
+  background: var(--brand-fill-low);
+}
+._fill-accent_f8fzb_42 {
+  background: var(--accent-fill-primary);
+}
+._inverse-primary_f8fzb_46 {
+  background: var(--brandinverse-fill-static-low);
+}
+._text-neutral_f8fzb_50 {
+  color: var(--neutral-label-primary);
+}
+._text-neutral-secondary_f8fzb_54 {
+  color: var(--neutral-label-secondary);
+}
+._text-primary_f8fzb_58 {
+  color: var(--brand-label-primary);
+}
+._text-primary-inverse_f8fzb_62 {
+  color: var(--brandinverse-label-static-primary);
+}
+._text-caution_f8fzb_66 {
+  color: var(--function-label-caution);
+}
+._text-error_f8fzb_70 {
+  color: var(--function-label-negative);
+}
+._text-accent_f8fzb_74 {
+  color: var(--accent-label-primary);
+}

package/lib/index.d.ts

@@ -631,4 +631,29 @@ interface TagProps extends Omit<IPropsNormalBold, 'type' | 'size' | 'weight'> {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLParagraphElement>>;
 
-export { type BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, Label, List, Loading, type LoadingLevelType, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Snackbar, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };
+type BadgeSize = 's' | 'm' | 'l';
+type BadgeIconProps = {
+    icon: IconComponentType;
+} & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
+type BadgeVariant = 'subtle' | 'outlined' | 'fill' | 'inverse';
+type BadgeColor = 'neutral' | 'neutral-secondary' | 'primary' | 'caution' | 'error' | 'accent';
+type BadgeVariantColorProps = {
+    variant?: 'fill';
+    color?: 'primary' | 'accent';
+} | {
+    variant: 'subtle' | 'outlined';
+    color?: Exclude<BadgeColor, 'accent'>;
+} | {
+    variant: 'inverse';
+    color?: 'primary';
+};
+type BadgeBaseProps = ComponentPropsWithoutRef<'span'> & {
+    size?: BadgeSize;
+    thick?: boolean;
+    leftIcon?: BadgeIconProps;
+    rightIcon?: BadgeIconProps;
+};
+type BadgeProps = BadgeBaseProps & BadgeVariantColorProps;
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, Label, List, Loading, type LoadingLevelType, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Snackbar, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };

package/lib/index.js

@@ -3538,7 +3538,156 @@ var CoachMark = Object.assign(CoachMarkRoot, {
   Content: CoachMarkContent,
   Portal: PopoverPrimitive4.Portal
 });
+
+// src/components/Badge/index.tsx
+import { forwardRef as forwardRef20 } from "react";
+
+// src/components/Badge/style.module.scss
+var style_module_default22 = {
+  "badge": "_badge_f8fzb_1",
+  "s": "_s_f8fzb_10",
+  "m": "_m_f8fzb_15",
+  "l": "_l_f8fzb_20",
+  "text": "_text_f8fzb_25",
+  "subtle": "_subtle_f8fzb_29",
+  "outlined": "_outlined_f8fzb_33",
+  "fill-primary": "_fill-primary_f8fzb_38",
+  "fill-accent": "_fill-accent_f8fzb_42",
+  "inverse-primary": "_inverse-primary_f8fzb_46",
+  "text-neutral": "_text-neutral_f8fzb_50",
+  "text-neutral-secondary": "_text-neutral-secondary_f8fzb_54",
+  "text-primary": "_text-primary_f8fzb_58",
+  "text-primary-inverse": "_text-primary-inverse_f8fzb_62",
+  "text-caution": "_text-caution_f8fzb_66",
+  "text-error": "_text-error_f8fzb_70",
+  "text-accent": "_text-accent_f8fzb_74"
+};
+
+// src/components/Badge/index.tsx
+import { cva as cva13 } from "cva";
+import clsx23 from "clsx";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var badgeSizeIconSizeMap = {
+  s: "xxs",
+  m: "xs",
+  l: "xs"
+};
+var badgeSizeTypoMap = {
+  s: ["lp-sys-typo-caption3-normal-regular", "lp-sys-typo-caption3-normal-medium"],
+  m: ["lp-sys-typo-caption2-normal-regular", "lp-sys-typo-caption2-normal-medium"],
+  l: ["lp-sys-typo-caption1-normal-regular", "lp-sys-typo-caption1-normal-medium"]
+};
+var badgeBase = cva13({
+  base: style_module_default22.badge,
+  variants: {
+    size: {
+      s: style_module_default22.s,
+      m: style_module_default22.m,
+      l: style_module_default22.l
+    }
+  }
+});
+function getBgClass(variant, color) {
+  if (variant === "subtle") return style_module_default22.subtle;
+  if (variant === "outlined") return style_module_default22.outlined;
+  if (variant === "fill") return color === "accent" ? style_module_default22["fill-accent"] : style_module_default22["fill-primary"];
+  return style_module_default22["inverse-primary"];
+}
+__name(getBgClass, "getBgClass");
+function getIconType(variant, color) {
+  if (variant === "inverse") return "brandinverse-label-static-primary";
+  switch (color) {
+    case "neutral":
+      return "neutral-label-primary";
+    case "neutral-secondary":
+      return "neutral-label-secondary";
+    case "primary":
+      return "brand-label-primary";
+    case "caution":
+      return "function-label-caution";
+    case "error":
+      return "function-label-negative";
+    case "accent":
+      return "accent-label-primary";
+    default:
+      return "neutral-label-primary";
+  }
+}
+__name(getIconType, "getIconType");
+function getTextClass(variant, color) {
+  if (variant === "inverse") return style_module_default22["text-primary-inverse"];
+  switch (color) {
+    case "neutral":
+      return style_module_default22["text-neutral"];
+    case "neutral-secondary":
+      return style_module_default22["text-neutral-secondary"];
+    case "primary":
+      return style_module_default22["text-primary"];
+    case "caution":
+      return style_module_default22["text-caution"];
+    case "error":
+      return style_module_default22["text-error"];
+    case "accent":
+      return style_module_default22["text-accent"];
+    default:
+      return style_module_default22["text-neutral"];
+  }
+}
+__name(getTextClass, "getTextClass");
+var Badge2 = forwardRef20(
+  ({
+    size = "s",
+    variant = "fill",
+    color = "primary",
+    thick = false,
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    ...rest
+  }, ref) => {
+    const iconSize = badgeSizeIconSizeMap[size];
+    const typoClass = badgeSizeTypoMap[size][+thick];
+    const resolvedVariant = variant;
+    const resolvedColor = color;
+    return /* @__PURE__ */ jsxs17(
+      "span",
+      {
+        ref,
+        className: clsx23(
+          badgeBase({ size }),
+          typoClass,
+          getBgClass(resolvedVariant, resolvedColor),
+          getTextClass(resolvedVariant, resolvedColor),
+          className
+        ),
+        ...rest,
+        children: [
+          !!leftIcon && /* @__PURE__ */ jsx31(
+            leftIcon.icon,
+            {
+              size: iconSize,
+              type: getIconType(resolvedVariant, resolvedColor),
+              ...leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: style_module_default22.text, children }),
+          !!rightIcon && /* @__PURE__ */ jsx31(
+            rightIcon.icon,
+            {
+              size: iconSize,
+              type: getIconType(resolvedVariant, resolvedColor),
+              ...rightIcon
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Badge2.displayName = "Badge";
 export {
+  Badge2 as Badge,
   Button,
   Caption,
   Checkbox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -16,10 +16,10 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "jotai": "^2.11.0",
-    "@liner-fe/design-token": "^3.0.1",
-    "@liner-fe/icon": "^1.0.1",
-    "@liner-fe/illust": "^1.0.0",
-    "@liner-fe/design-token-primitive": "^0.2.46"
+    "@liner-fe/design-token": "^3.0.2",
+    "@liner-fe/design-token-primitive": "^0.2.47",
+    "@liner-fe/icon": "^1.0.4",
+    "@liner-fe/illust": "^1.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",