@shiflo/ui 0.0.11 → 0.0.12

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/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.11",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "dist"