@shiflo/ui 0.1.5 → 0.1.6

package/dist/components/Snackbar/Snackbar.mjs

@@ -6,7 +6,7 @@ import { motion as k } from "motion/react";
 const A = n(k.div)`
   position: fixed;
   left: 50%;
-  bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
+  bottom: ${({ theme: { spacing: e }, bottom: t }) => `calc(${t || e[800]} + var(--safe-area-inset-bottom, 0px))`};
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e[400]};

package/dist/components/Snackbar/Snackbar.typing.d.ts

@@ -9,4 +9,5 @@ export interface SnackbarProps extends PropsWithChildren<HTMLMotionProps<"div">>
     maxWidth?: string;
     autoHideDuration?: number;
     disableAutoHide?: boolean;
+    bottom?: string;
 }

package/dist/components/Tag/Tag.mjs

@@ -1,74 +1,35 @@
-import { jsx as l } from "@emotion/react/jsx-runtime";
-import g from "@emotion/styled";
-import { motion as b } from "motion/react";
-const k = g(b.span)`
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import a from "@emotion/styled";
+import { motion as m } from "motion/react";
+import o from "../../utils/getValueByPath.mjs";
+const s = a(m.span)`
   transition: all 0.3s;
   cursor: default;
 
-  padding: ${({ theme: { spacing: r } }) => r[100]};
-  border-radius: ${({ theme: { radius: r } }) => r[200]};
+  padding: ${({ theme: { spacing: t } }) => t[100]};
+  border-radius: ${({ theme: { radius: t } }) => t[200]};
 
-  ${({
-  theme: {
-    mode: r,
-    palette: {
-      primary: e,
-      secondary: o,
-      text: i,
-      feedback: { warning: n, error: t, info: s, success: c }
-    }
-  },
-  color: m
-}) => {
-  const a = {};
-  switch (m) {
-    case "warning":
-      Object.assign(a, {
-        backgroundColor: n.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "error":
-      Object.assign(a, {
-        backgroundColor: t.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "info":
-      Object.assign(a, {
-        backgroundColor: s.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "success":
-      Object.assign(a, {
-        backgroundColor: c.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    default:
-      Object.assign(a, {
-        backgroundColor: e.main,
-        color: o.main
-      });
-      break;
-  }
-  return a;
+  ${({ theme: { palette: t }, color: r, textColor: i }) => {
+  const e = {};
+  return Object.assign(e, {
+    backgroundColor: o(t, r) || "inherit",
+    color: o(t, i) || "inherit"
+  }), e;
 }}
 
   ${({
   theme: {
-    typography: { small2: r }
+    typography: { small2: t }
   }
 }) => ({
-  fontSize: r.fontSize,
+  fontSize: t.fontSize,
   fontWeight: 700,
-  lineHeight: r.lineHeight
+  lineHeight: t.lineHeight
 })};
 `;
-function f(r) {
-  return /* @__PURE__ */ l(k, { ...r });
+function l(t) {
+  return /* @__PURE__ */ n(s, { ...t });
 }
 export {
-  f as default
+  l as default
 };

package/dist/components/Tag/Tag.typing.d.ts

@@ -1,5 +1,7 @@
-import { UtilityProps } from '../../typings/utility';
+import { ShifloTheme } from '../../theme/typing';
+import { RecursionPath, UtilityProps } from '../../typings/utility';
 import { HTMLMotionProps } from 'motion/react';
 export interface TagProps extends HTMLMotionProps<"span">, Pick<UtilityProps, "css"> {
-    color?: "primary" | "warning" | "error" | "info" | "success";
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
+    textColor?: RecursionPath<ShifloTheme["palette"]> | "inherit";
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "files": [
     "dist"
@@ -51,14 +51,14 @@
     "prepublishOnly": "pnpm build"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@emotion/react": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-onboarding": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
+    "@storybook/addon-docs": "^10.0.2",
+    "@storybook/addon-onboarding": "^10.0.2",
+    "@storybook/react-vite": "^10.0.2",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
@@ -71,14 +71,14 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.7",
+    "eslint-plugin-storybook": "^10.0.2",
     "glob": "^11.0.1",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
     "motion": "^12.23.12",
     "prettier": "^3.5.3",
-    "storybook": "^9.1.7",
+    "storybook": "^10.0.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.26.0",
     "vite": "^7.1.6",