@purr-react-styled-components/components.flex-box 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),y=require("clsx"),g=require("react"),$=require("@purr-core/utils.helpers"),i=require("styled-components"),c=({$alignItems:l,$justifyContent:n,$flexDirection:t,$gap:o,$wrap:s,$fullWidth:e})=>i.css(["display:flex;justify-content:",";align-items:",";flex-direction:",";gap:",";flex-wrap:",";width:",";"],n,l,t,o,s,e?"100%":"auto"),m={Div:i.div.withConfig({displayName:"_style__Div",componentId:"sc-1ds73kg-0"})(["",";"],c),Span:i.span.withConfig({displayName:"_style__Span",componentId:"sc-1ds73kg-1"})(["",";"],c)},b=({children:l,className:n,flexDirection:t="row",alignItems:o="center",justifyContent:s="center",variant:e="div",gap:r="0px",wrap:x="nowrap",fullWidth:a=!1,htmlAttributes:d})=>{const f=g.useMemo(()=>{const p=$.capitalize(e);return m[p]},[e]);return u.jsx(f,{...d,$flexDirection:t,$alignItems:o,$justifyContent:s,$gap:r,$wrap:x,$fullWidth:a,className:y("flex-box",`flex-box--direction-${t}`,`flex-box--alignItems-${o}`,`flex-box--justifyContent-${s}`,`flex-box--gap-${r}`,`flex-box--wrap-${x}`,`flex-box--variant-${e}`,n),children:l})};exports.FlexBox=b;
+'use strict';var c=require('clsx'),S=require('react'),utils_helpers=require('@purr-core/utils.helpers'),f=require('styled-components');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var S__default=/*#__PURE__*/_interopDefault(S);var f__default=/*#__PURE__*/_interopDefault(f);var i=({$alignItems:x,$justifyContent:l,$flexDirection:e,$gap:t,$wrap:r,$fullWidth:o})=>f.css`
+    display: flex;
+    justify-content: ${l};
+    align-items: ${x};
+    flex-direction: ${e};
+    gap: ${t};
+    flex-wrap: ${r};
+    width: ${o?"100%":"auto"};
+  `,m={Div:f__default.default.div`
+    ${i};
+  `,Span:f__default.default.span`
+    ${i};
+  `};var T=({children:x,className:l,flexDirection:e="row",alignItems:t="center",justifyContent:r="center",variant:o="div",gap:p="0px",wrap:s="nowrap",fullWidth:n=false,htmlAttributes:$})=>{let d=S.useMemo(()=>{let a=utils_helpers.capitalize(o);return m[a]},[o]);return S__default.default.createElement(d,{...$,$flexDirection:e,$alignItems:t,$justifyContent:r,$gap:p,$wrap:s,$fullWidth:n,className:c__default.default("flex-box",`flex-box--direction-${e}`,`flex-box--alignItems-${t}`,`flex-box--justifyContent-${r}`,`flex-box--gap-${p}`,`flex-box--wrap-${s}`,`flex-box--variant-${o}`,l)},x)};exports.FlexBox=T;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,8 +1,8 @@
+import React, { JSX, HTMLAttributes, ReactNode } from 'react';
 import { Property } from 'csstype';
-import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { IExtendable } from '@purr-core/utils.definitions';
 
-export interface IFlexBoxProps {
+interface IFlexBoxProps {
     alignItems?: Property.AlignItems;
     justifyContent?: Property.JustifyContent;
     flexDirection?: Property.FlexDirection;
@@ -14,7 +14,7 @@ export interface IFlexBoxProps {
     children?: ReactNode;
     className?: string;
 }
-export interface IStyledFlexBoxProps {
+interface IStyledFlexBoxProps {
     $alignItems?: Property.AlignItems;
     $justifyContent?: Property.JustifyContent;
     $flexDirection?: Property.FlexDirection;
@@ -22,3 +22,7 @@ export interface IStyledFlexBoxProps {
     $wrap?: Property.FlexWrap;
     $fullWidth?: boolean;
 }
+
+declare const FlexBox: ({ children, className, flexDirection, alignItems, justifyContent, variant, gap, wrap, fullWidth, htmlAttributes, }: IFlexBoxProps) => React.JSX.Element;
+
+export { FlexBox, type IFlexBoxProps, type IStyledFlexBoxProps };

package/dist/index.d.ts

@@ -1,2 +1,28 @@
-export * from './_components';
-export * from './_types';
+import React, { JSX, HTMLAttributes, ReactNode } from 'react';
+import { Property } from 'csstype';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+interface IFlexBoxProps {
+    alignItems?: Property.AlignItems;
+    justifyContent?: Property.JustifyContent;
+    flexDirection?: Property.FlexDirection;
+    variant?: keyof JSX.IntrinsicElements;
+    gap?: Property.Gap;
+    wrap?: Property.FlexWrap;
+    fullWidth?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+    children?: ReactNode;
+    className?: string;
+}
+interface IStyledFlexBoxProps {
+    $alignItems?: Property.AlignItems;
+    $justifyContent?: Property.JustifyContent;
+    $flexDirection?: Property.FlexDirection;
+    $gap?: Property.Gap;
+    $wrap?: Property.FlexWrap;
+    $fullWidth?: boolean;
+}
+
+declare const FlexBox: ({ children, className, flexDirection, alignItems, justifyContent, variant, gap, wrap, fullWidth, htmlAttributes, }: IFlexBoxProps) => React.JSX.Element;
+
+export { FlexBox, type IFlexBoxProps, type IStyledFlexBoxProps };

package/dist/index.js

@@ -1,42 +1,13 @@
-import { jsx as d } from "react/jsx-runtime";
-import y from "clsx";
-import { useMemo as $ } from "react";
-import { capitalize as g } from "@purr-core/utils.helpers";
-import x, { css as u } from "styled-components";
-const f = ({
-  $alignItems: l,
-  $justifyContent: s,
-  $flexDirection: o,
-  $gap: t,
-  $wrap: i,
-  $fullWidth: e
-}) => u(["display:flex;justify-content:", ";align-items:", ";flex-direction:", ";gap:", ";flex-wrap:", ";width:", ";"], s, l, o, t, i, e ? "100%" : "auto"), b = {
-  Div: x.div.withConfig({
-    displayName: "_style__Div",
-    componentId: "sc-1ds73kg-0"
-  })(["", ";"], f),
-  Span: x.span.withConfig({
-    displayName: "_style__Span",
-    componentId: "sc-1ds73kg-1"
-  })(["", ";"], f)
-}, v = ({
-  children: l,
-  className: s,
-  flexDirection: o = "row",
-  alignItems: t = "center",
-  justifyContent: i = "center",
-  variant: e = "div",
-  gap: n = "0px",
-  wrap: r = "nowrap",
-  fullWidth: p = !1,
-  htmlAttributes: a
-}) => {
-  const m = $(() => {
-    const c = g(e);
-    return b[c];
-  }, [e]);
-  return /* @__PURE__ */ d(m, { ...a, $flexDirection: o, $alignItems: t, $justifyContent: i, $gap: n, $wrap: r, $fullWidth: p, className: y("flex-box", `flex-box--direction-${o}`, `flex-box--alignItems-${t}`, `flex-box--justifyContent-${i}`, `flex-box--gap-${n}`, `flex-box--wrap-${r}`, `flex-box--variant-${e}`, s), children: l });
-};
-export {
-  v as FlexBox
-};
+import c from'clsx';import S,{useMemo}from'react';import {capitalize}from'@purr-core/utils.helpers';import f,{css}from'styled-components';var i=({$alignItems:x,$justifyContent:l,$flexDirection:e,$gap:t,$wrap:r,$fullWidth:o})=>css`
+    display: flex;
+    justify-content: ${l};
+    align-items: ${x};
+    flex-direction: ${e};
+    gap: ${t};
+    flex-wrap: ${r};
+    width: ${o?"100%":"auto"};
+  `,m={Div:f.div`
+    ${i};
+  `,Span:f.span`
+    ${i};
+  `};var T=({children:x,className:l,flexDirection:e="row",alignItems:t="center",justifyContent:r="center",variant:o="div",gap:p="0px",wrap:s="nowrap",fullWidth:n=false,htmlAttributes:$})=>{let d=useMemo(()=>{let a=capitalize(o);return m[a]},[o]);return S.createElement(d,{...$,$flexDirection:e,$alignItems:t,$justifyContent:r,$gap:p,$wrap:s,$fullWidth:n,className:c("flex-box",`flex-box--direction-${e}`,`flex-box--alignItems-${t}`,`flex-box--justifyContent-${r}`,`flex-box--gap-${p}`,`flex-box--wrap-${s}`,`flex-box--variant-${o}`,l)},x)};export{T as FlexBox};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.flex-box",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -26,8 +26,8 @@
     "styled-components": "*",
     "csstype": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-core/utils.helpers": "0.0.10"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-core/utils.helpers": "0.0.12"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -36,6 +36,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { IFlexBoxProps } from './_types';
-
-export declare const FlexBox: ({ children, className, flexDirection, alignItems, justifyContent, variant, gap, wrap, fullWidth, htmlAttributes, }: IFlexBoxProps) => React.JSX.Element;

package/dist/_style.d.ts

@@ -1,6 +0,0 @@
-import { IStyledFlexBoxProps } from './_types';
-
-export declare const Styled: {
-    Div: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStyledFlexBoxProps>> & string;
-    Span: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledFlexBoxProps>> & string;
-};