@seed-design/lynx-css 0.9.3 → 0.10.1

package/recipes/manner-temp-badge.mjs

@@ -0,0 +1,51 @@
+import './manner-temp-badge.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const mannerTempBadgeSlotNames = [
+  [
+    "root",
+    "seed-manner-temp-badge__root"
+  ],
+  [
+    "label",
+    "seed-manner-temp-badge__label"
+  ]
+];
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempBadgeVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempBadgeVariantKeys = Object.keys(mannerTempBadgeVariantMap);
+
+export function mannerTempBadge(props) {
+  return Object.fromEntries(
+    mannerTempBadgeSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(mannerTempBadge, { splitVariantProps: (props) => splitVariantProps(props, mannerTempBadgeVariantMap) });
+
+// @recipe(seed): manner-temp-badge

package/recipes/manner-temp.css

@@ -0,0 +1,52 @@
+.seed-manner-temp__root {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--seed-dimension-x1)
+}
+.seed-manner-temp__label {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-manner-temp__emote {
+    width: var(--seed-dimension-x8);
+    height: var(--seed-dimension-x8);
+    margin-left: calc(var(--seed-dimension-x1) * -1);
+    margin-right: calc(var(--seed-dimension-x1) * -1);
+    margin-top: calc(var(--seed-dimension-x1) * -1);
+    margin-bottom: calc(var(--seed-dimension-x1) * -1);
+    flex-shrink: 0
+}
+.seed-manner-temp__label--level_l1 {
+    color: var(--seed-color-manner-temp-l1-text)
+}
+.seed-manner-temp__label--level_l2 {
+    color: var(--seed-color-manner-temp-l2-text)
+}
+.seed-manner-temp__label--level_l3 {
+    color: var(--seed-color-manner-temp-l3-text)
+}
+.seed-manner-temp__label--level_l4 {
+    color: var(--seed-color-manner-temp-l4-text)
+}
+.seed-manner-temp__label--level_l5 {
+    color: var(--seed-color-manner-temp-l5-text)
+}
+.seed-manner-temp__label--level_l6 {
+    color: var(--seed-color-manner-temp-l6-text)
+}
+.seed-manner-temp__label--level_l7 {
+    color: var(--seed-color-manner-temp-l7-text)
+}
+.seed-manner-temp__label--level_l8 {
+    color: var(--seed-color-manner-temp-l8-text)
+}
+.seed-manner-temp__label--level_l9 {
+    color: var(--seed-color-manner-temp-l9-text)
+}
+.seed-manner-temp__label--level_l10 {
+    color: var(--seed-color-manner-temp-l10-text)
+}

package/recipes/manner-temp.d.ts

@@ -0,0 +1,24 @@
+declare interface MannerTempVariant {
+  /**
+  * @default "l1"
+  */
+  level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "l8" | "l9" | "l10";
+}
+
+declare type MannerTempVariantMap = {
+  [key in keyof MannerTempVariant]: Array<MannerTempVariant[key]>;
+};
+
+export declare type MannerTempVariantProps = Partial<MannerTempVariant>;
+
+export declare type MannerTempSlotName = "root" | "label" | "emote";
+
+export declare const mannerTempVariantMap: MannerTempVariantMap;
+
+export declare const mannerTemp: ((
+  props?: MannerTempVariantProps,
+) => Record<MannerTempSlotName, string>) & {
+  splitVariantProps: <T extends MannerTempVariantProps>(
+    props: T,
+  ) => [MannerTempVariantProps, Omit<T, keyof MannerTempVariantProps>];
+}

package/recipes/manner-temp.mjs

@@ -0,0 +1,55 @@
+import './manner-temp.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const mannerTempSlotNames = [
+  [
+    "root",
+    "seed-manner-temp__root"
+  ],
+  [
+    "label",
+    "seed-manner-temp__label"
+  ],
+  [
+    "emote",
+    "seed-manner-temp__emote"
+  ]
+];
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempVariantKeys = Object.keys(mannerTempVariantMap);
+
+export function mannerTemp(props) {
+  return Object.fromEntries(
+    mannerTempSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(mannerTemp, { splitVariantProps: (props) => splitVariantProps(props, mannerTempVariantMap) });
+
+// @recipe(seed): manner-temp

package/recipes/notification-badge-positioner.css

@@ -0,0 +1,29 @@
+.seed-notification-badge-positioner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: max-content
+}
+.seed-notification-badge-positioner--attach_icon {
+    transform: translate(100%, -100%)
+}
+.seed-notification-badge-positioner--attach_text {
+    transform: translate(100%, 0%)
+}
+.seed-notification-badge-positioner--size_small {}
+.seed-notification-badge-positioner--size_large {}
+.seed-notification-badge-positioner--size_large-attach_icon {
+    top: 14px;
+    right: 8px
+}
+.seed-notification-badge-positioner--size_small-attach_icon {
+    top: 7px;
+    right: 7px
+}
+.seed-notification-badge-positioner--size_large-attach_text {
+    right: calc(-1 * 2px)
+}
+.seed-notification-badge-positioner--size_small-attach_text {
+    right: calc(-1 * 2px)
+}

package/recipes/notification-badge-positioner.d.ts

@@ -0,0 +1,26 @@
+declare interface NotificationBadgePositionerVariant {
+  /**
+  * @default "icon"
+  */
+  attach: "icon" | "text";
+/**
+  * @default "large"
+  */
+  size: "small" | "large";
+}
+
+declare type NotificationBadgePositionerVariantMap = {
+  [key in keyof NotificationBadgePositionerVariant]: Array<NotificationBadgePositionerVariant[key]>;
+};
+
+export declare type NotificationBadgePositionerVariantProps = Partial<NotificationBadgePositionerVariant>;
+
+export declare const notificationBadgePositionerVariantMap: NotificationBadgePositionerVariantMap;
+
+export declare const notificationBadgePositioner: ((
+  props?: NotificationBadgePositionerVariantProps,
+) => string) & {
+  splitVariantProps: <T extends NotificationBadgePositionerVariantProps>(
+    props: T,
+  ) => [NotificationBadgePositionerVariantProps, Omit<T, keyof NotificationBadgePositionerVariantProps>];
+}

package/recipes/notification-badge-positioner.mjs

@@ -0,0 +1,51 @@
+import './notification-badge-positioner.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "size": "large",
+  "attach": "icon"
+};
+
+const compoundVariants = [
+  {
+    "size": "large",
+    "attach": "icon"
+  },
+  {
+    "size": "small",
+    "attach": "icon"
+  },
+  {
+    "size": "large",
+    "attach": "text"
+  },
+  {
+    "size": "small",
+    "attach": "text"
+  }
+];
+
+export const notificationBadgePositionerVariantMap = {
+  "attach": [
+    "icon",
+    "text"
+  ],
+  "size": [
+    "small",
+    "large"
+  ]
+};
+
+export const notificationBadgePositionerVariantKeys = Object.keys(notificationBadgePositionerVariantMap);
+
+export function notificationBadgePositioner(props) {
+  return createClassName(
+    "seed-notification-badge-positioner",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(notificationBadgePositioner, { splitVariantProps: (props) => splitVariantProps(props, notificationBadgePositionerVariantMap) });
+
+// @recipe(seed): notification-badge-positioner

package/recipes/notification-badge.css

@@ -0,0 +1,33 @@
+.seed-notification-badge__root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background-color: var(--seed-color-bg-brand-solid)
+}
+.seed-notification-badge__label {
+    text-align: center;
+    color: var(--seed-color-palette-static-white);
+    white-space: nowrap;
+    flex-shrink: 0
+}
+.seed-notification-badge__root--size_small {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--seed-radius-full)
+}
+.seed-notification-badge__root--size_large {
+    width: max-content;
+    min-width: 18px;
+    min-height: 18px;
+    padding-left: var(--seed-dimension-x1);
+    padding-right: var(--seed-dimension-x1);
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-radius: var(--seed-radius-full)
+}
+.seed-notification-badge__label--size_large {
+    font-size: var(--seed-font-size-t1-static);
+    line-height: var(--seed-line-height-t1-static);
+    font-weight: var(--seed-font-weight-bold)
+}

package/recipes/notification-badge.d.ts

@@ -0,0 +1,27 @@
+declare interface NotificationBadgeVariant {
+  /**
+  * - `small`: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에 적합합니다. 내부 라벨은 지원하지 않습니다.
+  * - `large`: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부 라벨을 반드시 포함해야 합니다.
+  *
+  * @default "large"
+  */
+  size: "small" | "large";
+}
+
+declare type NotificationBadgeVariantMap = {
+  [key in keyof NotificationBadgeVariant]: Array<NotificationBadgeVariant[key]>;
+};
+
+export declare type NotificationBadgeVariantProps = Partial<NotificationBadgeVariant>;
+
+export declare type NotificationBadgeSlotName = "root" | "label";
+
+export declare const notificationBadgeVariantMap: NotificationBadgeVariantMap;
+
+export declare const notificationBadge: ((
+  props?: NotificationBadgeVariantProps,
+) => Record<NotificationBadgeSlotName, string>) & {
+  splitVariantProps: <T extends NotificationBadgeVariantProps>(
+    props: T,
+  ) => [NotificationBadgeVariantProps, Omit<T, keyof NotificationBadgeVariantProps>];
+}

package/recipes/notification-badge.mjs

@@ -0,0 +1,43 @@
+import './notification-badge.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const notificationBadgeSlotNames = [
+  [
+    "root",
+    "seed-notification-badge__root"
+  ],
+  [
+    "label",
+    "seed-notification-badge__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "large"
+};
+
+const compoundVariants = [];
+
+export const notificationBadgeVariantMap = {
+  "size": [
+    "small",
+    "large"
+  ]
+};
+
+export const notificationBadgeVariantKeys = Object.keys(notificationBadgeVariantMap);
+
+export function notificationBadge(props) {
+  return Object.fromEntries(
+    notificationBadgeSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(notificationBadge, { splitVariantProps: (props) => splitVariantProps(props, notificationBadgeVariantMap) });
+
+// @recipe(seed): notification-badge