@shiflo/ui 0.0.3 → 0.0.5

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

@@ -1,4 +1,4 @@
 import { default as Box } from './Box';
-import { BoxProps } from './Box.typing';
-export type { BoxProps };
+import { BaseBoxProps, BoxProps } from './Box.typing';
+export type { BaseBoxProps, BoxProps };
 export default Box;

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export interface BaseButtonProps extends ComponentPropsWithRef<"button"> {
+import { UtilityProps } from '../../typings/utility';
+export interface BaseButtonProps extends Pick<UtilityProps, "css"> {
     size?: "xSmall" | "small" | "medium" | "large";
     startIcon?: ReactNode;
     endIcon?: ReactNode;
@@ -16,4 +17,4 @@ export interface TextButtonProps extends BaseButtonProps {
     variant?: "text";
     color?: "secondary";
 }
-export type ButtonProps = FilledButtonProps | GhostButtonProps | TextButtonProps;
+export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps) & ComponentPropsWithRef<"button">;

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

@@ -1,4 +1,4 @@
 import { default as Button } from './Button';
-import { ButtonProps } from './Button.typing';
-export type { ButtonProps };
+import { BaseButtonProps, ButtonProps } from './Button.typing';
+export type { BaseButtonProps, ButtonProps };
 export default Button;

package/dist/components/Icon/Icon.mjs

@@ -1,27 +1,30 @@
-import { jsx as h } from "react/jsx-runtime";
-import { Children as l, isValidElement as p } from "react";
+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 c from "basic-styled";
-import f from "../../utils/getValueByPath.mjs";
-const d = c.svg`
+import d from "../../utils/getValueByPath.mjs";
+const f = c.svg`
   transition:
     width 0.2s,
     height 0.2s,
     color 0.2s;
-  color: ${({ theme: { palette: o }, color: r }) => f(o, r || "") || "inherit"};
+
+  width: ${({ width: t }) => t || "24px"};
+  height: ${({ height: t }) => t || "24px"};
+  color: ${({ theme: { palette: t }, color: r }) => d(t, r || "") || "inherit"};
 `;
-function y({ ref: o, name: r, width: i = 24, height: n = 24, ...s }) {
-  const m = a[r];
-  return l.map(m(), (e) => {
-    if (!p(e))
+function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
+  const h = a[r];
+  return p.map(h(), (i) => {
+    if (!l(i))
       return null;
-    const t = {
+    const o = {
       ...s,
-      ...e.props
+      ...i.props
     };
-    return t.width = i ?? t.width, t.height = n ?? t.height, /* @__PURE__ */ h(d, { ref: o, ...t });
+    return o.width = e ?? o.width, o.height = n ?? o.height, /* @__PURE__ */ m(f, { ref: t, ...o });
   });
 }
 export {
-  y as default
+  v as default
 };

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

@@ -1,8 +1,9 @@
 import { ComponentPropsWithRef } from 'react';
-import { RecursionPath } from '../../typings/utility';
+import { RecursionPath, UtilityProps } from '../../typings/utility';
 import { BasicTheme } from 'basic-styled';
 import type * as Svgs from "../../assets/icons";
-export interface IconProps extends Omit<ComponentPropsWithRef<"svg">, "children"> {
+export interface BaseIconProps extends Pick<UtilityProps, "css"> {
     name: keyof typeof Svgs;
     color?: RecursionPath<BasicTheme["palette"]> | "inherit";
 }
+export type IconProps = BaseIconProps & Omit<ComponentPropsWithRef<"svg">, "children">;

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

@@ -1,4 +1,4 @@
 import { default as Icon } from './Icon';
-import { IconProps } from './Icon.typing';
-export type { IconProps };
+import { BaseIconProps, IconProps } from './Icon.typing';
+export type { BaseIconProps, IconProps };
 export default Icon;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-export interface TagProps extends ComponentPropsWithRef<"span"> {
+import { UtilityProps } from '../../typings/utility';
+export interface TagProps extends ComponentPropsWithRef<"span">, Pick<UtilityProps, "css"> {
     color?: "primary" | "warning" | "error" | "info" | "success";
 }

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

@@ -1,4 +1,4 @@
 import { default as Typography } from './Typography';
-import { TypographyProps } from './Typography.typing';
-export type { TypographyProps };
+import { BaseTypographyProps, TypographyProps } from './Typography.typing';
+export type { BaseTypographyProps, TypographyProps };
 export default Typography;

package/dist/theme/ThemeProvider.mjs

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import m from "basic-styled/setup/createBuilder";
 import i from "basic-styled/setup/ResetStyle";
-import f from "/Users/x/WebstormProjects/shiflo-ui/node_modules/.pnpm/basic-styled@0.1.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/basic-styled/dist/setup/ThemeProvider.mjs";
+import f from "basic-styled/setup/ThemeProvider";
 import l from "./dark.mjs";
 import p from "./GlobalStyle.mjs";
 import h from "./light.mjs";

package/dist/typings/utility.d.ts

@@ -1,7 +1,10 @@
+import { CSS } from 'basic-styled/core/typing';
 import { default as radius } from '../theme/radius';
 import { default as spacing } from '../theme/spacing';
 import { Properties } from 'csstype';
-export type UtilityProps = Partial<Pick<Properties, "display" | "alignItems" | "justifyContent" | "flex" | "flexWrap" | "flexDirection" | "flexGrow" | "flexFlow" | "flexBasis" | "flexShrink" | "border" | "borderTop" | "borderBottom" | "borderRight" | "borderLeft"> & Record<"m" | "mt" | "mb" | "mr" | "ml" | "p" | "pt" | "pb" | "pl" | "pr" | "gap", keyof typeof spacing> & Record<"br" | "brtl" | "brtr" | "brml" | "brmr", keyof typeof radius>>;
+export type UtilityProps = Partial<Pick<Properties, "display" | "alignItems" | "justifyContent" | "flex" | "flexWrap" | "flexDirection" | "flexGrow" | "flexFlow" | "flexBasis" | "flexShrink" | "border" | "borderTop" | "borderBottom" | "borderRight" | "borderLeft"> & Record<"m" | "mt" | "mb" | "mr" | "ml" | "p" | "pt" | "pb" | "pl" | "pr" | "gap", keyof typeof spacing> & Record<"br" | "brtl" | "brtr" | "brml" | "brmr", keyof typeof radius>> & {
+    css?: CSS;
+};
 export type RecursionPath<T, Prefix extends string = ""> = Exclude<{
     [K in keyof T & (string | number)]: T[K] extends object ? `${Prefix}${K}` | RecursionPath<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
 }[keyof T & (string | number)], "primary" | "secondary">;

package/dist/utils/getUtilityProps.mjs

@@ -1,7 +1,7 @@
-import g from "../theme/radius.mjs";
+import a from "../theme/radius.mjs";
 import s from "../theme/spacing.mjs";
 function Q({
-  display: a,
+  display: g,
   flex: t,
   flexBasis: n,
   flexDirection: c,
@@ -11,30 +11,30 @@ function Q({
   flexWrap: e,
   justifyContent: b,
   alignItems: d,
-  m: R,
-  mt: o,
+  m: o,
+  mt: R,
   mr: u,
   mb: p,
   ml: h,
-  p: L,
-  pt: T,
-  pr: m,
+  p: m,
+  pt: L,
+  pr: T,
   pb: r,
-  pl: P,
-  border: U,
-  borderTop: q,
-  borderBottom: v,
-  borderRight: y,
-  borderLeft: z,
-  br: A,
-  brtl: B,
+  pl: B,
+  border: P,
+  borderTop: U,
+  borderBottom: q,
+  borderRight: v,
+  borderLeft: y,
+  br: z,
+  brtl: A,
   brtr: E,
   brml: H,
   brmr: J,
   gap: K
 }) {
   const i = {};
-  return a && Object.assign(i, { display: a }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), R && Object.assign(i, { margin: s[R] }), o && Object.assign(i, { marginTop: s[o] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), L && Object.assign(i, { padding: s[L] }), T && Object.assign(i, { paddingTop: s[T] }), r && Object.assign(i, { paddingRight: s[r] }), P && Object.assign(i, { paddingLeft: s[P] }), m && Object.assign(i, { paddingRight: s[m] }), K && Object.assign(i, { gap: s[K] }), U && Object.assign(i, { border: U }), q && Object.assign(i, { borderTop: q }), v && Object.assign(i, { borderBottom: v }), y && Object.assign(i, { borderRight: y }), z && Object.assign(i, { borderLeft: z }), A && Object.assign(i, { borderRadius: g[A] }), B && Object.assign(i, { borderTopLeftRadius: g[B] }), E && Object.assign(i, { borderTopRightRadius: g[E] }), H && Object.assign(i, { borderBottomLeftRadius: g[H] }), J && Object.assign(i, { borderBottomRightRadius: g[J] }), i;
+  return g && Object.assign(i, { display: g }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), o && Object.assign(i, { margin: s[o] }), R && Object.assign(i, { marginTop: s[R] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), m && Object.assign(i, { padding: s[m] }), L && Object.assign(i, { paddingTop: s[L] }), r && Object.assign(i, { paddingBottom: s[r] }), B && Object.assign(i, { paddingLeft: s[B] }), T && Object.assign(i, { paddingRight: s[T] }), K && Object.assign(i, { gap: s[K] }), P && Object.assign(i, { border: P }), U && Object.assign(i, { borderTop: U }), q && Object.assign(i, { borderBottom: q }), v && Object.assign(i, { borderRight: v }), y && Object.assign(i, { borderLeft: y }), z && Object.assign(i, { borderRadius: a[z] }), A && Object.assign(i, { borderTopLeftRadius: a[A] }), E && Object.assign(i, { borderTopRightRadius: a[E] }), H && Object.assign(i, { borderBottomLeftRadius: a[H] }), J && Object.assign(i, { borderBottomRightRadius: a[J] }), i;
 }
 export {
   Q as default

package/dist/utils/getValueByPath.mjs

@@ -1,6 +1,6 @@
 function i(t, e = "") {
   if (e)
-    return e.split(".").reduce((r, u) => r && r[u], t) || e;
+    return e.split(".").reduce((r, u) => r && r[u], t) || e || void 0;
 }
 export {
   i as default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "dist"
@@ -85,7 +85,7 @@
     "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
-    "basic-styled": ">=0.1.8",
+    "basic-styled": ">=0.1.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/dist/typings/component.mjs

@@ -1 +0,0 @@
-

package/dist/typings/utility.mjs

@@ -1 +0,0 @@
-