@shiflo/ui 0.0.12 → 0.0.14

package/dist/assets/icons/index.mjs

@@ -1,18 +1,24 @@
 import { S as a } from "./line/calendar-line.svg-DHsuXoUL.js";
 import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as l } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as s } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
 import { S as i } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
 import { S as m } from "./solid/calendars-solid.svg-rClh_xBu.js";
-import { S as p } from "./solid/gear-solid.svg-C6vEx0Wx.js";
-import { S as x } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as G } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as t } from "./solid/gear-solid.svg-C6vEx0Wx.js";
+import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
+import { S as C } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as L } from "./solid/plus-large-solid.svg-CdPjcQXo.js";
+import { S as G } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as k } from "./solid/square-plus-solid.svg-SHmhFLCy.js";
 export {
   S as CalendarDaysSolid,
   a as CalendarLine,
-  l as CalendarLinesSolid,
+  s as CalendarLinesSolid,
   i as CalendarWeekSolid,
   m as CalendarsSolid,
-  p as GearSolid,
-  x as Grid2Solid,
-  G as PenToSquareSolid
+  t as GearSolid,
+  n as Grid2Solid,
+  C as PenToSquareSolid,
+  L as PlusLargeSolid,
+  G as PlusSolid,
+  k as SquarePlusSolid
 };

package/dist/assets/icons/index.ts-CS7JEbxh.js

@@ -0,0 +1,28 @@
+import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
+import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
+import { S as r } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as a } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
+import { S as l } from "./solid/calendars-solid.svg-rClh_xBu.js";
+import { S as e } from "./solid/gear-solid.svg-C6vEx0Wx.js";
+import { S as i } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
+import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as s } from "./solid/plus-large-solid.svg-CdPjcQXo.js";
+import { S as m } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as n } from "./solid/square-plus-solid.svg-SHmhFLCy.js";
+const G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CalendarDaysSolid: S,
+  CalendarLine: o,
+  CalendarLinesSolid: r,
+  CalendarWeekSolid: a,
+  CalendarsSolid: l,
+  GearSolid: e,
+  Grid2Solid: i,
+  PenToSquareSolid: d,
+  PlusLargeSolid: s,
+  PlusSolid: m,
+  SquarePlusSolid: n
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  G as S
+};

package/dist/assets/icons/solid/index.d.ts

@@ -5,3 +5,6 @@ export { default as CalendarsSolid } from './calendars-solid.svg';
 export { default as GearSolid } from './gear-solid.svg';
 export { default as Grid2Solid } from './grid-2-solid.svg';
 export { default as PenToSquareSolid } from './pen-to-square-solid.svg';
+export { default as PlusLargeSolid } from './plus-large-solid.svg';
+export { default as PlusSolid } from './plus-solid.svg';
+export { default as SquarePlusSolid } from './square-plus-solid.svg';

package/dist/assets/icons/solid/index.mjs

@@ -1,16 +1,22 @@
 import { S as a } from "./calendar-days-solid.svg-CIj8vf6t.js";
 import { S } from "./calendar-lines-solid.svg-D2qG_E7t.js";
-import { S as l } from "./calendar-week-solid.svg-CVmrJtif.js";
+import { S as s } from "./calendar-week-solid.svg-CVmrJtif.js";
 import { S as i } from "./calendars-solid.svg-rClh_xBu.js";
 import { S as m } from "./gear-solid.svg-C6vEx0Wx.js";
 import { S as t } from "./grid-2-solid.svg-BRtzwK6Y.js";
 import { S as n } from "./pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as C } from "./plus-large-solid.svg-CdPjcQXo.js";
+import { S as q } from "./plus-solid.svg-piiaS3kO.js";
+import { S as L } from "./square-plus-solid.svg-SHmhFLCy.js";
 export {
   a as CalendarDaysSolid,
   S as CalendarLinesSolid,
-  l as CalendarWeekSolid,
+  s as CalendarWeekSolid,
   i as CalendarsSolid,
   m as GearSolid,
   t as Grid2Solid,
-  n as PenToSquareSolid
+  n as PenToSquareSolid,
+  C as PlusLargeSolid,
+  q as PlusSolid,
+  L as SquarePlusSolid
 };

package/dist/assets/icons/solid/plus-large-solid.svg-CdPjcQXo.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_271_18)" }, /* @__PURE__ */ e.createElement("path", { d: "M13.5 2C13.5 1.17031 12.8297 0.5 12 0.5C11.1703 0.5 10.5 1.17031 10.5 2V11H1.5C0.670312 11 0 11.6703 0 12.5C0 13.3297 0.670312 14 1.5 14H10.5V23C10.5 23.8297 11.1703 24.5 12 24.5C12.8297 24.5 13.5 23.8297 13.5 23V14H22.5C23.3297 14 24 13.3297 24 12.5C24 11.6703 23.3297 11 22.5 11H13.5V2Z", fill: "currentColor" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_271_18" }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, fill: "currentColor", transform: "translate(0 0.5)" }))));
+export {
+  l as S
+};

package/dist/assets/icons/solid/plus-solid.svg-piiaS3kO.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 27, viewBox: "0 0 24 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M13.7143 4.21875C13.7143 3.28535 12.9482 2.53125 12 2.53125C11.0518 2.53125 10.2857 3.28535 10.2857 4.21875V11.8125H2.57146C1.62325 11.8125 0.857178 12.5666 0.857178 13.5C0.857178 14.4334 1.62325 15.1875 2.57146 15.1875H10.2857V22.7812C10.2857 23.7146 11.0518 24.4688 12 24.4688C12.9482 24.4688 13.7143 23.7146 13.7143 22.7812V15.1875H21.4286C22.3768 15.1875 23.1429 14.4334 23.1429 13.5C23.1429 12.5666 22.3768 11.8125 21.4286 11.8125H13.7143V4.21875Z", fill: "currentColor" }));
+export {
+  l as S
+};

package/dist/assets/icons/solid/square-plus-solid.svg-SHmhFLCy.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 27, viewBox: "0 0 24 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.42857 1.6875C1.5375 1.6875 0 3.20098 0 5.0625V21.9375C0 23.799 1.5375 25.3125 3.42857 25.3125H20.5714C22.4625 25.3125 24 23.799 24 21.9375V5.0625C24 3.20098 22.4625 1.6875 20.5714 1.6875H3.42857ZM10.7143 18.1406V14.7656H7.28571C6.57321 14.7656 6 14.2014 6 13.5C6 12.7986 6.57321 12.2344 7.28571 12.2344H10.7143V8.85938C10.7143 8.15801 11.2875 7.59375 12 7.59375C12.7125 7.59375 13.2857 8.15801 13.2857 8.85938V12.2344H16.7143C17.4268 12.2344 18 12.7986 18 13.5C18 14.2014 17.4268 14.7656 16.7143 14.7656H13.2857V18.1406C13.2857 18.842 12.7125 19.4062 12 19.4062C11.2875 19.4062 10.7143 18.842 10.7143 18.1406Z", fill: "currentColor" }));
+export {
+  C as S
+};

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,8 +1,8 @@
-import { jsx as y, jsxs as P } from "react/jsx-runtime";
-import { useState as V, useRef as o, useImperativeHandle as z, useEffect as S } from "react";
+import { jsx as y, jsxs as V } from "react/jsx-runtime";
+import { useState as z, useRef as o, useImperativeHandle as G, useEffect as S } from "react";
 import b from "basic-styled";
-import G from "../Overlay/Overlay.mjs";
-const J = b.div`
+import J from "../Overlay/Overlay.mjs";
+const K = b.div`
   width: 100%;
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   overflow-y: auto;
@@ -18,7 +18,7 @@ const J = b.div`
     transform ${({ transitionDuration: t }) => `${t}ms`}
       ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
-`, K = b.div`
+`, N = b.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -33,7 +33,7 @@ const J = b.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, N = b.div`
+`, Q = b.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -44,7 +44,7 @@ const J = b.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function _({
+function C({
   open: t,
   onClose: c,
   children: T,
@@ -52,12 +52,13 @@ function _({
   onClick: $,
   ref: j,
   hideDragHandleBar: I,
-  style: O,
-  ...A
+  hideOverlay: O,
+  style: A,
+  ...F
 }) {
-  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) => {
+  const [L, h] = z(!1), l = o(null), k = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), W = o(0.25);
+  G(j, () => l.current);
+  const q = (r) => {
     r.stopPropagation(), typeof $ == "function" && $(r);
   };
   return S(() => {
@@ -68,7 +69,7 @@ function _({
       r && cancelAnimationFrame(r);
     };
   }, [t]), S(() => {
-    const r = l.current, n = R.current, k = (e) => {
+    const r = l.current, n = k.current, R = (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")));
     }, x = (e) => {
       if (!r || !d.current) return;
@@ -77,41 +78,44 @@ function _({
       f.current = e;
       const D = Date.now(), M = D - p.current;
       if (M > 0) {
-        const q = f.current;
-        g.current = (e - q) / M, p.current = D;
+        const P = f.current;
+        g.current = (e - P) / M, p.current = D;
       }
       n && (n.style.opacity = `${Math.max(0, 1 - u / (m.current * 2))}`), r.style.transform = `translate3d(0, ${u}px, 0)`;
     }, 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 * F.current;
+      const e = f.current - v.current, u = m.current * W.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"));
-    }, w = (e) => k(e.clientY), H = (e) => x(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
+    }, w = (e) => R(e.clientY), H = (e) => x(e.clientY), Y = (e) => R(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);
     };
   }, [L, c, s]), /* @__PURE__ */ y(
-    G,
+    J,
     {
-      ref: R,
+      ref: k,
       open: t,
       onClose: c,
       transitionDuration: s,
       placement: "center-bottom",
-      children: /* @__PURE__ */ P(
-        J,
+      css: O ? {
+        backgroundColor: "transparent !important"
+      } : void 0,
+      children: /* @__PURE__ */ V(
+        K,
         {
           ref: l,
           ease: t ? "in" : "out",
           transitionDuration: s,
-          onClick: W,
-          ...A,
+          onClick: q,
+          ...F,
           style: {
             transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
-            ...O
+            ...A
           },
           children: [
-            !I && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
+            !I && /* @__PURE__ */ y(N, { ref: i, children: /* @__PURE__ */ y(Q, {}) }),
             T
           ]
         }
@@ -120,5 +124,5 @@ function _({
   );
 }
 export {
-  _ as default
+  C as default
 };

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

@@ -1,7 +1,9 @@
 import { ComponentPropsWithRef } from 'react';
-export interface BottomSheetProps extends ComponentPropsWithRef<"div"> {
+import { UtilityProps } from '../../typings/utility';
+export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;
     hideDragHandleBar?: boolean;
+    hideOverlay?: boolean;
 }

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-export interface DialogProps extends ComponentPropsWithRef<"div"> {
+import { UtilityProps } from '../../typings/utility';
+export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;

package/dist/components/Icon/Icon.mjs

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { Children as p, isValidElement as l } from "react";
-import { S as a } from "../../assets/icons/index.ts-BL4wFg6B.js";
+import { S as a } from "../../assets/icons/index.ts-CS7JEbxh.js";
 import c from "basic-styled";
 import d from "../../utils/getValueByPath.mjs";
 const f = c.svg`

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-export interface OverlayProps extends ComponentPropsWithRef<"div"> {
+import { UtilityProps } from '../../typings/utility';
+export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;

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

@@ -1,5 +1,6 @@
 import { ReactNode, ComponentPropsWithRef } from 'react';
-export interface SnackbarProps extends ComponentPropsWithRef<"div"> {
+import { UtilityProps } from '../../typings/utility';
+export interface SnackbarProps extends ComponentPropsWithRef<"div">, UtilityProps {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;

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("react").JSX.Element;
+declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, css, onFocus, onBlur, ...props }: TextFieldProps): import("react").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.mjs

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

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export interface TextFieldProps extends Omit<ComponentPropsWithRef<"input">, "children" | "size"> {
+import { UtilityProps } from '../../typings/utility';
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<"input">, "children" | "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.0.12",
+  "version": "0.0.14",
   "type": "module",
   "files": [
     "dist"

package/dist/assets/icons/index.ts-BL4wFg6B.js

@@ -1,22 +0,0 @@
-import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
-import { S as r } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as a } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
-import { S } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
-import { S as e } from "./solid/calendars-solid.svg-rClh_xBu.js";
-import { S as i } from "./solid/gear-solid.svg-C6vEx0Wx.js";
-import { S as l } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
-const C = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  CalendarDaysSolid: r,
-  CalendarLine: o,
-  CalendarLinesSolid: a,
-  CalendarWeekSolid: S,
-  CalendarsSolid: e,
-  GearSolid: i,
-  Grid2Solid: l,
-  PenToSquareSolid: d
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  C as S
-};