@nanonansen2/nook-ui - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/cli/cli.js

@@ -47,3 +47,3 @@ #!/usr/bin/env node
       backgroundDisabled: "#242527",
-      backgroundDisabledFaded: "#1b1b1d",
+      backgroundDisabledFaded: "#D6E0F2",
       backgroundPrimary: "#0369a1",
@@ -70,2 +70,4 @@ backgroundPrimaryFaded: "#D8EDFC",
       backgroundNeutralFadedRgb: "243, 243, 245",
+      backgroundDisabledRgb: "36, 37, 39",
+      backgroundDisabledFadedRgb: "214, 224, 242",
       backgroundPrimaryRgb: "3, 105, 161",
@@ -78,3 +80,9 @@ backgroundPrimaryFadedRgb: "216, 237, 252",
       backgroundWarningRgb: "215, 174, 6",
-      backgroundWarningFadedRgb: "251, 243, 220"
+      backgroundWarningFadedRgb: "251, 243, 220",
+      borderNeutralRgb: "199, 201, 209",
+      borderNeutralFadedRgb: "199, 201, 209",
+      white: "#FFFFFF",
+      black: "#000000",
+      blackRgb: "0, 0, 0",
+      whiteRgb: "255, 255, 255"
     },
@@ -224,2 +232,40 @@ spacing: generateSpacingUnits(4),
       }
+    },
+    shadow: {
+      raised: [
+        {
+          offsetX: 0,
+          offsetY: 1,
+          blur: 5,
+          spread: -4,
+          colorToken: "blackRgb",
+          opacity: 0.5
+        },
+        {
+          offsetX: 0,
+          offsetY: 4,
+          blur: 8,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.05
+        }
+      ],
+      overlay: [
+        {
+          offsetX: 0,
+          offsetY: 5,
+          blur: 10,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.05
+        },
+        {
+          offsetX: 0,
+          offsetY: 15,
+          blur: 25,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.07
+        }
+      ]
     }
@@ -282,2 +328,11 @@ }
   }
+  if (themeValues.shadow) {
+    Object.entries(themeValues.shadow).forEach(([variant, shadows]) => {
+      const shadowString = shadows.map((shadow) => {
+        const colorVar = `var(--${themeName}-color-${shadow.colorToken})`;
+        return `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${shadow.spread}px rgba(${colorVar}, ${shadow.opacity})`;
+      }).join(",");
+      result[`${themeName}-shadow-${variant}`] = shadowString;
+    });
+  }
   return result;
@@ -284,0 +339,0 @@ }

dist/components/Button/index.js

 import { jsxs as N, jsx as _ } from "react/jsx-runtime";
-import { c as z, L as h } from "../../index-BqvXI5p-.js";
-import '../../assets/index.css';const x = "_button_2ub2m_1", w = "_content_2ub2m_52", y = "_icon_2ub2m_53", A = "_loader_2ub2m_387", $ = {
+import { c as z } from "../../bind-CilXWPo8.js";
+import { Loader as h } from "../Loader/index.js";
+import '../../assets/index5.css';const x = "_button_2ub2m_1", w = "_content_2ub2m_52", y = "_icon_2ub2m_53", A = "_loader_2ub2m_387", $ = {
   button: x,
@@ -32,6 +33,6 @@ "full-width": "_full-width_2ub2m_34",
   loader: A
-}, a = z.bind($);
+}, n = z.bind($);
 function m({
   children: i,
-  variant: n = "solid",
+  variant: a = "solid",
   color: t = "neutral",
@@ -55,6 +56,6 @@ size: o = "medium",
     {
-      className: a(
+      className: n(
         "button",
         {
-          [`variant-${n}`]: n,
+          [`variant-${a}`]: a,
           [`color-${t}`]: t,
@@ -76,6 +77,6 @@ [`size-${o}`]: o,
       children: [
-        s && /* @__PURE__ */ _(h, { size: o, className: a("loader") }),
-        e && /* @__PURE__ */ _(e, { className: a("icon", "start-icon") }),
-        i && /* @__PURE__ */ _("span", { className: a("content"), children: i }),
-        l && /* @__PURE__ */ _(l, { className: a("icon", "end-icon") })
+        s && /* @__PURE__ */ _(h, { size: o, className: n("loader") }),
+        e && /* @__PURE__ */ _(e, { className: n("icon", "start-icon") }),
+        i && /* @__PURE__ */ _("span", { className: n("content"), children: i }),
+        l && /* @__PURE__ */ _(l, { className: n("icon", "end-icon") })
       ]
@@ -86,10 +87,10 @@ }
 m.Group = function({
-  children: n,
+  children: a,
   className: t,
   ...o
 }) {
-  return /* @__PURE__ */ _("div", { className: a("button-group", t), ...o, children: n });
+  return /* @__PURE__ */ _("div", { className: n("button-group", t), ...o, children: a });
 };
 m.Aligner = function({
-  children: n,
+  children: a,
   position: t,
@@ -103,3 +104,3 @@ className: o,
     {
-      className: a(
+      className: n(
         "button-aligner",
@@ -112,3 +113,3 @@ {
       ...e,
-      children: n
+      children: a
     }
@@ -115,0 +116,0 @@ );

dist/components/Loader/index.js

@@ -1,5 +0,16 @@
-import "react/jsx-runtime";
-import { L as e } from "../../index-BqvXI5p-.js";
+import { jsx as o } from "react/jsx-runtime";
+import { c as i } from "../../bind-CilXWPo8.js";
+import '../../assets/index6.css';const a = "_loader_d82cx_1", r = "_rotation_d82cx_1", _ = {
+  loader: a,
+  rotation: r,
+  "size-small": "_size-small_d82cx_12",
+  "size-medium": "_size-medium_d82cx_16",
+  "size-large": "_size-large_d82cx_20",
+  "size-xlarge": "_size-xlarge_d82cx_24"
+}, d = i.bind(_);
+function l({ size: e = "medium", className: s }) {
+  return /* @__PURE__ */ o("div", { className: d("loader", `size-${e}`, s) });
+}
 export {
-  e as Loader
+  l as Loader
 };

dist/lib/main.d.ts

 export { Button } from './components/Button';
 export { NookProvider } from './components/NookProvider';
+export { Input } from './components/Input';
+export { Checkbox } from './components/Checkbox';
+export { Select } from './components/Select';
+export { Radio, RadioGroup } from './components/Radio';

dist/lib/theme/types.d.ts

@@ -69,2 +69,4 @@ export type ThemeName = "nook";
         backgroundNeutralFadedRgb: string;
+        backgroundDisabledRgb: string;
+        backgroundDisabledFadedRgb: string;
         backgroundPrimaryRgb: string;
@@ -78,2 +80,8 @@ backgroundPrimaryFadedRgb: string;
         backgroundWarningFadedRgb: string;
+        borderNeutralRgb: string;
+        borderNeutralFadedRgb: string;
+        white: string;
+        black: string;
+        blackRgb: string;
+        whiteRgb: string;
     };
@@ -139,2 +147,6 @@ spacing: SpacingMultipliers;
     };
+    shadow: {
+        raised: ShadowDefinition[];
+        overlay: ShadowDefinition[];
+    };
 }
@@ -154,2 +166,10 @@ interface FontDefinition {
 }
+interface ShadowDefinition {
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    spread: number;
+    colorToken: string;
+    opacity: number;
+}
 export type ThemeTokens = {
@@ -156,0 +176,0 @@ [key in ThemeName]: ThemeTokensValues;

dist/main.js

@@ -1,6 +0,15 @@
-import { Button as t } from "./components/Button/index.js";
-import { NookProvider as f } from "./components/NookProvider/index.js";
+import { Button as e } from "./components/Button/index.js";
+import { NookProvider as p } from "./components/NookProvider/index.js";
+import { Input as f } from "./components/Input/index.js";
+import { Checkbox as d } from "./components/Checkbox/index.js";
+import { Select as u } from "./components/Select/index.js";
+import { Radio as c, RadioGroup as k } from "./components/Radio/index.js";
 export {
-  t as Button,
-  f as NookProvider
+  e as Button,
+  d as Checkbox,
+  f as Input,
+  p as NookProvider,
+  c as Radio,
+  k as RadioGroup,
+  u as Select
 };

dist/theme/base-theme.js

@@ -1,2 +0,2 @@
-function i(e) {
+function o(e) {
   return {
@@ -19,3 +19,3 @@ base: { value: e },
 }
-const t = {
+const i = {
   nook: {
@@ -44,3 +44,3 @@ color: {
       backgroundDisabled: "#242527",
-      backgroundDisabledFaded: "#1b1b1d",
+      backgroundDisabledFaded: "#D6E0F2",
       backgroundPrimary: "#0369a1",
@@ -67,2 +67,4 @@ backgroundPrimaryFaded: "#D8EDFC",
       backgroundNeutralFadedRgb: "243, 243, 245",
+      backgroundDisabledRgb: "36, 37, 39",
+      backgroundDisabledFadedRgb: "214, 224, 242",
       backgroundPrimaryRgb: "3, 105, 161",
@@ -75,5 +77,11 @@ backgroundPrimaryFadedRgb: "216, 237, 252",
       backgroundWarningRgb: "215, 174, 6",
-      backgroundWarningFadedRgb: "251, 243, 220"
+      backgroundWarningFadedRgb: "251, 243, 220",
+      borderNeutralRgb: "199, 201, 209",
+      borderNeutralFadedRgb: "199, 201, 209",
+      white: "#FFFFFF",
+      black: "#000000",
+      blackRgb: "0, 0, 0",
+      whiteRgb: "255, 255, 255"
     },
-    spacing: i(4),
+    spacing: o(4),
     // Using 4 as base unit
@@ -221,2 +229,40 @@ radius: {
       }
+    },
+    shadow: {
+      raised: [
+        {
+          offsetX: 0,
+          offsetY: 1,
+          blur: 5,
+          spread: -4,
+          colorToken: "blackRgb",
+          opacity: 0.5
+        },
+        {
+          offsetX: 0,
+          offsetY: 4,
+          blur: 8,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.05
+        }
+      ],
+      overlay: [
+        {
+          offsetX: 0,
+          offsetY: 5,
+          blur: 10,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.05
+        },
+        {
+          offsetX: 0,
+          offsetY: 15,
+          blur: 25,
+          spread: 0,
+          colorToken: "blackRgb",
+          opacity: 0.07
+        }
+      ]
     }
@@ -226,3 +272,3 @@ }
 export {
-  t as baseTheme
+  i as baseTheme
 };

dist/theme/generateTheme.js

 import { baseTheme as s } from "./base-theme.js";
-function c(i, r) {
-  if (!r) return i;
-  const o = { ...i };
-  return Object.entries(r).forEach(([t, n]) => {
-    const f = i[t];
-    n && f && typeof n == "object" && typeof f == "object" ? o[t] = c(
+function $(r, i) {
+  if (!i) return r;
+  const t = { ...r };
+  return Object.entries(i).forEach(([o, n]) => {
+    const f = r[o];
+    n && f && typeof n == "object" && typeof f == "object" ? t[o] = $(
       f,
       n
-    ) : n !== void 0 && (o[t] = n);
-  }), o;
+    ) : n !== void 0 && (t[o] = n);
+  }), t;
 }
-function e(i, r) {
-  const o = {};
-  return r.color && Object.entries(r.color).forEach(([t, n]) => {
-    o[`${i}-color-${t}`] = n;
-  }), r.spacing && Object.entries(r.spacing).forEach(([t, n]) => {
-    o[`${i}-spacing-${t}`] = `${n.value}px`;
-  }), r.radius && Object.entries(r.radius).forEach(([t, n]) => {
-    o[`${i}-radius-${t}`] = `${n.px}px`;
-  }), r.fontFamily && Object.entries(r.fontFamily).forEach(([t, n]) => {
-    o[`${i}-font-family-${t}`] = n.family;
-  }), r.fontWeight && Object.entries(r.fontWeight).forEach(([t, n]) => {
-    n && (o[`${i}-font-weight-${t}`] = `${n.weight}`);
-  }), r.font && Object.entries(r.font).forEach(([t, n]) => {
-    o[`${i}-font-size-${t}`] = `${n.fontSize.px}px`, o[`${i}-line-height-${t}`] = `${n.lineHeight.px}px`, o[`${i}-letter-spacing-${t}`] = `${n.letterSpacing.px}px`, o[`${i}-font-weight-${t}`] = `var(--${i}-font-weight-${n.fontWeightToken})`, o[`${i}-font-family-${t}`] = `var(--${i}-font-family-${n.fontFamilyToken})`;
-  }), o;
+function e(r, i) {
+  const t = {};
+  return i.color && Object.entries(i.color).forEach(([o, n]) => {
+    t[`${r}-color-${o}`] = n;
+  }), i.spacing && Object.entries(i.spacing).forEach(([o, n]) => {
+    t[`${r}-spacing-${o}`] = `${n.value}px`;
+  }), i.radius && Object.entries(i.radius).forEach(([o, n]) => {
+    t[`${r}-radius-${o}`] = `${n.px}px`;
+  }), i.fontFamily && Object.entries(i.fontFamily).forEach(([o, n]) => {
+    t[`${r}-font-family-${o}`] = n.family;
+  }), i.fontWeight && Object.entries(i.fontWeight).forEach(([o, n]) => {
+    n && (t[`${r}-font-weight-${o}`] = `${n.weight}`);
+  }), i.font && Object.entries(i.font).forEach(([o, n]) => {
+    t[`${r}-font-size-${o}`] = `${n.fontSize.px}px`, t[`${r}-line-height-${o}`] = `${n.lineHeight.px}px`, t[`${r}-letter-spacing-${o}`] = `${n.letterSpacing.px}px`, t[`${r}-font-weight-${o}`] = `var(--${r}-font-weight-${n.fontWeightToken})`, t[`${r}-font-family-${o}`] = `var(--${r}-font-family-${n.fontFamilyToken})`;
+  }), i.shadow && Object.entries(i.shadow).forEach(([o, n]) => {
+    const f = n.map((c) => {
+      const p = `var(--${r}-color-${c.colorToken})`;
+      return `${c.offsetX}px ${c.offsetY}px ${c.blur}px ${c.spread}px rgba(${p}, ${c.opacity})`;
+    }).join(",");
+    t[`${r}-shadow-${o}`] = f;
+  }), t;
 }
-function g(i = {}) {
+function b(r = {}) {
   return Object.entries(s).reduce(
-    (o, [t, n]) => {
-      const f = t, $ = i[f];
-      return o[f] = c(
+    (t, [o, n]) => {
+      const f = o, c = r[f];
+      return t[f] = $(
         n,
-        $ || {}
-      ), o;
+        c || {}
+      ), t;
     },
@@ -41,16 +47,16 @@ {}
 }
-function b(i) {
-  const r = Object.entries(i).reduce(
-    (o, [t, n]) => {
-      const f = e(t, n);
-      return { ...o, ...f };
+function j(r) {
+  const i = Object.entries(r).reduce(
+    (t, [o, n]) => {
+      const f = e(o, n);
+      return { ...t, ...f };
     },
     {}
   );
-  return Object.entries(r).map(([o, t]) => `--${o}: ${t};`).join(`
+  return Object.entries(i).map(([t, o]) => `--${t}: ${o};`).join(`
 `);
 }
 export {
-  g as generateTheme,
-  b as generateThemeVariables
+  b as generateTheme,
+  j as generateThemeVariables
 };

package.json

 {
   "name": "@nanonansen2/nook-ui",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
@@ -6,0 +6,0 @@ "exports": {

No alert changes

Improved metrics

Total package byte prevSize

84749

increased by53.27%

Number of package files

35

increased by52.17%

Lines of code

1955

increased by53.94%

Worsened metrics

Number of lines in readme file

1

decreased by-98.04%

No dependency changes