@shiflo/ui 0.0.2 → 0.0.4

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

@@ -1,4 +1,4 @@
 import { default as Box } from './Box';
-import { BaseBoxProps } from './Box.typing';
-export type { BaseBoxProps };
+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.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 { BaseTypographyProps } from './Typography.typing';
-export type { BaseTypographyProps };
+import { BaseTypographyProps, TypographyProps } from './Typography.typing';
+export type { BaseTypographyProps, TypographyProps };
 export default Typography;

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", 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.d.ts

@@ -1,2 +1,2 @@
 import { UtilityProps } from '../typings/utility';
-export default function getUtilityProps<T>({ display, flex, flexBasis, flexDirection, flexFlow, flexGrow, flexShrink, flexWrap, justifyContent, alignItems, m, mt, mr, mb, ml, p, pt, pr, pb, pl, border, borderTop, borderBottom, borderRight, borderLeft, br, brtl, brtr, brml, brmr }: T & UtilityProps): {};
+export default function getUtilityProps<T>({ display, flex, flexBasis, flexDirection, flexFlow, flexGrow, flexShrink, flexWrap, justifyContent, alignItems, m, mt, mr, mb, ml, p, pt, pr, pb, pl, border, borderTop, borderBottom, borderRight, borderLeft, br, brtl, brtr, brml, brmr, gap }: T & UtilityProps): {};

package/dist/utils/getUtilityProps.mjs

@@ -1,6 +1,6 @@
 import g from "../theme/radius.mjs";
 import s from "../theme/spacing.mjs";
-function N({
+function Q({
   display: a,
   flex: t,
   flexBasis: n,
@@ -30,11 +30,12 @@ function N({
   brtl: B,
   brtr: E,
   brml: H,
-  brmr: J
+  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] }), 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 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;
 }
 export {
-  N as default
+  Q as default
 };

package/package.json

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