@shiflo/ui 0.0.10 → 0.0.12

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -7,6 +7,7 @@ const J = b.div`
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   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]};
   background-color: ${({
   theme: {
@@ -48,16 +49,16 @@ function _({
   onClose: c,
   children: T,
   transitionDuration: s = 200,
-  onClick: L,
+  onClick: $,
   ref: j,
-  hideDragHandleBar: F,
-  style: I,
-  ...O
+  hideDragHandleBar: I,
+  style: O,
+  ...A
 }) {
-  const [$, h] = V(!1), l = o(null), R = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), A = o(0.25);
+  const [L, h] = V(!1), l = o(null), R = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), F = o(0.25);
   z(j, () => l.current);
   const W = (r) => {
-    r.stopPropagation(), typeof L == "function" && L(r);
+    r.stopPropagation(), typeof $ == "function" && $(r);
   };
   return S(() => {
     let r;
@@ -69,7 +70,7 @@ function _({
   }, [t]), S(() => {
     const r = l.current, n = R.current, k = (e) => {
       r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, p.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
-    }, w = (e) => {
+    }, x = (e) => {
       if (!r || !d.current) return;
       const u = e - v.current;
       if (u < 0) return;
@@ -83,13 +84,13 @@ function _({
     }, a = () => {
       if (!r || !d.current) return;
       d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
-      const e = f.current - v.current, u = m.current * A.current;
+      const e = f.current - v.current, u = m.current * F.current;
       r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || g.current > 0.5 && g.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
-    }, x = (e) => k(e.clientY), H = (e) => w(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => w(e.touches[0].clientY);
-    return r == null || r.addEventListener("mousedown", x), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
-      r == null || r.removeEventListener("mousedown", x), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
+    }, w = (e) => k(e.clientY), H = (e) => x(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
+    return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
+      r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
     };
-  }, [$, c, s]), /* @__PURE__ */ y(
+  }, [L, c, s]), /* @__PURE__ */ y(
     G,
     {
       ref: R,
@@ -104,13 +105,13 @@ function _({
           ease: t ? "in" : "out",
           transitionDuration: s,
           onClick: W,
-          ...O,
+          ...A,
           style: {
-            transform: `translate3d(0, ${$ ? "0" : "200%"}, 0)`,
-            ...I
+            transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
+            ...O
           },
           children: [
-            !F && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
+            !I && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
             T
           ]
         }

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
 export interface BottomSheetProps extends ComponentPropsWithRef<"div"> {
     open?: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     transitionDuration?: number;
     hideDragHandleBar?: boolean;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogProps } from './Dialog.typing';
+declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, ...props }: DialogProps): import("react").JSX.Element;
+export default Dialog;

package/dist/components/Dialog/Dialog.mjs

@@ -0,0 +1,71 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as d, useRef as $, useEffect as p } from "react";
+import h from "basic-styled";
+import g from "../Overlay/Overlay.mjs";
+const y = h.div`
+  width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  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]};
+  background-color: ${({
+  theme: {
+    palette: { common: e }
+  }
+}) => e.background};
+  transition:
+    transform ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
+    opacity ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
+    background-color 0.2s;
+`;
+function O({
+  open: e,
+  onClose: n,
+  children: m,
+  transitionDuration: a = 200,
+  onClick: o,
+  style: l,
+  ...c
+}) {
+  const [r, i] = d(!1), f = $(null), u = (t) => {
+    t.stopPropagation(), typeof o == "function" && o(t);
+  };
+  return p(() => {
+    let t;
+    return e ? t = requestAnimationFrame(() => {
+      i(!0);
+    }) : i(!1), () => {
+      t && cancelAnimationFrame(t);
+    };
+  }, [e]), /* @__PURE__ */ s(
+    g,
+    {
+      ref: f,
+      open: e,
+      onClose: n,
+      transitionDuration: a,
+      placement: "center-middle",
+      children: /* @__PURE__ */ s(
+        y,
+        {
+          ease: e ? "in" : "out",
+          transitionDuration: a,
+          onClick: u,
+          ...c,
+          style: {
+            transform: `scale(${r ? 1 : 0.9})`,
+            opacity: r ? 1 : 0,
+            ...l
+          },
+          children: m
+        }
+      )
+    }
+  );
+}
+export {
+  O as default
+};

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+export interface DialogProps extends ComponentPropsWithRef<"div"> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+}

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Dialog } from './Dialog';
+import { DialogProps } from './Dialog.typing';
+export type { DialogProps };
+export default Dialog;

package/dist/components/Dialog/index.mjs

@@ -0,0 +1,4 @@
+import a from "./Dialog.mjs";
+export {
+  a as default
+};

package/dist/components/Icon/Icon.mjs

@@ -9,11 +9,11 @@ const f = c.svg`
     height 0.2s,
     color 0.2s;
 
-  width: ${({ width: t }) => t || "24px"};
-  height: ${({ height: t }) => t || "24px"};
+  width: ${({ width: t }) => `${t || 24}px`};
+  height: ${({ height: t }) => `${t || 24}px`};
   color: ${({ theme: { palette: t }, color: r }) => d(t, r || "") || "inherit"};
 `;
-function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
+function S({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
   const h = a[r];
   return p.map(h(), (i) => {
     if (!l(i))
@@ -26,5 +26,5 @@ function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
   });
 }
 export {
-  v as default
+  S as default
 };

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

@@ -5,5 +5,7 @@ import type * as Svgs from "../../assets/icons";
 export interface BaseIconProps extends Pick<UtilityProps, "css"> {
     name: keyof typeof Svgs;
     color?: RecursionPath<BasicTheme["palette"]> | "inherit";
+    width?: number;
+    height?: number;
 }
-export type IconProps = BaseIconProps & Omit<ComponentPropsWithRef<"svg">, "children">;
+export type IconProps = BaseIconProps & Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height">;

package/dist/components/Overlay/Overlay.d.ts

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, ...props }: OverlayProps): import('react').ReactPortal | null;
 export default Overlay;

package/dist/components/Overlay/Overlay.mjs

@@ -1,14 +1,15 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { useState as f, useEffect as g } from "react";
-import { createPortal as b } from "react-dom";
-import a from "basic-styled";
-const j = a.div`
+import { jsxs as j, jsx as f } from "react/jsx-runtime";
+import { useState as c, useRef as h, useImperativeHandle as O, useLayoutEffect as I, useEffect as k } from "react";
+import { createPortal as C } from "react-dom";
+import i from "basic-styled";
+const v = i.div`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-`, h = a.div`
+  z-index: 1;
+`, $ = i.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -16,23 +17,23 @@ const j = a.div`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: t }
+    palette: { common: n }
   }
-}) => t.overlay};
+}) => n.overlay};
   transition:
-    opacity ${({ transitionDuration: t }) => `${t}ms`}
-      ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"},
+    opacity ${({ transitionDuration: n }) => `${n}ms`}
+      ${({ ease: n }) => n === "in" ? "ease-in" : "ease-out"},
     background-color 0.2s;
-`, O = a.div`
+`, w = i.div`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 
-  ${({ placement: t }) => {
+  ${({ placement: n }) => {
   const e = {};
-  switch (t) {
+  switch (n) {
     case "top-left":
       Object.assign(e, {
         display: "flex",
@@ -100,44 +101,51 @@ const j = a.div`
   return e;
 }}
 `;
-function $({
-  children: t,
+function R({
+  children: n,
   open: e,
-  onClose: c,
-  transitionDuration: s = 200,
-  placement: d,
-  style: m,
-  ...u
+  onClose: d,
+  transitionDuration: a = 200,
+  placement: u,
+  style: y,
+  ref: m,
+  ...p
 }) {
-  const [y, l] = f(!0), [p, r] = f(!1);
-  return g(() => {
-    let n, i;
-    return e ? (l(!1), n = requestAnimationFrame(() => {
-      r(!0);
-    })) : (r(!1), i = setTimeout(() => {
+  const [x, r] = c(!0), [g, l] = c(!1), s = h(null);
+  return O(m, () => s.current), I(() => {
+    let t;
+    return e ? (r(!1), t = requestAnimationFrame(() => {
       l(!0);
-    }, s)), () => {
-      n && cancelAnimationFrame(n), i && clearTimeout(i);
+    })) : l(!1), () => {
+      t && cancelAnimationFrame(t);
     };
-  }, [e, s]), y ? null : b(
-    /* @__PURE__ */ x(j, { onClick: c, children: [
-      /* @__PURE__ */ o(
-        h,
+  }, [e, a]), k(() => {
+    const t = s.current, o = (b) => {
+      e || b.propertyName === "opacity" && r(!0);
+    };
+    return t == null || t.addEventListener("transitionend", o), () => {
+      t == null || t.removeEventListener("transitionend", o);
+    };
+  }, [e]), x ? null : C(
+    /* @__PURE__ */ j(v, { onClick: d, children: [
+      /* @__PURE__ */ f(
+        $,
         {
-          transitionDuration: s,
+          ref: s,
+          transitionDuration: a,
           ease: e ? "in" : "out",
           style: {
-            opacity: p ? 1 : 0,
-            ...m
+            opacity: g ? 1 : 0,
+            ...y
           },
-          ...u
+          ...p
         }
       ),
-      /* @__PURE__ */ o(O, { placement: d, children: t })
+      /* @__PURE__ */ f(w, { placement: u, children: n })
     ] }),
     document.body
   );
 }
 export {
-  $ as default
+  R as default
 };

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
 export interface OverlayProps extends ComponentPropsWithRef<"div"> {
     open?: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     transitionDuration?: number;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
 }

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

@@ -0,0 +1,3 @@
+import { SnackbarProps } from './Snackbar.typing';
+declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
+export default Snackbar;

package/dist/components/Snackbar/Snackbar.mjs

@@ -0,0 +1,111 @@
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { useState as x, useRef as y, useImperativeHandle as A, useLayoutEffect as I, useEffect as v } from "react";
+import { createPortal as L } from "react-dom";
+import a from "basic-styled";
+const R = a.div`
+  position: fixed;
+  bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e[400]};
+  width: 100%;
+  max-width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  min-height: 56px;
+  padding: ${({ theme: { spacing: e } }) => e[400]};
+  background-color: ${({
+  theme: {
+    palette: { neutral: e }
+  }
+}) => e[900]};
+  border-radius: ${({ theme: { radius: e } }) => e[400]};
+  z-index: 1;
+
+  transition:
+    opacity ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
+    transform ${({ transitionDuration: e }) => `${e}ms`},
+    background-color 0.2s;
+`, T = a.div`
+  white-space: nowrap;
+`, j = a.div`
+  flex-grow: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  ${({
+  theme: {
+    palette: { common: e },
+    typography: { body2: r }
+  }
+}) => ({
+  fontSize: r.fontSize,
+  lineHeight: r.lineHeight,
+  color: e.surface
+})}
+`, E = a.div`
+  white-space: nowrap;
+`;
+function H({
+  children: e,
+  open: r,
+  onClose: n,
+  transitionDuration: l = 200,
+  style: w,
+  ref: g,
+  startIcon: f,
+  action: m,
+  autoHideDuration: d = 3e3,
+  disableAutoHide: u,
+  ...b
+}) {
+  const [S, p] = x(!0), [i, h] = x(!1), s = y(null), o = y(null);
+  return A(g, () => s.current), I(() => {
+    let t;
+    return r ? (p(!1), t = requestAnimationFrame(() => {
+      h(!0);
+    })) : h(!1), () => {
+      t && cancelAnimationFrame(t);
+    };
+  }, [r, l]), v(() => {
+    const t = s.current, $ = (k) => {
+      r || k.propertyName === "opacity" && p(!0);
+    };
+    return t == null || t.addEventListener("transitionend", $), () => {
+      t == null || t.removeEventListener("transitionend", $);
+    };
+  }, [r]), v(() => {
+    if (!(u || !i))
+      return o.current = setTimeout(() => {
+        n == null || n();
+      }, d), () => {
+        o.current && clearTimeout(o.current);
+      };
+  }, [u, d, i, n]), S ? null : L(
+    /* @__PURE__ */ z(
+      R,
+      {
+        ref: s,
+        transitionDuration: l,
+        ease: r ? "in" : "out",
+        style: {
+          opacity: i ? 1 : 0,
+          transform: i ? "translate3d(-50%, 0, 0) scale(1)" : "translate3d(-50%, 0, 0) scale(0.97)",
+          ...w
+        },
+        ...b,
+        children: [
+          f && /* @__PURE__ */ c(T, { children: f }),
+          /* @__PURE__ */ c(j, { children: e }),
+          m && /* @__PURE__ */ c(E, { children: m })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  H as default
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode, ComponentPropsWithRef } from 'react';
+export interface SnackbarProps extends ComponentPropsWithRef<"div"> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    startIcon?: ReactNode;
+    action?: ReactNode;
+    autoHideDuration?: number;
+    disableAutoHide?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { default as Snackbar } from './Snackbar';
+import { SnackbarProps } from './Snackbar.typing';
+export type { SnackbarProps };
+export default Snackbar;

package/dist/components/Snackbar/index.mjs

@@ -0,0 +1,4 @@
+import r from "./Snackbar.mjs";
+export {
+  r as default
+};

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import { SwitchProps } from './Switch.typing';
+declare function Switch({ checked, disabled, size, onChange, onClick, ...props }: SwitchProps): import("react").JSX.Element;
+export default Switch;

package/dist/components/Switch/Switch.mjs

@@ -0,0 +1,102 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "basic-styled";
+const c = l.button`
+  position: relative;
+  border-radius: 9999px;
+  transition:
+    width 0.2s,
+    height 0.2s,
+    background-color 0.2s;
+  cursor: pointer;
+
+  ${({ theme: { palette: t }, checked: r, disabled: o, size: i }) => {
+  const e = {};
+  switch (i) {
+    case "small":
+      Object.assign(e, {
+        width: "40px",
+        height: "24px",
+        "&::after": {
+          width: "16px",
+          height: "16px"
+        }
+      });
+      break;
+    case "large":
+      Object.assign(e, {
+        width: "56px",
+        height: "32px",
+        "&::after": {
+          width: "24px",
+          height: "24px"
+        }
+      });
+      break;
+    default:
+      Object.assign(e, {
+        width: "48px",
+        height: "28px",
+        "&::after": {
+          width: "20px",
+          height: "20px"
+        }
+      });
+      break;
+  }
+  return r ? Object.assign(e, {
+    backgroundColor: t.primary.main
+  }) : Object.assign(e, {
+    backgroundColor: t.neutral[300]
+  }), o && Object.assign(e, {
+    backgroundColor: t.neutral[200]
+  }), e;
+}};
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    background-color: ${({
+  theme: {
+    palette: { common: t }
+  }
+}) => t.background};
+    border-radius: 50%;
+    transition:
+      width 0.2s,
+      height 0.2s,
+      background-color 0.2s,
+      transform 0.2s ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"};
+    transform: ${({ theme: { spacing: t }, checked: r }) => r ? `translate3d(calc(100% + ${t[100]}), -50%, 0)` : `translate3d(${t[100]}, -50%, 0)`};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+function f({
+  checked: t = !1,
+  disabled: r = !1,
+  size: o = "medium",
+  onChange: i,
+  onClick: e,
+  ...s
+}) {
+  return /* @__PURE__ */ n(
+    c,
+    {
+      size: o,
+      checked: t,
+      disabled: r,
+      ease: t ? "in" : "out",
+      onClick: (a) => {
+        !r && typeof i == "function" && i(a, !t), typeof e == "function" && e(a);
+      },
+      ...s
+    }
+  );
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, MouseEvent } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"button">, "onChange">, Pick<UtilityProps, "css"> {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    onChange?: (event: MouseEvent<HTMLButtonElement>, checked: boolean) => void;
+}

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Switch } from './Switch';
+import { SwitchProps } from './Switch.typing';
+export type { SwitchProps };
+export default Switch;

package/dist/components/Switch/index.mjs

@@ -0,0 +1,4 @@
+import o from "./Switch.mjs";
+export {
+  o as default
+};

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

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

package/dist/components/TextField/TextField.mjs

@@ -0,0 +1,189 @@
+import { jsxs as u, jsx as c } from "react/jsx-runtime";
+import { useState as p } from "react";
+import s from "basic-styled";
+const m = s.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e[200]};
+  border: 1px solid transparent;
+  border-radius: ${({ theme: { radius: e } }) => e[200]};
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    padding 0.2s,
+    font-size 0.2s,
+    font-weight 0.2s,
+    color 0.2s;
+  background-color: ${({
+  theme: {
+    palette: { common: e }
+  }
+}) => e.background};
+  overflow: hidden;
+
+  ${({
+  theme: {
+    palette: { border: e, secondary: n }
+  },
+  variant: o
+}) => {
+  const t = {};
+  switch (o) {
+    case "outlined":
+      Object.assign(t, {
+        borderColor: e.main
+      });
+      break;
+    default:
+      Object.assign(t, {
+        backgroundColor: n.main,
+        borderColor: "transparent"
+      });
+      break;
+  }
+  return t;
+}};
+
+  ${({
+  theme: {
+    spacing: e,
+    typography: { small1: n, body2: o, body1: t }
+  },
+  size: r
+}) => {
+  const i = {};
+  switch (r) {
+    case "small":
+      Object.assign(i, {
+        padding: `${e[100]} ${e[150]}`,
+        fontSize: n.fontSize,
+        lineHeight: n.lineHeight,
+        "& svg": {
+          width: n.fontSize,
+          height: n.fontSize
+        }
+      });
+      break;
+    case "large":
+      Object.assign(i, {
+        padding: `${e[300]} ${e[350]}`,
+        fontSize: t.fontSize,
+        lineHeight: t.lineHeight,
+        "& svg": {
+          width: t.fontSize,
+          height: t.fontSize
+        }
+      });
+      break;
+    default:
+      Object.assign(i, {
+        padding: `${e[200]} ${e[250]}`,
+        fontSize: o.fontSize,
+        lineHeight: o.lineHeight,
+        "& svg": {
+          width: o.fontSize,
+          height: o.fontSize
+        }
+      });
+      break;
+  }
+  return i;
+}};
+
+  ${({
+  theme: {
+    palette: { primary: e }
+  },
+  variant: n,
+  focused: o
+}) => {
+  const t = {};
+  return n === "outlined" && o && Object.assign(t, {
+    borderColor: e.main,
+    "& svg": {
+      color: e.main
+    }
+  }), t;
+}};
+
+  ${({ fullWidth: e }) => e ? {
+  width: "100%",
+  maxWidth: "100%",
+  flexGrow: 1
+} : {
+  width: "fit-content"
+}};
+
+  ${({
+  theme: {
+    palette: { neutral: e }
+  },
+  disabled: n
+}) => n ? {
+  backgroundColor: e[200],
+  color: e[500],
+  cursor: "not-allowed"
+} : {}};
+`, b = s.input`
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  background-color: transparent;
+
+  &::placeholder {
+    color: ${({
+  theme: {
+    palette: { neutral: e }
+  }
+}) => e[500]};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`, w = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`, S = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`;
+function v({
+  variant: e = "outlined",
+  size: n = "medium",
+  fullWidth: o,
+  disabled: t,
+  startIcon: r,
+  endIcon: i,
+  onFocus: l,
+  onBlur: a,
+  ...f
+}) {
+  const [g, h] = p(!1);
+  return /* @__PURE__ */ u(
+    m,
+    {
+      variant: e,
+      size: n,
+      focused: g,
+      fullWidth: o,
+      disabled: t,
+      children: [
+        r && /* @__PURE__ */ c(w, { children: r }),
+        /* @__PURE__ */ c(b, { ...f, onFocus: (d) => {
+          h(!0), l == null || l(d);
+        }, onBlur: (d) => {
+          h(!1), a == null || a(d);
+        }, disabled: t }),
+        i && /* @__PURE__ */ c(S, { children: i })
+      ]
+    }
+  );
+}
+export {
+  v as default
+};

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

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<"input">, "children" | "size"> {
+    variant?: "contained" | "outlined";
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    fullWidth?: boolean;
+    size?: "small" | "medium" | "large";
+}

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

@@ -0,0 +1,4 @@
+import { default as TextField } from './TextField';
+import { TextFieldProps } from './TextField.typing';
+export type { TextFieldProps };
+export default TextField;

package/dist/components/TextField/index.mjs

@@ -0,0 +1,4 @@
+import t from "./TextField.mjs";
+export {
+  t as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "dist"