@purr-react-styled-components/components.flex-box 0.0.1

package/dist/_components.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,6 @@
+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;
+};

package/dist/_types.d.ts

@@ -0,0 +1,24 @@
+import { Property } from 'csstype';
+import { HTMLAttributes, ReactNode } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export 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;
+}
+export interface IStyledFlexBoxProps {
+    $alignItems?: Property.AlignItems;
+    $justifyContent?: Property.JustifyContent;
+    $flexDirection?: Property.FlexDirection;
+    $gap?: Property.Gap;
+    $wrap?: Property.FlexWrap;
+    $fullWidth?: boolean;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"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;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,42 @@
+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
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@purr-react-styled-components/components.flex-box",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "styled-components": "*",
+    "csstype": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@purr-core/utils.helpers": "0.0.4"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}