mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
refactor(root): no needed components removed since tailwind already included an impl
This commit is contained in:
parent
fec0753dd7
commit
6639139735
@ -45,7 +45,6 @@
|
||||
"@react-aria/utils": "^3.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
|
||||
@ -43,10 +43,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@nextui-org/col": "workspace:*",
|
||||
"@nextui-org/row": "workspace:*",
|
||||
"@nextui-org/text": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
|
||||
@ -48,8 +48,6 @@
|
||||
"@react-aria/focus": "^3.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@nextui-org/loading": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@react-types/shared": "^3.15.0",
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
"@nextui-org/shared-css": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
"@nextui-org/drip": "workspace:*",
|
||||
"@nextui-org/divider": "workspace:*",
|
||||
"@nextui-org/image": "workspace:*",
|
||||
"@react-aria/focus": "^3.9.0",
|
||||
"@react-aria/utils": "^3.14.0",
|
||||
@ -51,9 +50,6 @@
|
||||
"devDependencies": {
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@nextui-org/text": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@nextui-org/col": "workspace:*",
|
||||
"@nextui-org/row": "workspace:*",
|
||||
"@nextui-org/code": "workspace:*",
|
||||
"@nextui-org/link": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
import {Divider} from "@nextui-org/divider";
|
||||
import {Image} from "@nextui-org/image";
|
||||
import {Drip} from "@nextui-org/drip";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
@ -59,7 +58,6 @@ type CompoundCard = {
|
||||
Body: typeof CardBody;
|
||||
Footer: typeof CardFooter;
|
||||
Image: typeof Image;
|
||||
Divider: typeof Divider;
|
||||
};
|
||||
|
||||
const Card = forwardRef<CardProps, "div", CompoundCard>((props, ref) => {
|
||||
@ -104,7 +102,6 @@ Card.Header = CardHeader;
|
||||
Card.Body = CardBody;
|
||||
Card.Footer = CardFooter;
|
||||
Card.Image = Image;
|
||||
Card.Divider = Divider;
|
||||
|
||||
if (__DEV__) {
|
||||
Card.displayName = "NextUI.Card";
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/col
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/col
|
||||
# or
|
||||
npm i @nextui-org/col
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,58 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
|
||||
import {Col} from "../src";
|
||||
|
||||
describe("Col", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Col />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should work with span and offset", () => {
|
||||
const wrapper = render(
|
||||
<div>
|
||||
<Col span={2}>col</Col>
|
||||
<Col offset={2} span={2}>
|
||||
col
|
||||
</Col>
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should render correctly when nested", () => {
|
||||
const wrapper = render(
|
||||
<Col>
|
||||
<Col>
|
||||
<Col />
|
||||
col
|
||||
</Col>
|
||||
</Col>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should render different components", () => {
|
||||
let wrapper = render(<Col as="p" data-testid="p-col-test" />);
|
||||
|
||||
let p = wrapper.getByTestId("p-col-test");
|
||||
|
||||
expect(p).toBeTruthy();
|
||||
|
||||
wrapper = render(<Col as="details" data-testid="details-col-test" />);
|
||||
|
||||
let details = wrapper.getByTestId("details-col-test");
|
||||
|
||||
expect(details).toBeTruthy();
|
||||
|
||||
wrapper = render(<Col as="h1" data-testid="h1-col-test" />);
|
||||
|
||||
let h1 = wrapper.getByTestId("h1-col-test");
|
||||
|
||||
expect(h1).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/col",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "The column component is part of the NextUI's Grid system that uses a series of containers, rows and columns",
|
||||
"keywords": [
|
||||
"col"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/col"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import {styled, VariantProps} from "@nextui-org/system";
|
||||
|
||||
export const StyledCol = styled("div", {
|
||||
float: "left",
|
||||
boxSizing: "border-box",
|
||||
pl: "calc($$rowGap / 2)",
|
||||
pr: "calc($$rowGap / 2)",
|
||||
});
|
||||
|
||||
export type ColVariantsProps = VariantProps<typeof StyledCol>;
|
||||
@ -1,38 +0,0 @@
|
||||
import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledCol} from "./col.styles";
|
||||
|
||||
export interface ColProps extends HTMLNextUIProps<"div"> {
|
||||
span?: number;
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
const Col = forwardRef<ColProps, "div">((props, ref) => {
|
||||
const {span = 12, offset = 0, css, children, className, ...otherProps} = props;
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledCol
|
||||
ref={domRef}
|
||||
className={clsx("nextui-col", className)}
|
||||
css={{
|
||||
width: `${(100 / 12) * span}%`,
|
||||
marginLeft: `${(100 / 12) * offset}%`,
|
||||
...css,
|
||||
}}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledCol>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
Col.displayName = "NextUI.Col";
|
||||
}
|
||||
|
||||
Col.toString = () => ".nextui-col";
|
||||
|
||||
export default Col;
|
||||
@ -1,5 +0,0 @@
|
||||
// export types
|
||||
export type {ColProps} from "./col";
|
||||
|
||||
// export component
|
||||
export {default as Col} from "./col";
|
||||
@ -1,9 +0,0 @@
|
||||
export interface UseColProps {}
|
||||
|
||||
export function useCol(props: UseColProps) {
|
||||
const {} = props;
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
export type UseColReturn = ReturnType<typeof useCol>;
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/container
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/container
|
||||
# or
|
||||
npm i @nextui-org/container
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,19 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
|
||||
import {Container} from "../src";
|
||||
|
||||
describe("Container", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Container />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Container ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/container",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "A component for fixing an element's width to the current breakpoint.",
|
||||
"keywords": [
|
||||
"container"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/container"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
export const StyledContainer = styled("div", {
|
||||
w: "100%",
|
||||
mr: "auto",
|
||||
ml: "auto",
|
||||
variants: {
|
||||
fluid: {
|
||||
true: {
|
||||
maxWidth: "100%",
|
||||
},
|
||||
},
|
||||
responsive: {
|
||||
true: {
|
||||
"@xs": {
|
||||
maxWidth: "$breakpoints$xs",
|
||||
},
|
||||
"@sm": {
|
||||
maxWidth: "$breakpoints$sm",
|
||||
},
|
||||
"@md": {
|
||||
maxWidth: "$breakpoints$md",
|
||||
},
|
||||
"@lg": {
|
||||
maxWidth: "$breakpoints$lg",
|
||||
},
|
||||
"@xl": {
|
||||
maxWidth: "$breakpoints$xl",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,39 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledContainer} from "./container.styles";
|
||||
import {useContainer, UseContainerProps} from "./use-container";
|
||||
|
||||
export interface ContainerProps extends UseContainerProps {}
|
||||
|
||||
const Container = forwardRef<ContainerProps, "div">((props, ref) => {
|
||||
const {children, containerCss, css, fluid, responsive, className, ...otherProps} =
|
||||
useContainer(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledContainer
|
||||
ref={domRef}
|
||||
className={clsx("nextui-container", className)}
|
||||
css={{
|
||||
...containerCss,
|
||||
...css,
|
||||
}}
|
||||
fluid={fluid}
|
||||
responsive={responsive}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledContainer>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
Container.displayName = "NextUI.Container";
|
||||
}
|
||||
|
||||
Container.toString = () => ".nextui-container";
|
||||
|
||||
export default Container;
|
||||
@ -1,5 +0,0 @@
|
||||
// export types
|
||||
export type {ContainerProps} from "./container";
|
||||
|
||||
// export component
|
||||
export {default as Container} from "./container";
|
||||
@ -1,137 +0,0 @@
|
||||
import type {
|
||||
Wrap,
|
||||
Display,
|
||||
Justify,
|
||||
Direction,
|
||||
AlignItems,
|
||||
AlignContent,
|
||||
} from "@nextui-org/shared-utils";
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
|
||||
import {useMemo} from "react";
|
||||
|
||||
export interface UseContainerProps extends HTMLNextUIProps<"div"> {
|
||||
/**
|
||||
* Max width extra small devices (<650px)
|
||||
* @default "false"
|
||||
*/
|
||||
xs?: boolean;
|
||||
/**
|
||||
* Max width small devices (>=650px)
|
||||
* @default "false"
|
||||
*/
|
||||
sm?: boolean;
|
||||
/**
|
||||
* Max width medium devices (>=960px)
|
||||
* @default "false"
|
||||
*/
|
||||
md?: boolean;
|
||||
/**
|
||||
* Max width large devices (>=1280px)
|
||||
* @default "false"
|
||||
*/
|
||||
lg?: boolean;
|
||||
/**
|
||||
* Max width extra large devices (>=1400px)
|
||||
* @default "false"
|
||||
*/
|
||||
xl?: boolean;
|
||||
/**
|
||||
* Sets the width in 100% at all breakpoints
|
||||
* @default false
|
||||
*/
|
||||
fluid?: boolean;
|
||||
/**
|
||||
* Sets a max-width at each responsive breakpoint
|
||||
* @default true
|
||||
*/
|
||||
responsive?: boolean;
|
||||
/**
|
||||
* The children's spacing, commonly used for `Col` & `Row` components
|
||||
* @default 2
|
||||
*/
|
||||
gap?: number;
|
||||
/**
|
||||
* CSS "flex-wrap" property
|
||||
* @default "wrap"
|
||||
*/
|
||||
wrap?: Wrap;
|
||||
/**
|
||||
* CSS "display" property
|
||||
* @default "block"
|
||||
*/
|
||||
display?: Display;
|
||||
/**
|
||||
* CSS "justify-content" property
|
||||
*/
|
||||
justify?: Justify;
|
||||
/**
|
||||
* CSS "flex-direction" property
|
||||
* @default "row"
|
||||
*/
|
||||
direction?: Direction;
|
||||
/**
|
||||
* CSS "align-items" property
|
||||
*/
|
||||
alignItems?: AlignItems;
|
||||
/**
|
||||
* CSS "align-content" property
|
||||
*/
|
||||
alignContent?: AlignContent;
|
||||
}
|
||||
|
||||
export function useContainer(props: UseContainerProps) {
|
||||
const {
|
||||
xs = false,
|
||||
sm = false,
|
||||
md = false,
|
||||
lg = false,
|
||||
xl = false,
|
||||
gap = 2,
|
||||
responsive = true,
|
||||
fluid = false,
|
||||
wrap = "wrap",
|
||||
display = "block",
|
||||
direction = "row",
|
||||
justify,
|
||||
alignItems,
|
||||
alignContent,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const gapUnit = useMemo(() => {
|
||||
return `calc(${gap} * $space$sm)`;
|
||||
}, [gap]);
|
||||
|
||||
const getMaxWidth = () => {
|
||||
if (xs) return "$breakpoints$xs";
|
||||
if (sm) return "$breakpoints$sm";
|
||||
if (md) return "$breakpoints$md";
|
||||
if (lg) return "$breakpoints$lg";
|
||||
if (xl) return "$breakpoints$xl";
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const containerCss = useMemo(() => {
|
||||
return {
|
||||
px: gapUnit,
|
||||
maxWidth: getMaxWidth(),
|
||||
alignItems,
|
||||
alignContent,
|
||||
flexWrap: wrap,
|
||||
display: display,
|
||||
justifyContent: justify,
|
||||
flexDirection: direction,
|
||||
};
|
||||
}, [gapUnit, getMaxWidth, alignItems, alignContent, wrap, display, justify, direction]);
|
||||
|
||||
return {
|
||||
containerCss,
|
||||
responsive,
|
||||
fluid,
|
||||
...otherProps,
|
||||
};
|
||||
}
|
||||
|
||||
export type UseContainerReturn = ReturnType<typeof useContainer>;
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
import {Container} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Layout/Container",
|
||||
component: Container,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Container />;
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/divider
|
||||
# or
|
||||
npm i @nextui-org/divider
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,36 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {getMargin} from "@nextui-org/shared-utils";
|
||||
|
||||
import {Divider} from "../src";
|
||||
|
||||
describe("Divider", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Divider />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Divider ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should work with x and y", () => {
|
||||
let x = 2;
|
||||
let y = 4;
|
||||
const {container} = render(<Divider x={x} y={4} />);
|
||||
|
||||
expect(container.firstChild).toHaveStyle(`margin: ${getMargin(x / 2)} ${getMargin(y / 2)}`);
|
||||
});
|
||||
|
||||
it("should support float x & y", () => {
|
||||
let x = 2.5;
|
||||
let y = 4.5;
|
||||
const {container} = render(<Divider x={x} y={4.5} />);
|
||||
|
||||
expect(container.firstChild).toHaveStyle(`margin: ${getMargin(x / 2)} ${getMargin(y / 2)}`);
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "Dividers are used to visually separate content in a list or group.",
|
||||
"keywords": [
|
||||
"divider"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/divider"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/text": "workspace:*",
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
export const StyledDivider = styled("div", {
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
position: "relative",
|
||||
});
|
||||
@ -1,49 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
import {Text} from "@nextui-org/text";
|
||||
|
||||
import {StyledDivider} from "./divider.styles";
|
||||
import {UseDividerProps, useDivider} from "./use-divider";
|
||||
|
||||
export interface DividerProps extends UseDividerProps {}
|
||||
|
||||
const Divider = forwardRef<DividerProps, "div">((props, ref) => {
|
||||
const {css, children, dividerCss, alignCss, textProps, className, ...otherProps} =
|
||||
useDivider(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const {css: textCss, ...otherTextProps} = textProps;
|
||||
|
||||
return (
|
||||
<StyledDivider
|
||||
ref={domRef}
|
||||
className={clsx("nextui-divider", className)}
|
||||
css={{
|
||||
...dividerCss,
|
||||
...css,
|
||||
}}
|
||||
role="separator"
|
||||
{...otherProps}
|
||||
>
|
||||
{children && (
|
||||
<Text
|
||||
css={{
|
||||
...alignCss,
|
||||
...textCss,
|
||||
}}
|
||||
{...otherTextProps}
|
||||
/>
|
||||
)}
|
||||
</StyledDivider>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
Divider.displayName = "NextUI.Divider";
|
||||
}
|
||||
|
||||
Divider.toString = () => ".nextui-divider";
|
||||
|
||||
export default Divider;
|
||||
@ -1,5 +0,0 @@
|
||||
// export types
|
||||
export type {DividerProps} from "./divider";
|
||||
|
||||
// export component
|
||||
export {default as Divider} from "./divider";
|
||||
@ -1,76 +0,0 @@
|
||||
import {useMemo} from "react";
|
||||
import {HTMLNextUIProps, CSS} from "@nextui-org/system";
|
||||
import {TextProps} from "@nextui-org/text";
|
||||
import {DividerAlign, getMargin} from "@nextui-org/shared-utils";
|
||||
|
||||
export interface UseDividerProps extends HTMLNextUIProps<"div"> {
|
||||
/**
|
||||
* x-axis spacing
|
||||
* @default 0
|
||||
*/
|
||||
x?: number;
|
||||
/**
|
||||
* y-axis spacing
|
||||
* @default 0
|
||||
*/
|
||||
y?: number;
|
||||
/**
|
||||
* Divider height in pixels
|
||||
* @default 1
|
||||
*/
|
||||
height?: CSS["height"];
|
||||
/**
|
||||
* Divider background color
|
||||
* @default "border"
|
||||
*/
|
||||
color?: CSS["color"];
|
||||
/**
|
||||
* Divider text children color
|
||||
*/
|
||||
textProps?: TextProps;
|
||||
/**
|
||||
* Divider alignment
|
||||
* @default center
|
||||
*/
|
||||
align?: DividerAlign;
|
||||
}
|
||||
|
||||
export function useDivider(props: UseDividerProps) {
|
||||
const {
|
||||
x = 0,
|
||||
y = 0,
|
||||
align = "center",
|
||||
height = 1,
|
||||
color = "$border",
|
||||
textProps = {},
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const alignCss = useMemo<CSS | undefined>(() => {
|
||||
if (!align || align === "center") return {};
|
||||
if (align === "left" || align === "start") {
|
||||
return {transform: "translateY(-50%)", left: "7%"};
|
||||
}
|
||||
|
||||
return {
|
||||
transform: "translateY(-50%)",
|
||||
left: "auto",
|
||||
right: "7%",
|
||||
};
|
||||
}, [align]);
|
||||
|
||||
const dividerCss = useMemo(() => {
|
||||
const top = y ? getMargin(y / 2) : 0;
|
||||
const left = x ? getMargin(x / 2) : 0;
|
||||
|
||||
return {
|
||||
backgroundColor: color,
|
||||
margin: `${top} ${left}`,
|
||||
height: `calc(${height} * 1px)`,
|
||||
};
|
||||
}, [x, y, color]);
|
||||
|
||||
return {dividerCss, alignCss, textProps, ...otherProps};
|
||||
}
|
||||
|
||||
export type UseDividerReturn = ReturnType<typeof useDivider>;
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
import {Divider} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Layout/Divider",
|
||||
component: Divider,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Divider />;
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/grid
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/grid
|
||||
# or
|
||||
npm i @nextui-org/grid
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,19 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
|
||||
import {Grid} from "../src";
|
||||
|
||||
describe("Grid", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Grid />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Grid ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/grid",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "The layout Grid adapts to screen size and orientation, ensuring consistency across layouts.",
|
||||
"keywords": [
|
||||
"grid"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/grid"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import type {Wrap} from "@nextui-org/shared-utils";
|
||||
|
||||
import {useMemo} from "react";
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import GridItem, {GridProps} from "./grid";
|
||||
|
||||
export interface GridContainerProps extends GridProps {
|
||||
/**
|
||||
* The children's spacing, commonly used for `Grid` components
|
||||
* @default 0
|
||||
*/
|
||||
gap?: number;
|
||||
/**
|
||||
* CSS "flex-wrap" property
|
||||
* @default "wrap"
|
||||
*/
|
||||
wrap?: Wrap;
|
||||
}
|
||||
|
||||
const GridContainer = forwardRef<GridContainerProps, "div">((props, ref) => {
|
||||
const {children, css, gap = 0, wrap = "wrap", className, ...otherProps} = props;
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const gapUnit = useMemo(() => {
|
||||
return `calc(${gap} * $space$3)`;
|
||||
}, [gap]);
|
||||
|
||||
return (
|
||||
<GridItem
|
||||
ref={domRef}
|
||||
className={clsx("nextui-grid-container", className)}
|
||||
css={{
|
||||
$$gridGapUnit: gapUnit,
|
||||
display: "flex",
|
||||
flexWrap: wrap,
|
||||
boxSizing: "border-box",
|
||||
margin: "calc(-1 * $$gridGapUnit)",
|
||||
width: "calc(100% + $$gridGapUnit * 2)",
|
||||
...css,
|
||||
}}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</GridItem>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
GridContainer.displayName = "NextUI.GridContainer";
|
||||
}
|
||||
|
||||
GridContainer.toString = () => ".nextui-grid-container";
|
||||
|
||||
export default GridContainer;
|
||||
@ -1,7 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
export const StyledGrid = styled("div", {
|
||||
margin: 0,
|
||||
boxSizing: "border-box",
|
||||
padding: "$$gridGapUnit",
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledGrid} from "./grid.styles";
|
||||
import GridContainer from "./grid-container";
|
||||
import {UseGridProps, useGrid} from "./use-grid";
|
||||
|
||||
export interface GridProps extends UseGridProps {}
|
||||
|
||||
type CompoundGrid = {
|
||||
Container: typeof GridContainer;
|
||||
};
|
||||
|
||||
const Grid = forwardRef<GridProps, "div", CompoundGrid>((props, ref) => {
|
||||
const {children, gridCss, css, className, ...otherProps} = useGrid(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledGrid
|
||||
ref={domRef}
|
||||
className={clsx("nextui-grid", className)}
|
||||
css={{
|
||||
...gridCss,
|
||||
...css,
|
||||
}}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledGrid>
|
||||
);
|
||||
});
|
||||
|
||||
Grid.Container = GridContainer;
|
||||
|
||||
if (__DEV__) {
|
||||
Grid.displayName = "NextUI.Grid";
|
||||
}
|
||||
|
||||
Grid.toString = () => ".nextui-grid";
|
||||
|
||||
export default Grid;
|
||||
@ -1,8 +0,0 @@
|
||||
import Grid from "./grid";
|
||||
|
||||
// export types
|
||||
export type {GridProps} from "./grid";
|
||||
export type {GridContainerProps} from "./grid-container";
|
||||
|
||||
// export component
|
||||
export {Grid};
|
||||
@ -1,152 +0,0 @@
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
|
||||
import {
|
||||
BreakpointsValue,
|
||||
Justify,
|
||||
Direction,
|
||||
AlignItems,
|
||||
AlignContent,
|
||||
clsx,
|
||||
} from "@nextui-org/shared-utils";
|
||||
import {useMemo} from "react";
|
||||
|
||||
export interface UseGridProps extends HTMLNextUIProps<"div"> {
|
||||
/**
|
||||
* Max width extra small devices (<650px)
|
||||
* @default "false"
|
||||
*/
|
||||
xs?: BreakpointsValue;
|
||||
/**
|
||||
* Max width small devices (>=650px)
|
||||
* @default "false"
|
||||
*/
|
||||
sm?: BreakpointsValue;
|
||||
/**
|
||||
* Max width medium devices (>=960px)
|
||||
* @default "false"
|
||||
*/
|
||||
md?: BreakpointsValue;
|
||||
/**
|
||||
* Max width large devices (>=1280px)
|
||||
* @default "false"
|
||||
*/
|
||||
lg?: BreakpointsValue;
|
||||
/**
|
||||
* Max width extra large devices (>=1400px)
|
||||
* @default "false"
|
||||
*/
|
||||
xl?: BreakpointsValue;
|
||||
/**
|
||||
* CSS "justify-content" property
|
||||
*/
|
||||
justify?: Justify;
|
||||
/**
|
||||
* CSS "flex-direction" property
|
||||
*/
|
||||
direction?: Direction;
|
||||
/**
|
||||
* CSS "align-items" property
|
||||
*/
|
||||
alignItems?: AlignItems;
|
||||
/**
|
||||
* CSS "align-content" property
|
||||
*/
|
||||
alignContent?: AlignContent;
|
||||
}
|
||||
|
||||
const getItemLayout = (val?: BreakpointsValue): React.CSSProperties => {
|
||||
const display = val === 0 ? "none" : "inherit";
|
||||
|
||||
if (typeof val === "number") {
|
||||
const width = (100 / 12) * val;
|
||||
const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
|
||||
|
||||
return {
|
||||
flexGrow: 0,
|
||||
display,
|
||||
maxWidth: ratio,
|
||||
flexBasis: ratio,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
flexGrow: 1,
|
||||
display,
|
||||
maxWidth: "100%",
|
||||
flexBasis: "0",
|
||||
};
|
||||
};
|
||||
|
||||
export function useGrid(props: UseGridProps) {
|
||||
const {
|
||||
xs = false,
|
||||
sm = false,
|
||||
md = false,
|
||||
lg = false,
|
||||
xl = false,
|
||||
alignItems,
|
||||
alignContent,
|
||||
justify,
|
||||
direction,
|
||||
className,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const classes = useMemo(() => {
|
||||
const breaks: {[key: string]: unknown} = {
|
||||
xs,
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
xl,
|
||||
};
|
||||
const classString = Object.keys(breaks).reduce((pre, name) => {
|
||||
if (breaks[name] !== undefined && breaks[name] !== false) return `${pre} ${name}`;
|
||||
|
||||
return pre;
|
||||
}, "");
|
||||
|
||||
return classString.trim();
|
||||
}, [xs, sm, md, lg, xl]);
|
||||
|
||||
const gridCss = useMemo(() => {
|
||||
return {
|
||||
alignItems,
|
||||
alignContent,
|
||||
justifyContent: justify,
|
||||
flexDirection: direction,
|
||||
"&.xs": {
|
||||
...getItemLayout(xs),
|
||||
},
|
||||
"@xsMax": {
|
||||
"&.xs": {
|
||||
...getItemLayout(xs),
|
||||
},
|
||||
},
|
||||
"@sm": {
|
||||
"&.sm": {
|
||||
...getItemLayout(sm),
|
||||
},
|
||||
},
|
||||
"@md": {
|
||||
"&.md": {
|
||||
...getItemLayout(md),
|
||||
},
|
||||
},
|
||||
"@lg": {
|
||||
"&.lg": {
|
||||
...getItemLayout(lg),
|
||||
},
|
||||
},
|
||||
"@xl": {
|
||||
"&.xl": {
|
||||
...getItemLayout(xl),
|
||||
},
|
||||
},
|
||||
};
|
||||
}, [xs, sm, md, lg, xl, justify, direction, alignItems, alignContent, getItemLayout]);
|
||||
|
||||
return {gridCss, className: clsx(classes, className), ...otherProps};
|
||||
}
|
||||
|
||||
export type UseGridReturn = ReturnType<typeof useGrid>;
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
import {Grid} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Layout/Grid",
|
||||
component: Grid,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Grid />;
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -45,7 +45,6 @@
|
||||
"@nextui-org/use-resize": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
|
||||
@ -49,8 +49,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-types/link": "^3.3.3",
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@nextui-org/text": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import type {AriaLinkProps} from "@react-types/link";
|
||||
import type {StyledLinkProps} from "@nextui-org/theme";
|
||||
import type {LinkVariantProps} from "@nextui-org/theme";
|
||||
|
||||
import {useLink as useAriaLink} from "@react-aria/link";
|
||||
import {HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {ReactRef} from "@nextui-org/shared-utils";
|
||||
|
||||
export interface Props extends HTMLNextUIProps<"a">, StyledLinkProps {
|
||||
export interface Props extends HTMLNextUIProps<"a">, LinkVariantProps {
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
*/
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
import {cva, linkVariants, type VariantProps, ExtendVariantProps} from "@nextui-org/theme";
|
||||
|
||||
import {Link, LinkProps} from "../src";
|
||||
@ -42,78 +41,52 @@ export const CustomVariant = () => {
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<Grid.Container gap={1}>
|
||||
<Grid xs={12}>
|
||||
<Link color="primary" href="#" size="xs">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="secondary" href="#" size="sm">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="success" href="#" size="md">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="warning" href="#" size="xl">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link className="text-2xl" color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link className="text-2xl text-pink-500" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<div className="flex flex-wrap space-y-2">
|
||||
<Link color="primary" href="#" size="xs">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="secondary" href="#" size="sm">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="success" href="#" size="md">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="warning" href="#" size="xl">
|
||||
{text}
|
||||
</Link>
|
||||
<Link className="text-2xl" color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link className="text-2xl text-pink-500" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Colors = () => (
|
||||
<Grid.Container gap={1}>
|
||||
<Grid xs={12}>
|
||||
<Link color="foreground" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="primary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="success" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="warning" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link className="text-teal-600" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<div className="flex flex-wrap space-y-2">
|
||||
<Link color="foreground" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="primary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="success" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="warning" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link className="text-teal-600" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const isUnderline = () => (
|
||||
@ -144,62 +117,42 @@ export const isExternal = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid.Container gap={1}>
|
||||
<Grid xs={12}>
|
||||
<Link isExternal href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isExternal color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isExternal color="success" externalIcon={<CustomLink />} href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<div className="flex flex-wrap space-y-2">
|
||||
<Link isExternal href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isExternal color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isExternal color="success" externalIcon={<CustomLink />} href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const isBlock = () => (
|
||||
<Grid.Container gap={1}>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="foreground" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="primary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="success" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="warning" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Link isBlock className="text-pink-600 hover:after:bg-pink-600/25" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<div className="flex flex-wrap space-y-2">
|
||||
<Link isBlock color="foreground" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock color="primary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock color="secondary" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock color="success" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock color="warning" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link isBlock className="text-pink-600 hover:after:bg-pink-600/25" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -42,8 +42,6 @@
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
"@nextui-org/shared-css": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
"@nextui-org/use-pagination": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@react-aria/utils": "^3.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -52,7 +52,6 @@
|
||||
"@react-types/radio": "^3.3.0",
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/row
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/row
|
||||
# or
|
||||
npm i @nextui-org/row
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,103 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
|
||||
import {Row} from "../src";
|
||||
|
||||
describe("Row", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Row />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Row ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should render different components", () => {
|
||||
let wrapper = render(<Row as="p" data-testid="p-row-test" />);
|
||||
|
||||
let p = wrapper.getByTestId("p-row-test");
|
||||
|
||||
expect(p).toBeTruthy();
|
||||
|
||||
wrapper = render(<Row as="details" data-testid="details-row-test" />);
|
||||
|
||||
let details = wrapper.getByTestId("details-row-test");
|
||||
|
||||
expect(details).toBeTruthy();
|
||||
|
||||
wrapper = render(<Row as="h1" data-testid="h1-row-test" />);
|
||||
|
||||
let h1 = wrapper.getByTestId("h1-row-test");
|
||||
|
||||
expect(h1).toBeTruthy();
|
||||
});
|
||||
|
||||
it("the children should be aligned correctly", () => {
|
||||
const wrapper = render(
|
||||
<div>
|
||||
<Row justify="flex-end">
|
||||
<div />
|
||||
</Row>
|
||||
<Row justify="center">
|
||||
<div />
|
||||
</Row>
|
||||
<Row justify="space-around">
|
||||
<div />
|
||||
</Row>
|
||||
<Row justify="space-between">
|
||||
<div />
|
||||
</Row>
|
||||
<Row align="flex-start">
|
||||
<div />
|
||||
</Row>
|
||||
<Row align="center">
|
||||
<div />
|
||||
</Row>
|
||||
<Row align="flex-end">
|
||||
<div />
|
||||
</Row>
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("the children should have the correct spacing", () => {
|
||||
const wrapper = render(
|
||||
<div>
|
||||
<Row gap={1}>
|
||||
<div />
|
||||
</Row>
|
||||
<Row gap={2}>
|
||||
<div />
|
||||
</Row>
|
||||
<Row gap={10}>
|
||||
<div />
|
||||
</Row>
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should work with nested", () => {
|
||||
const wrapper = render(
|
||||
<Row>
|
||||
<Row>
|
||||
<Row>
|
||||
<div>
|
||||
<Row>row</Row>
|
||||
</div>
|
||||
</Row>
|
||||
</Row>
|
||||
</Row>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/row",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "The row component is part of the NextUI's Grid system that uses a series of containers, rows and columns",
|
||||
"keywords": [
|
||||
"row"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/row"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
// export types
|
||||
export type {RowProps} from "./row";
|
||||
|
||||
// export component
|
||||
export {default as Row} from "./row";
|
||||
@ -1,8 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
export const StyledRow = styled("div", {
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
boxSizing: "border-box",
|
||||
width: "100%",
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {useRow, UseRowProps} from "./use-row";
|
||||
import {StyledRow} from "./row.styles";
|
||||
|
||||
export interface RowProps extends UseRowProps {}
|
||||
|
||||
const Row = forwardRef<RowProps, "div">((props, ref) => {
|
||||
const {children, rowCss, css, className, ...otherProps} = useRow(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledRow
|
||||
ref={domRef}
|
||||
className={clsx("nextui-row", className)}
|
||||
css={{
|
||||
...rowCss,
|
||||
...css,
|
||||
}}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledRow>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
Row.displayName = "NextUI.Row";
|
||||
}
|
||||
|
||||
Row.toString = () => ".nextui-row";
|
||||
|
||||
export default Row;
|
||||
@ -1,52 +0,0 @@
|
||||
import type {Wrap, Justify, AlignItems} from "@nextui-org/shared-utils";
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
|
||||
import {useMemo} from "react";
|
||||
|
||||
export interface UseRowProps extends HTMLNextUIProps<"div"> {
|
||||
/**
|
||||
* The children's spacing, commonly used for `Col` component
|
||||
* @default 0
|
||||
*/
|
||||
gap?: number;
|
||||
/**
|
||||
* CSS "flex-wrap" property
|
||||
* @default "nowrap"
|
||||
*/
|
||||
wrap?: Wrap;
|
||||
/**
|
||||
* CSS "justify-content" property
|
||||
* @default "flex-start"
|
||||
*/
|
||||
justify?: Justify;
|
||||
/**
|
||||
* CSS "align-items" property
|
||||
* @default "flex-start"
|
||||
*/
|
||||
align?: AlignItems;
|
||||
}
|
||||
|
||||
export function useRow(props: UseRowProps) {
|
||||
const {
|
||||
gap = 0,
|
||||
wrap = "nowrap",
|
||||
justify = "flex-start",
|
||||
align = "flex-start",
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const rowCss = useMemo(() => {
|
||||
return {
|
||||
flexWrap: wrap,
|
||||
$$rowGap: `calc(${gap} * $space$lg)`,
|
||||
marginLeft: `calc(${gap} * $space$lg / 2)`,
|
||||
marginRight: `calc(${gap} * $space$lg / 2)`,
|
||||
justifyContent: justify,
|
||||
alignItems: align,
|
||||
};
|
||||
}, [wrap, gap, justify, align]);
|
||||
|
||||
return {rowCss, ...otherProps};
|
||||
}
|
||||
|
||||
export type UseRowReturn = ReturnType<typeof useRow>;
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/spacer
|
||||
# or
|
||||
npm i @nextui-org/spacer
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
@ -1,51 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
|
||||
import {Spacer} from "../src";
|
||||
|
||||
describe("Spacer", () => {
|
||||
test("should render correctly", () => {
|
||||
const wrapper = render(<Spacer />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
render(<Spacer ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should support x and y props", () => {
|
||||
const wrapper = render(
|
||||
<div>
|
||||
<Spacer x={5} />
|
||||
<Spacer x={15} />
|
||||
<Spacer y={15} />
|
||||
<Spacer y={2} />
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should work with float numbers", () => {
|
||||
const wrapper = render(
|
||||
<div>
|
||||
<Spacer x={2.2} />
|
||||
<Spacer x={1.5} />
|
||||
<Spacer y={0.1} />
|
||||
<Spacer y={1.8} />
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("should support inline prop", () => {
|
||||
const wrapper = render(<Spacer inline />);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"replace": {
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "The Spacer component provides a vertically or horizontally empty space",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/components/spacer"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build:fast": "tsup src/index.ts --format=esm,cjs",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
// export types
|
||||
export type {SpacerProps} from "./spacer";
|
||||
|
||||
// export component
|
||||
export {default as Spacer} from "./spacer";
|
||||
@ -1,15 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
export const StyledSpacer = styled("span", {
|
||||
size: "1px",
|
||||
variants: {
|
||||
inline: {
|
||||
true: {
|
||||
display: "inline-block",
|
||||
},
|
||||
false: {
|
||||
display: "block",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,37 +0,0 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledSpacer} from "./spacer.styles";
|
||||
import {useSpacer, UseSpacerProps} from "./use-spacer";
|
||||
|
||||
export interface SpacerProps extends UseSpacerProps {}
|
||||
|
||||
const Spacer = forwardRef<SpacerProps, "span">((props, ref) => {
|
||||
const {children, spacerCss, inline, css, ...otherProps} = useSpacer(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledSpacer
|
||||
ref={domRef}
|
||||
aria-hidden="true"
|
||||
css={{
|
||||
...spacerCss,
|
||||
...css,
|
||||
}}
|
||||
inline={inline}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledSpacer>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
Spacer.displayName = "NextUI.Spacer";
|
||||
}
|
||||
|
||||
Spacer.toString = () => ".nextui-spacer";
|
||||
|
||||
export default Spacer;
|
||||
@ -1,51 +0,0 @@
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
|
||||
import {getMargin} from "@nextui-org/shared-utils";
|
||||
import {useMemo} from "react";
|
||||
|
||||
export interface UseSpacerProps extends HTMLNextUIProps<"span"> {
|
||||
/**
|
||||
* x-axis spacing
|
||||
*/
|
||||
x?: number;
|
||||
/**
|
||||
* y-axis spacing
|
||||
*/
|
||||
y?: number;
|
||||
/**
|
||||
* Whether should have inline space
|
||||
*/
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
export function useSpacer(props: UseSpacerProps) {
|
||||
const {x, y, inline = false, ...otherProps} = props;
|
||||
|
||||
const spacerCss = useMemo(() => {
|
||||
let css = {};
|
||||
|
||||
if (x) {
|
||||
css = {
|
||||
...css,
|
||||
marginLeft: getMargin(x),
|
||||
};
|
||||
}
|
||||
|
||||
if (y) {
|
||||
css = {
|
||||
...css,
|
||||
marginTop: getMargin(y),
|
||||
};
|
||||
}
|
||||
|
||||
return css;
|
||||
}, [x, y]);
|
||||
|
||||
return {
|
||||
spacerCss,
|
||||
inline,
|
||||
...otherProps,
|
||||
};
|
||||
}
|
||||
|
||||
export type UseSpacerReturn = ReturnType<typeof useSpacer>;
|
||||
@ -1,64 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
import {Spacer} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Layout/Spacer",
|
||||
component: Spacer,
|
||||
} as Meta;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const Container = ({children, vertical}: any) => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: vertical ? "column" : "row",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
maxWidth: "50%",
|
||||
minWidth: "50%",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SpacerContainer = styled("div", {
|
||||
width: "100%",
|
||||
background: "$primary",
|
||||
borderRadius: "8px",
|
||||
});
|
||||
|
||||
export const Vertical = () => (
|
||||
<Container vertical>
|
||||
<SpacerContainer>
|
||||
<Spacer y={1} />
|
||||
</SpacerContainer>
|
||||
<Spacer y={1} />
|
||||
<SpacerContainer>
|
||||
<Spacer y={2} />
|
||||
</SpacerContainer>
|
||||
<Spacer y={1} />
|
||||
<SpacerContainer>
|
||||
<Spacer y={3} />
|
||||
</SpacerContainer>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Horizontal = () => (
|
||||
<Container>
|
||||
<SpacerContainer css={{minHeight: "100px"}}>
|
||||
<Spacer x={5} />
|
||||
</SpacerContainer>
|
||||
<Spacer x={2} />
|
||||
<SpacerContainer css={{minHeight: "100px"}}>
|
||||
<Spacer x={5} />
|
||||
</SpacerContainer>
|
||||
<Spacer x={2} />
|
||||
<SpacerContainer css={{minHeight: "100px"}}>
|
||||
<Spacer x={5} />
|
||||
</SpacerContainer>
|
||||
</Container>
|
||||
);
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {defineConfig} from "tsup";
|
||||
import {findUpSync} from "find-up";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
minify: false,
|
||||
treeshake: true,
|
||||
format: ["cjs", "esm"],
|
||||
outExtension(ctx) {
|
||||
return {js: `.${ctx.format}.js`};
|
||||
},
|
||||
inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
|
||||
});
|
||||
@ -40,25 +40,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@nextui-org/badge": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"@nextui-org/card": "workspace:*",
|
||||
"@nextui-org/checkbox": "workspace:*",
|
||||
"@nextui-org/code": "workspace:*",
|
||||
"@nextui-org/col": "workspace:*",
|
||||
"@nextui-org/container": "workspace:*",
|
||||
"@nextui-org/divider": "workspace:*",
|
||||
"@nextui-org/drip": "workspace:*",
|
||||
"@nextui-org/grid": "workspace:*",
|
||||
"@nextui-org/image": "workspace:*",
|
||||
"@nextui-org/link": "workspace:*",
|
||||
"@nextui-org/loading": "workspace:*",
|
||||
"@nextui-org/pagination": "workspace:*",
|
||||
"@nextui-org/radio": "workspace:*",
|
||||
"@nextui-org/row": "workspace:*",
|
||||
"@nextui-org/snippet": "workspace:*",
|
||||
"@nextui-org/spacer": "workspace:*",
|
||||
"@nextui-org/text": "workspace:*",
|
||||
"@nextui-org/user": "workspace:*"
|
||||
},
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
export * from "@nextui-org/system";
|
||||
export * from "@nextui-org/col";
|
||||
export * from "@nextui-org/row";
|
||||
export * from "@nextui-org/container";
|
||||
export * from "@nextui-org/spacer";
|
||||
export * from "@nextui-org/avatar";
|
||||
export * from "@nextui-org/badge";
|
||||
export * from "@nextui-org/grid";
|
||||
export * from "@nextui-org/text";
|
||||
export * from "@nextui-org/link";
|
||||
export * from "@nextui-org/code";
|
||||
|
||||
@ -84,6 +84,11 @@ module.exports = plugin(
|
||||
DEFAULT: "#11181C",
|
||||
dark: "#ECEDEE",
|
||||
},
|
||||
border: {
|
||||
light: "#00000026",
|
||||
DEFAULT: "#00000026",
|
||||
dark: "#ffffff26",
|
||||
},
|
||||
neutral: {
|
||||
light: "#889096",
|
||||
DEFAULT: "#889096",
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import {cva, type VariantProps} from "../../utils";
|
||||
|
||||
const containerBase = ["container"];
|
||||
|
||||
const containerVariants = {};
|
||||
|
||||
// const containerCompoundVariants = [];
|
||||
|
||||
const containerDefaultVariants = {};
|
||||
|
||||
const containerStyles = {
|
||||
variants: containerVariants,
|
||||
// compoundVariants: containerCompoundVariants,
|
||||
defaultVariants: containerDefaultVariants,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const container = cva(containerBase, containerStyles);
|
||||
|
||||
export {
|
||||
containerBase,
|
||||
containerVariants,
|
||||
// containerCompoundVariants,
|
||||
containerDefaultVariants,
|
||||
containerStyles,
|
||||
container,
|
||||
};
|
||||
|
||||
export type StyledContainerProps = VariantProps<typeof container>;
|
||||
@ -1,2 +1 @@
|
||||
export * from "./link";
|
||||
export * from "./container";
|
||||
|
||||
@ -95,4 +95,4 @@ const link = cva(linkBase, linkStyles);
|
||||
|
||||
export {linkBase, linkVariants, linkCompoundVariants, linkDefaultVariants, linkStyles, link};
|
||||
|
||||
export type StyledLinkProps = VariantProps<typeof link>;
|
||||
export type LinkVariantProps = VariantProps<typeof link>;
|
||||
|
||||
144
pnpm-lock.yaml
generated
144
pnpm-lock.yaml
generated
@ -304,7 +304,6 @@ importers:
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@react-aria/focus': ^3.9.0
|
||||
'@react-aria/utils': ^3.14.0
|
||||
@ -319,20 +318,15 @@ importers:
|
||||
'@react-aria/utils': 3.14.0_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/shared-icons': link:../../utilities/shared-icons
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/badge:
|
||||
specifiers:
|
||||
'@nextui-org/avatar': workspace:*
|
||||
'@nextui-org/col': workspace:*
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/row': workspace:*
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/text': workspace:*
|
||||
clean-package: 2.1.1
|
||||
@ -343,11 +337,7 @@ importers:
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
'@nextui-org/avatar': link:../avatar
|
||||
'@nextui-org/col': link:../col
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/row': link:../row
|
||||
'@nextui-org/shared-icons': link:../../utilities/shared-icons
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
'@nextui-org/text': link:../text
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
@ -356,12 +346,10 @@ importers:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/drip': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/loading': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@react-aria/button': ^3.6.2
|
||||
'@react-aria/focus': ^3.9.0
|
||||
@ -382,10 +370,8 @@ importers:
|
||||
'@react-aria/interactions': 3.12.0_react@17.0.2
|
||||
'@react-aria/utils': 3.14.0_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/loading': link:../loading
|
||||
'@nextui-org/shared-icons': link:../../utilities/shared-icons
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
'@react-types/button': 3.6.2_react@17.0.2
|
||||
'@react-types/shared': 3.15.0_react@17.0.2
|
||||
clean-package: 2.1.1
|
||||
@ -394,14 +380,10 @@ importers:
|
||||
packages/components/card:
|
||||
specifiers:
|
||||
'@nextui-org/code': workspace:*
|
||||
'@nextui-org/col': workspace:*
|
||||
'@nextui-org/divider': workspace:*
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/drip': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/image': workspace:*
|
||||
'@nextui-org/link': workspace:*
|
||||
'@nextui-org/row': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
@ -413,7 +395,6 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/divider': link:../divider
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/drip': link:../drip
|
||||
'@nextui-org/image': link:../image
|
||||
@ -425,10 +406,7 @@ importers:
|
||||
'@react-aria/utils': 3.14.0_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/code': link:../code
|
||||
'@nextui-org/col': link:../col
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/link': link:../link
|
||||
'@nextui-org/row': link:../row
|
||||
'@nextui-org/text': link:../text
|
||||
'@react-types/shared': 3.15.0_react@17.0.2
|
||||
clean-package: 2.1.1
|
||||
@ -484,20 +462,6 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/col:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/collapse:
|
||||
specifiers:
|
||||
'@nextui-org/aria-utils': workspace:*
|
||||
@ -531,38 +495,6 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/container:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/divider:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/text': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
'@nextui-org/text': link:../text
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/drip:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
@ -578,25 +510,9 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/grid:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/image:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/use-real-shape': workspace:*
|
||||
@ -612,17 +528,14 @@ importers:
|
||||
'@nextui-org/use-ref-state': link:../../hooks/use-ref-state
|
||||
'@nextui-org/use-resize': link:../../hooks/use-resize
|
||||
devDependencies:
|
||||
'@nextui-org/grid': link:../grid
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/link:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/text': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
@ -644,8 +557,6 @@ importers:
|
||||
'@react-aria/link': 3.3.4_react@17.0.2
|
||||
'@react-aria/utils': 3.14.0_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
'@nextui-org/text': link:../text
|
||||
'@react-types/link': 3.3.4_react@17.0.2
|
||||
clean-package: 2.1.1
|
||||
@ -654,9 +565,7 @@ importers:
|
||||
packages/components/loading:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
@ -665,15 +574,12 @@ importers:
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/pagination:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
@ -683,7 +589,6 @@ importers:
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/grid': link:../grid
|
||||
'@nextui-org/shared-css': link:../../utilities/shared-css
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
@ -699,7 +604,6 @@ importers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@react-aria/focus': ^3.9.0
|
||||
'@react-aria/interactions': ^3.12.0
|
||||
@ -724,27 +628,11 @@ importers:
|
||||
'@react-stately/radio': 3.6.0_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/button': link:../button
|
||||
'@nextui-org/spacer': link:../spacer
|
||||
'@react-types/radio': 3.3.0_react@17.0.2
|
||||
'@react-types/shared': 3.15.0_react@17.0.2
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/row:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/snippet:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
@ -762,21 +650,6 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/spacer:
|
||||
specifiers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/components/storybook:
|
||||
specifiers:
|
||||
'@babel/preset-env': ^7.14.5
|
||||
@ -883,21 +756,16 @@ importers:
|
||||
'@nextui-org/card': workspace:*
|
||||
'@nextui-org/checkbox': workspace:*
|
||||
'@nextui-org/code': workspace:*
|
||||
'@nextui-org/col': workspace:*
|
||||
'@nextui-org/container': workspace:*
|
||||
'@nextui-org/divider': workspace:*
|
||||
'@nextui-org/drip': workspace:*
|
||||
'@nextui-org/grid': workspace:*
|
||||
'@nextui-org/image': workspace:*
|
||||
'@nextui-org/link': workspace:*
|
||||
'@nextui-org/loading': workspace:*
|
||||
'@nextui-org/pagination': workspace:*
|
||||
'@nextui-org/radio': workspace:*
|
||||
'@nextui-org/row': workspace:*
|
||||
'@nextui-org/snippet': workspace:*
|
||||
'@nextui-org/spacer': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/text': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
'@nextui-org/user': workspace:*
|
||||
'@stitches/react': 1.2.8
|
||||
clean-package: 2.1.1
|
||||
@ -909,21 +777,16 @@ importers:
|
||||
'@nextui-org/card': link:../../components/card
|
||||
'@nextui-org/checkbox': link:../../components/checkbox
|
||||
'@nextui-org/code': link:../../components/code
|
||||
'@nextui-org/col': link:../../components/col
|
||||
'@nextui-org/container': link:../../components/container
|
||||
'@nextui-org/divider': link:../../components/divider
|
||||
'@nextui-org/drip': link:../../components/drip
|
||||
'@nextui-org/grid': link:../../components/grid
|
||||
'@nextui-org/image': link:../../components/image
|
||||
'@nextui-org/link': link:../../components/link
|
||||
'@nextui-org/loading': link:../../components/loading
|
||||
'@nextui-org/pagination': link:../../components/pagination
|
||||
'@nextui-org/radio': link:../../components/radio
|
||||
'@nextui-org/row': link:../../components/row
|
||||
'@nextui-org/snippet': link:../../components/snippet
|
||||
'@nextui-org/spacer': link:../../components/spacer
|
||||
'@nextui-org/system': link:../system
|
||||
'@nextui-org/text': link:../../components/text
|
||||
'@nextui-org/theme': link:../theme
|
||||
'@nextui-org/user': link:../../components/user
|
||||
devDependencies:
|
||||
'@stitches/react': 1.2.8_react@17.0.2
|
||||
@ -12844,6 +12707,7 @@ packages:
|
||||
hasBin: true
|
||||
dependencies:
|
||||
dot-object: 2.1.4
|
||||
dev: true
|
||||
|
||||
/clean-stack/2.2.0:
|
||||
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
|
||||
@ -13078,6 +12942,7 @@ packages:
|
||||
/commander/4.1.1:
|
||||
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
|
||||
engines: {node: '>= 6'}
|
||||
dev: true
|
||||
|
||||
/commander/5.1.0:
|
||||
resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
|
||||
@ -13865,6 +13730,7 @@ packages:
|
||||
dependencies:
|
||||
commander: 4.1.1
|
||||
glob: 7.2.3
|
||||
dev: true
|
||||
|
||||
/dot-prop/5.3.0:
|
||||
resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user