@shiflo/ui 0.1.5 → 0.1.7

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -10,7 +10,7 @@ const O = n(I.div)`
   overflow-y: auto;
   margin: ${({ theme: { spacing: t } }) => t[400]};
   margin-bottom: ${({ theme: { spacing: t } }) => `calc(${t[400]} + var(--safe-area-inset-bottom, 0px))`};
-  border-radius: ${({ theme: { radius: t } }) => t[150]};
+  border-radius: ${({ theme: { radius: t } }) => t[350]};
   background-color: ${({
   theme: {
     palette: { common: t }

package/dist/components/Dialog/Dialog.mjs

@@ -10,7 +10,7 @@ const y = u(h.div)`
   overflow-y: auto;
   margin: ${({ theme: { spacing: e } }) => e[400]};
   margin-bottom: ${({ theme: { spacing: e } }) => `calc(${e[400]} + var(--safe-area-inset-bottom, 0px))`};
-  border-radius: ${({ theme: { radius: e } }) => e[150]};
+  border-radius: ${({ theme: { radius: e } }) => e[350]};
   background-color: ${({
   theme: {
     palette: { common: e }

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/dist/components/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from './TextField.typing';
-declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, css, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.mjs

@@ -1,8 +1,8 @@
-import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
-import { useState as p } from "react";
+import { jsxs as p, jsx as a } from "@emotion/react/jsx-runtime";
+import { useState as b } from "react";
 import l from "@emotion/styled";
 import { motion as c } from "motion/react";
-const b = l(c.div)`
+const w = l(c.div)`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e[200]};
@@ -119,7 +119,7 @@ const b = l(c.div)`
   color: e[500],
   cursor: "not-allowed"
 } : {}};
-`, w = l(c.input)`
+`, S = l(c.input)`
   flex-grow: 1;
   border: none;
   outline: none;
@@ -136,18 +136,18 @@ const b = l(c.div)`
   &:disabled {
     cursor: not-allowed;
   }
-`, S = l.div`
+`, $ = l.div`
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-`, $ = l.div`
+`, x = l.div`
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
 `;
-function H({
+function O({
   variant: e = "outlined",
   size: n = "medium",
   fullWidth: o,
@@ -156,29 +156,31 @@ function H({
   endIcon: i,
   onFocus: h,
   onBlur: u,
-  ...f
+  css: f,
+  ...g
 }) {
-  const [g, d] = p(!1);
-  return /* @__PURE__ */ m(
-    b,
+  const [m, d] = b(!1);
+  return /* @__PURE__ */ p(
+    w,
     {
       variant: e,
       size: n,
-      focused: g,
+      focused: m,
       fullWidth: o,
       disabled: t,
+      css: f,
       children: [
-        r && /* @__PURE__ */ a(S, { children: r }),
-        /* @__PURE__ */ a(w, { ...f, onFocus: (s) => {
+        r && /* @__PURE__ */ a($, { children: r }),
+        /* @__PURE__ */ a(S, { ...g, onFocus: (s) => {
           d(!0), h?.(s);
         }, onBlur: (s) => {
           d(!1), u?.(s);
         }, disabled: t }),
-        i && /* @__PURE__ */ a($, { children: i })
+        i && /* @__PURE__ */ a(x, { children: i })
       ]
     }
   );
 }
 export {
-  H as default
+  O as default
 };

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
+import { UtilityProps } from '../../typings/utility';
 import { HTMLMotionProps } from 'motion/react';
-export interface TextFieldProps extends Omit<HTMLMotionProps<"input">, "size"> {
+export interface TextFieldProps extends Omit<HTMLMotionProps<"input">, "size">, Pick<UtilityProps, "css"> {
     variant?: "contained" | "outlined";
     startIcon?: ReactNode;
     endIcon?: ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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",