@uniai-fe/uds-primitives 0.0.9 → 0.0.10

package/dist/styles.css

@@ -18,6 +18,7 @@
     letter-spacing: -0.05em;
     flex-shrink: 0;
     overscroll-behavior-y: none;
+    font-family: var(--font-family-sans, "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", "Pretendard", "Inter", sans-serif);
   }
   *:focus,
   *:focus-within,
@@ -626,23 +627,41 @@
     --theme-radius-xlarge: 16px;
   }
 }
+@layer theme.tokens.typography {
+  @font-face {
+    font-family: "Pretendard JP Variable";
+    src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "InterVariable";
+    src: url("./fonts/inter/InterVariable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+}
 @layer theme.tokens.typography {
   :root {
     --font-family-pretendard:
       "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
-      "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
-      "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
-      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
+      "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
+      "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
       "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
     --font-family-inter:
-      "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
-      "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
-      "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
+      "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
+      "Pretendard Variable", "Pretendard", "-apple-system",
+      "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
+      "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
+      "Cantarell", "sans-serif";
     --font-family-system:
-      "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
-      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
+      "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
       "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
     --font-family-sans: var(--font-family-pretendard);
@@ -3529,3 +3548,19 @@ figure.chip {
 }
 
 /* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */
+:root {
+  --divider-width: 1px;
+  --divider-height: 12px;
+  --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --divider-margin: var(--spacing-gap-4, 8px);
+}
+
+.divider {
+  width: var(--divider-width);
+  height: var(--divider-height);
+  background-color: var(--divider-color);
+  margin: 0 var(--divider-margin);
+  vertical-align: middle;
+  align-self: center;
+  font-size: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/divider/index.scss

@@ -0,0 +1 @@
+@use "./styles/divider.scss";

package/src/components/divider/index.tsx

@@ -0,0 +1,5 @@
+import "./index.scss";
+
+import { Divider } from "./markup";
+
+export { Divider };

package/src/components/divider/markup/Divider.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx";
+
+export function Divider({
+  className,
+  direction = "vertical",
+}: {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}) {
+  return <div className={clsx("divider", direction, className)}></div>;
+}

package/src/components/divider/markup/index.ts

@@ -0,0 +1 @@
+export { Divider } from "./Divider";

package/src/components/divider/styles/divider.scss

@@ -0,0 +1,15 @@
+:root {
+  --divider-width: 1px;
+  --divider-height: 12px;
+  --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --divider-margin: var(--spacing-gap-4, 8px);
+}
+.divider {
+  width: var(--divider-width);
+  height: var(--divider-height);
+  background-color: var(--divider-color);
+  margin: 0 var(--divider-margin);
+  vertical-align: middle;
+  align-self: center;
+  font-size: 0;
+}

package/src/index.scss

@@ -22,3 +22,4 @@
 @use "./components/spinner";
 @use "./components/tab";
 @use "./components/table";
+@use "./components/divider";

package/src/index.tsx

@@ -24,3 +24,4 @@ export * from "./components/badge";
 export * from "./components/spinner";
 export * from "./components/alternate";
 export * from "./components/segmented-control";
+export * from "./components/divider";