@shiflo/ui 0.0.0 → 0.0.1

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

@@ -1,3 +1,3 @@
-import { BoxProps } from './Box.typing';
-declare function Box(props: BoxProps): import("react").JSX.Element;
+import { BoxComponent } from './Box.typing';
+declare const Box: BoxComponent;
 export default Box;

package/dist/components/Box/Box.mjs

@@ -1,8 +1,8 @@
 import { jsx as c } from "react/jsx-runtime";
 import d from "basic-styled";
 import a from "../../utils/getUtilityProps.mjs";
-import t from "../../utils/getValueByPath.mjs";
-const f = d.div`
+import s from "../../utils/getValueByPath.mjs";
+const m = d.div`
   transition:
     background-color 0.2s,
     border-width 0.2s,
@@ -10,20 +10,17 @@ const f = d.div`
     border-color 0.2s,
     color 0.2s;
 
-  ${({ theme: { palette: o }, backgroundColor: s, borderColor: i, color: e, ...n }) => {
+  ${({ theme: { palette: o }, backgroundColor: t, borderColor: i, color: e, ...n }) => {
   const r = {};
-  return Object.assign(r, a(n)), s && Object.assign(r, {
-    backgroundColor: t(o, s)
+  return Object.assign(r, a(n)), t && Object.assign(r, {
+    backgroundColor: s(o, t)
   }), i && Object.assign(r, {
-    borderColor: t(o, i)
+    borderColor: s(o, i)
   }), e && Object.assign(r, {
-    color: t(o, e)
+    color: s(o, e)
   }), r;
 }}
-`;
-function u(o) {
-  return /* @__PURE__ */ c(f, { ...o });
-}
+`, u = (o) => /* @__PURE__ */ c(m, { ...o });
 export {
   u as default
 };

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

@@ -1,8 +1,11 @@
-import { ComponentPropsWithRef } from 'react';
+import { ElementType, ReactNode } from 'react';
+import { PolymorphicComponentProps } from '../../typings/component';
 import { RecursionPath, UtilityProps } from '../../typings/utility';
 import { BasicTheme } from 'basic-styled';
-export interface BoxProps extends ComponentPropsWithRef<"div">, UtilityProps {
+export interface BaseBoxProps extends UtilityProps {
     backgroundColor?: RecursionPath<BasicTheme["palette"]>;
     color?: RecursionPath<BasicTheme["palette"]> | "inherit";
     borderColor?: RecursionPath<BasicTheme["palette"]>;
 }
+export type BoxProps<T extends ElementType> = BaseBoxProps & PolymorphicComponentProps<T>;
+export type BoxComponent<DT extends ElementType = "div"> = <T extends ElementType = DT>(props: BoxProps<T>) => ReactNode;

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 } from './Box.typing';
+export type { BaseBoxProps };
 export default Box;

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

@@ -1,3 +1,3 @@
-import { TypographyProps } from './Typography.typing';
-declare function Typography({ ref, variant, fontWeight, ...props }: TypographyProps): import("react").JSX.Element;
+import { TypographyComponent } from './Typography.typing';
+declare const Typography: TypographyComponent;
 export default Typography;

package/dist/components/Typography/Typography.mjs

@@ -1,8 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import p from "basic-styled";
+import { jsx as p } from "react/jsx-runtime";
+import b from "basic-styled";
 import f from "../../utils/getUtilityProps.mjs";
-import n from "../../utils/getValueByPath.mjs";
-const y = p.div`
+import i from "../../utils/getValueByPath.mjs";
+const h = b.div`
   transition:
     font-size 0.2s,
     line-height 0.2s,
@@ -11,17 +11,17 @@ const y = p.div`
     border-color 0.2s,
     color 0.2s;
 
-  ${({ theme: { typography: o, palette: t }, variant: i, color: r, fontWeight: l, borderColor: s, ...d }) => {
-  const { fontSize: a, lineHeight: b } = o[i || "body2"], e = {
+  ${({ theme: { typography: o, palette: e }, variant: s, color: n, fontWeight: l, borderColor: r, ...d }) => {
+  const { fontSize: a, lineHeight: c } = o[s || "body2"], t = {
     fontSize: a,
-    lineHeight: b,
+    lineHeight: c,
     fontWeight: l
   };
-  return Object.assign(e, f(d)), s && Object.assign(e, {
-    borderColor: n(t, s)
-  }), Object.assign(e, {
-    color: n(t, r)
-  }), e;
+  return Object.assign(t, f(d)), r && Object.assign(t, {
+    borderColor: i(e, r)
+  }), Object.assign(t, {
+    color: i(e, n)
+  }), t;
 }};
 
   ${({ noWrap: o }) => o ? {
@@ -36,10 +36,7 @@ const y = p.div`
   "-webkit-line-clamp": o,
   "-webkit-box-orient": "vertical"
 } : {}};
-`;
-function u({ ref: o, variant: t = "body2", fontWeight: i = 400, ...r }) {
-  return /* @__PURE__ */ c(y, { ref: o, variant: t, fontWeight: i, ...r });
-}
+`, u = (o) => /* @__PURE__ */ p(h, { ...o });
 export {
   u as default
 };

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

@@ -1,7 +1,8 @@
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, ReactNode, ElementType } from 'react';
+import { PolymorphicComponentProps } from '../../typings/component';
 import { UtilityProps, RecursionPath } from '../../typings/utility';
 import { BasicTheme } from 'basic-styled';
-export interface TypographyProps extends ComponentPropsWithRef<"div">, UtilityProps {
+export interface BaseTypographyProps extends ComponentPropsWithRef<"div">, UtilityProps {
     variant?: keyof BasicTheme["typography"];
     fontWeight?: 400 | 500 | 700;
     color?: RecursionPath<BasicTheme["palette"]> | "inherit";
@@ -10,3 +11,5 @@ export interface TypographyProps extends ComponentPropsWithRef<"div">, UtilityPr
     noWrap?: boolean;
     lineClamp?: number;
 }
+export type TypographyProps<T extends ElementType> = BaseTypographyProps & PolymorphicComponentProps<T>;
+export type TypographyComponent<DT extends ElementType = "div"> = <T extends ElementType = DT>(props: TypographyProps<T>) => ReactNode;

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 } from './Typography.typing';
+export type { BaseTypographyProps };
 export default Typography;

package/dist/typings/component.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType } from 'react';
+export type PolymorphicComponentProps<T extends ElementType> = {
+    as?: T | ElementType;
+} & ComponentPropsWithoutRef<T> & {
+    ref?: PolymorphicRef<T>;
+};
+export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>["ref"];

package/dist/typings/component.mjs

@@ -0,0 +1 @@
+

package/package.json

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