react-ui89 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/HoverShadow.d.ts +2 -2
- package/dist/esm/components/Ui89Background.d.ts +6 -0
- package/dist/esm/components/Ui89Background.stories.d.ts +7 -0
- package/dist/esm/components/Ui89Button.d.ts +15 -0
- package/dist/esm/components/Ui89Button.stories.d.ts +11 -0
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/index.d.ts +3 -1
- package/dist/esm/index.js +36 -9
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/theme.d.ts +12 -0
- package/package.json +1 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Ui89Background } from "./Ui89Background";
|
|
3
|
+
declare const meta: Meta<typeof Ui89Background>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const LookMain: Story;
|
|
7
|
+
export declare const LookSide: Story;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Ui89Theme } from "../theme";
|
|
3
|
+
interface Ui89ButtonProps {
|
|
4
|
+
theme?: keyof typeof Ui89Theme | Ui89Theme;
|
|
5
|
+
size?: string;
|
|
6
|
+
block?: boolean;
|
|
7
|
+
onClick?: () => void | Promise<void>;
|
|
8
|
+
href?: string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
autoDisableOnClick?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
activated?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare function Ui89Button({ theme, size, block, onClick, href, children, autoDisableOnClick, disabled, activated, }: Ui89ButtonProps): React.JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Ui89Button } from "./Ui89Button";
|
|
3
|
+
declare const meta: Meta<typeof Ui89Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const ThemePrimary: Story;
|
|
7
|
+
export declare const ThemeSecondary: Story;
|
|
8
|
+
export declare const ThemeSuccess: Story;
|
|
9
|
+
export declare const ThemeDanger: Story;
|
|
10
|
+
export declare const ThemeInfo: Story;
|
|
11
|
+
export declare const ThemeWarning: Story;
|
package/dist/esm/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--ui89-palette-black:#000;--ui89-palette-dark-blue:#00a;--ui89-palette-dark-green:#0a0;--ui89-palette-dark-cyan:#0aa;--ui89-palette-dark-red:#a00;--ui89-palette-dark-pink:#a0a;--ui89-palette-dark-yellow:#a50;--ui89-palette-light-gray:#aaa;--ui89-palette-dark-gray:#555;--ui89-palette-light-blue:#5454ff;--ui89-palette-light-green:#5f5;--ui89-palette-light-cyan:#5ff;--ui89-palette-light-red:#f55;--ui89-palette-light-pink:#f5f;--ui89-palette-light-yellow:#ff5;--ui89-palette-white:#fff;--ui89-theme-primary-text-color:var(--ui89-palette-black);--ui89-theme-primary-bg-color:var(--ui89-palette-light-yellow);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white);--ui89-theme-success-text-color:var(--ui89-palette-white);--ui89-theme-success-bg-color:var(--ui89-palette-dark-green);--ui89-theme-info-text-color:var(--ui89-palette-white);--ui89-theme-info-bg-color:var(--ui89-palette-light-blue);--ui89-theme-warning-text-color:var(--ui89-palette-white);--ui89-theme-warning-bg-color:var(--ui89-palette-dark-yellow);--ui89-theme-danger-text-color:var(--ui89-palette-white);--ui89-theme-danger-bg-color:var(--ui89-palette-dark-red);--ui89-safe-space:8px;--ui89-input-height:32px;--ui89-font-size-huge:32px;--ui89-font-size-big:20px;--ui89-font-size-normal:16px;--ui89-font-size-small:14px;--ui89-font-size-tiny:10px;--ui89-input-bg-color:var(--ui89-palette-black);--ui89-input-text-color:var(--ui89-palette-light-yellow);--ui89-animation-speed:100ms}.Ui89Background-module_container__1R-kR{background-color:var(--ui89-content-bg-color);color:var(--ui89-content-text-color)}.look-module_main__dCtZk{--ui89-content-text-color:var(--ui89-palette-white);--ui89-content-text-subtle-color:var(--ui89-palette-light-gray);--ui89-content-bg-color:var(--ui89-palette-dark-blue);--ui89-content-highlight-color:#fff3;--ui89-content-card-bg-color:var(--ui89-palette-dark-blue);--ui89-content-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-light-gray)}.look-module_side__bCbry{--ui89-content-text-color:var(--ui89-palette-white);--ui89-content-text-subtle-color:var(--ui89-palette-dark-gray);--ui89-content-bg-color:var(--ui89-palette-light-gray);--ui89-content-highlight-color:#fff3;--ui89-content-card-bg-color:var(--ui89-palette-light-gray);--ui89-content-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white)}.Ui89Button-module_container__V4tWM{display:inline-block}.Ui89Button-module_button__wl9cp{align-items:center;background-color:var(--ui89-chosen-theme-bg-color);border:1px solid #00000010;border-radius:1px;box-sizing:border-box;color:var(--ui89-chosen-theme-text-color);cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;min-width:60px;padding:0 16px;position:relative;text-align:center;transition:transform var(--ui89-animation-speed);user-select:none}.Ui89Button-module_button__wl9cp:before{inset:0;position:absolute}.Ui89Button-module_block__3sGjT{display:flex}.Ui89Button-module_button__wl9cp:hover:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#ffffff40;content:"";cursor:pointer}.Ui89Button-module_active__ZN0AN,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu){transform:translate3d(calc(var(--ui89-safe-space)/2),calc(var(--ui89-safe-space)/2),0)}.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu):not(.Ui89Button-module_active__ZN0AN):before{background-color:#00000040;content:none;cursor:pointer}.Ui89Button-module_disabled__I5nOu{cursor:default;opacity:.5}.Ui89Button-module_size--normal__Pht3J{height:22px}.Ui89Button-module_size--small__-4-4v{height:24px}.Ui89Button-module_click__INMSh{inset:0;position:absolute}.Ui89Button-module_active__ZN0AN>.Ui89Button-module_click__INMSh,.Ui89Button-module_button__wl9cp:active:not(.Ui89Button-module_disabled__I5nOu)>.Ui89Button-module_click__INMSh{transform:translate3d(calc(var(--ui89-safe-space)/2*-1),calc(var(--ui89-safe-space)/2*-1),0)}.typo-module_big__NWXQv{font-family:monospace;font-size:var(--ui89-font-size-big);line-height:25px}.typo-module_normalBold__6Mx0C,.typo-module_normal__a1-s-{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:24px}.typo-module_normalBold__6Mx0C{font-weight:700}.typo-module_smallBold__BRDCu,.typo-module_small__cdnMc{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px}.typo-module_smallBold__BRDCu{font-weight:700}.typo-module_special__PiPuc{font-family:monospace;font-size:var(--ui89-font-size-small);font-weight:700}.chosen-theme-module_primary__GwEqU{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color)}.chosen-theme-module_secondary__DI5Gk{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color)}.chosen-theme-module_info__KYP2h{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color)}.chosen-theme-module_success__l3hFS{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color)}.chosen-theme-module_warning__A7IOL{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color)}.chosen-theme-module_danger__CZ3Iq{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color)}.HoverShadow-module_container__4noUA{display:block;padding-bottom:var(--ui89-safe-space);padding-right:var(--ui89-safe-space);position:relative}.HoverShadow-module_right__p6LK8{height:calc(100% - var(--ui89-safe-space));width:var(--ui89-safe-space)}.HoverShadow-module_bottom__7Hhnr,.HoverShadow-module_right__p6LK8{background:#000;bottom:0;box-sizing:border-box;display:block;position:absolute;right:0;z-index:0}.HoverShadow-module_bottom__7Hhnr{height:var(--ui89-safe-space);width:calc(100% - var(--ui89-safe-space))}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/esm/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["global.css","Ui89Background.module.css","look.module.css","Ui89Button.module.css","typo.module.css","chosen-theme.module.css","HoverShadow.module.css"],"names":[],"mappings":"AAGA,MAEE,yBAA6B,CAC7B,6BAAiC,CACjC,8BAAkC,CAClC,6BAAiC,CACjC,4BAAgC,CAChC,6BAAiC,CACjC,+BAAmC,CACnC,8BAAkC,CAClC,6BAAiC,CACjC,iCAAkC,CAClC,+BAAmC,CACnC,8BAAkC,CAClC,6BAAiC,CACjC,8BAAkC,CAClC,gCAAoC,CACpC,yBAA6B,CAG7B,yDAA0D,CAC1D,8DAA+D,CAE/D,2DAA4D,CAC5D,yDAA0D,CAE1D,yDAA0D,CAC1D,4DAA6D,CAE7D,sDAAuD,CACvD,yDAA0D,CAE1D,yDAA0D,CAC1D,6DAA8D,CAE9D,wDAAyD,CACzD,yDAA0D,CAG1D,qBAAsB,CACtB,wBAAyB,CAGzB,0BAA2B,CAC3B,yBAA0B,CAC1B,4BAA6B,CAC7B,2BAA4B,CAC5B,0BAA2B,CAG3B,+CAAgD,CAChD,wDAAyD,CAGzD,4BACF,CC1DA,wCACE,6CAA8C,CAC9C,oCACF,CCHA,yBACE,mDAAoD,CACpD,+DAAgE,CAChE,qDAAsD,CACtD,oCAAwD,CACxD,0DAA2D,CAC3D,wDAAyD,CAEzD,yDAA0D,CAC1D,4DAA6D,CAE7D,2DAA4D,CAC5D,8DACF,CAEA,yBACE,mDAAoD,CACpD,8DAA+D,CAC/D,sDAAuD,CACvD,oCAAwD,CACxD,2DAA4D,CAC5D,wDAAyD,CAEzD,yDAA0D,CAC1D,4DAA6D,CAE7D,2DAA4D,CAC5D,yDACF,CC5BA,oCACE,oBACF,CAEA,iCAGE,kBAAmB,CAGnB,kDAAmD,CAQnD,0BAA2B,CAN3B,iBAAkB,CAKlB,qBAAsB,CARtB,yCAA0C,CAgB1C,cAAe,CApBf,mBAAoB,CAQpB,eAAiB,CAPjB,sBAAuB,CAKvB,cAAe,CAGf,cAAe,CASf,iBAAkB,CAPlB,iBAAkB,CAIlB,gDAAiD,CALjD,gBAWF,CAEA,wCAEE,OAAQ,CADR,iBAEF,CAEA,gCACE,YACF,CAEA,4HAEE,0BAA2B,CAD3B,UAAW,CAEX,cACF,CAEA,iHAEE,sFAKF,CAEA,6HAEE,0BAA2B,CAD3B,YAAa,CAEb,cACF,CAEA,mCAEE,cAAe,CADf,UAEF,CAEA,uCACE,WACF,CAEA,sCACE,WACF,CAEA,gCAEE,OAAQ,CADR,iBAEF,CAEA,iLAEE,4FAKF,CCnFA,wBACE,qBAAsB,CACtB,mCAAoC,CACpC,gBACF,CAQA,0DALE,qBAAsB,CACtB,sCAAuC,CACvC,gBAQF,CALA,+BAIE,eACF,CAQA,wDALE,qBAAsB,CACtB,qCAAsC,CACtC,gBAQF,CALA,8BAIE,eACF,CAGA,4BACE,qBAAsB,CACtB,qCAAsC,CACtC,eACF,CCrCA,oCACE,mEAAoE,CACpE,+DACF,CAEA,sCACE,qEAAsE,CACtE,iEACF,CAEA,iCACE,gEAAiE,CACjE,4DACF,CAEA,oCACE,mEAAoE,CACpE,+DACF,CAEA,oCACE,mEAAoE,CACpE,+DACF,CAEA,mCACE,kEAAmE,CACnE,8DACF,CC5BA,qCACE,aAAc,CAEd,qCAAsC,CADtC,oCAAqC,CAErC,iBACF,CAEA,iCAKE,0CAA2C,CAC3C,4BAIF,CAEA,mEAJE,eAAiB,CAJjB,QAAS,CAGT,qBAAsB,CANtB,aAAc,CACd,iBAAkB,CAClB,OAAQ,CAMR,SAaF,CAVA,kCAME,6BAA8B,CAD9B,yCAKF","file":"index.css","sourcesContent":["/*\n * Variables.\n */\n:root {\n /* Leet colors. */\n --ui89-palette-black: #000000;\n --ui89-palette-dark-blue: #0000aa;\n --ui89-palette-dark-green: #00aa00;\n --ui89-palette-dark-cyan: #00aaaa;\n --ui89-palette-dark-red: #aa0000;\n --ui89-palette-dark-pink: #aa00aa;\n --ui89-palette-dark-yellow: #aa5500;\n --ui89-palette-light-gray: #aaaaaa;\n --ui89-palette-dark-gray: #555555;\n --ui89-palette-light-blue: #5454ff;\n --ui89-palette-light-green: #55ff55;\n --ui89-palette-light-cyan: #55ffff;\n --ui89-palette-light-red: #ff5555;\n --ui89-palette-light-pink: #ff55ff;\n --ui89-palette-light-yellow: #ffff55;\n --ui89-palette-white: #ffffff;\n\n /* Themes */\n --ui89-theme-primary-text-color: var(--ui89-palette-black);\n --ui89-theme-primary-bg-color: var(--ui89-palette-light-yellow);\n\n --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n\n --ui89-theme-success-text-color: var(--ui89-palette-white);\n --ui89-theme-success-bg-color: var(--ui89-palette-dark-green);\n\n --ui89-theme-info-text-color: var(--ui89-palette-white);\n --ui89-theme-info-bg-color: var(--ui89-palette-light-blue);\n\n --ui89-theme-warning-text-color: var(--ui89-palette-white);\n --ui89-theme-warning-bg-color: var(--ui89-palette-dark-yellow);\n\n --ui89-theme-danger-text-color: var(--ui89-palette-white);\n --ui89-theme-danger-bg-color: var(--ui89-palette-dark-red);\n\n /* Size and alignment */\n --ui89-safe-space: 8px;\n --ui89-input-height: 32px;\n\n /* Typography */\n --ui89-font-size-huge: 32px;\n --ui89-font-size-big: 20px;\n --ui89-font-size-normal: 16px;\n --ui89-font-size-small: 14px;\n --ui89-font-size-tiny: 10px;\n\n /* Input box */\n --ui89-input-bg-color: var(--ui89-palette-black);\n --ui89-input-text-color: var(--ui89-palette-light-yellow);\n\n /* Animation */\n --ui89-animation-speed: 100ms;\n}\n",".container {\n background-color: var(--ui89-content-bg-color);\n color: var(--ui89-content-text-color);\n}\n",".main {\n --ui89-content-text-color: var(--ui89-palette-white);\n --ui89-content-text-subtle-color: var(--ui89-palette-light-gray);\n --ui89-content-bg-color: var(--ui89-palette-dark-blue);\n --ui89-content-highlight-color: rgba(255, 255, 255, 0.2);\n --ui89-content-card-bg-color: var(--ui89-palette-dark-blue);\n --ui89-content-card-text-color: var(--ui89-palette-white);\n\n --ui89-theme-primary-text-color: var(--ui89-palette-white);\n --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n --ui89-theme-secondary-bg-color: var(--ui89-palette-light-gray);\n}\n\n.side {\n --ui89-content-text-color: var(--ui89-palette-white);\n --ui89-content-text-subtle-color: var(--ui89-palette-dark-gray);\n --ui89-content-bg-color: var(--ui89-palette-light-gray);\n --ui89-content-highlight-color: rgba(255, 255, 255, 0.2);\n --ui89-content-card-bg-color: var(--ui89-palette-light-gray);\n --ui89-content-card-text-color: var(--ui89-palette-white);\n\n --ui89-theme-primary-text-color: var(--ui89-palette-white);\n --ui89-theme-primary-bg-color: var(--ui89-palette-light-blue);\n\n --ui89-theme-secondary-text-color: var(--ui89-palette-black);\n --ui89-theme-secondary-bg-color: var(--ui89-palette-white);\n}\n",".container {\n display: inline-block;\n}\n\n.button {\n display: inline-flex;\n justify-content: center;\n align-items: center; /* align vertical */\n border: 0;\n color: var(--ui89-chosen-theme-text-color);\n background-color: var(--ui89-chosen-theme-bg-color);\n min-width: 60px;\n border-radius: 1px;\n font-weight: bold;\n padding: 0 16px;\n user-select: none;\n text-align: center;\n box-sizing: border-box;\n border: 1px solid #00000010;\n\n transition: transform var(--ui89-animation-speed);\n\n /* For the button active/hover/focus state */\n position: relative;\n\n cursor: pointer;\n}\n\n.button:before {\n position: absolute;\n inset: 0;\n}\n\n.block {\n display: flex;\n}\n\n.button:hover:not(.disabled):not(.active):before {\n content: \"\";\n background-color: #ffffff40;\n cursor: pointer;\n}\n\n.button:active:not(.disabled),\n.active {\n transform: translate3d(\n calc(var(--ui89-safe-space) / 2),\n calc(var(--ui89-safe-space) / 2),\n 0\n );\n}\n\n.button:active:not(.disabled):not(.active):before {\n content: none;\n background-color: #00000040;\n cursor: pointer;\n}\n\n.disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.size--normal {\n height: 22px;\n}\n\n.size--small {\n height: 24px;\n}\n\n.click {\n position: absolute;\n inset: 0;\n}\n\n.button:active:not(.disabled) > .click,\n.active > .click {\n transform: translate3d(\n calc(var(--ui89-safe-space) / 2 * -1),\n calc(var(--ui89-safe-space) / 2 * -1),\n 0\n );\n}\n",".big {\n font-family: monospace;\n font-size: var(--ui89-font-size-big);\n line-height: 25px;\n}\n\n.normal {\n font-family: monospace;\n font-size: var(--ui89-font-size-normal);\n line-height: 24px;\n}\n\n.normalBold {\n font-family: monospace;\n font-size: var(--ui89-font-size-normal);\n line-height: 24px;\n font-weight: bold;\n}\n\n.small {\n font-family: monospace;\n font-size: var(--ui89-font-size-small);\n line-height: 16px;\n}\n\n.smallBold {\n font-family: monospace;\n font-size: var(--ui89-font-size-small);\n line-height: 16px;\n font-weight: bold;\n}\n\n/* For buttons and such. */\n.special {\n font-family: monospace;\n font-size: var(--ui89-font-size-small);\n font-weight: bold;\n}\n",".primary {\n --ui89-chosen-theme-text-color: var(--ui89-theme-primary-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-primary-bg-color);\n}\n\n.secondary {\n --ui89-chosen-theme-text-color: var(--ui89-theme-secondary-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-secondary-bg-color);\n}\n\n.info {\n --ui89-chosen-theme-text-color: var(--ui89-theme-info-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-info-bg-color);\n}\n\n.success {\n --ui89-chosen-theme-text-color: var(--ui89-theme-success-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-success-bg-color);\n}\n\n.warning {\n --ui89-chosen-theme-text-color: var(--ui89-theme-warning-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-warning-bg-color);\n}\n\n.danger {\n --ui89-chosen-theme-text-color: var(--ui89-theme-danger-text-color);\n --ui89-chosen-theme-bg-color: var(--ui89-theme-danger-bg-color);\n}\n",".container {\n display: block;\n padding-right: var(--ui89-safe-space);\n padding-bottom: var(--ui89-safe-space);\n position: relative;\n}\n\n.right {\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n height: calc(100% - var(--ui89-safe-space));\n width: var(--ui89-safe-space);\n box-sizing: border-box;\n background: black;\n z-index: 0;\n}\n\n.bottom {\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n width: calc(100% - var(--ui89-safe-space));\n height: var(--ui89-safe-space);\n box-sizing: border-box;\n background: black;\n z-index: 0;\n}\n"]}
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1,17 +1,44 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var style = {"container":"Ui89Background-module_container__1R-kR"};
|
|
4
|
+
|
|
5
|
+
var lookStyle = {"main":"look-module_main__dCtZk","side":"look-module_side__bCbry"};
|
|
6
|
+
|
|
7
|
+
function Ui89Background({ look, children, }) {
|
|
8
|
+
return (React.createElement("div", { className: `${style.container} ${lookStyle[look]}` }, children));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
var styles$1 = {"container":"Ui89Button-module_container__V4tWM","button":"Ui89Button-module_button__wl9cp","block":"Ui89Button-module_block__3sGjT","disabled":"Ui89Button-module_disabled__I5nOu","active":"Ui89Button-module_active__ZN0AN","size--normal":"Ui89Button-module_size--normal__Pht3J","size--small":"Ui89Button-module_size--small__-4-4v","click":"Ui89Button-module_click__INMSh"};
|
|
12
|
+
|
|
13
|
+
var typoStyles = {"big":"typo-module_big__NWXQv","normal":"typo-module_normal__a1-s-","normalBold":"typo-module_normalBold__6Mx0C","small":"typo-module_small__cdnMc","smallBold":"typo-module_smallBold__BRDCu","special":"typo-module_special__PiPuc"};
|
|
14
|
+
|
|
15
|
+
var chosenThemeStyles = {"primary":"chosen-theme-module_primary__GwEqU","secondary":"chosen-theme-module_secondary__DI5Gk","info":"chosen-theme-module_info__KYP2h","success":"chosen-theme-module_success__l3hFS","warning":"chosen-theme-module_warning__A7IOL","danger":"chosen-theme-module_danger__CZ3Iq"};
|
|
4
16
|
|
|
5
17
|
var styles = {"container":"HoverShadow-module_container__4noUA","right":"HoverShadow-module_right__p6LK8","bottom":"HoverShadow-module_bottom__7Hhnr"};
|
|
6
18
|
|
|
7
|
-
function HoverShadow({ children }) {
|
|
19
|
+
function HoverShadow({ children, }) {
|
|
8
20
|
return (React.createElement("span", { className: styles.container },
|
|
9
21
|
React.createElement("span", { className: styles.bottom }),
|
|
10
22
|
React.createElement("span", { className: styles.right }),
|
|
11
23
|
children));
|
|
12
24
|
}
|
|
13
25
|
|
|
14
|
-
|
|
26
|
+
var Ui89Theme;
|
|
27
|
+
(function (Ui89Theme) {
|
|
28
|
+
Ui89Theme[Ui89Theme["primary"] = 0] = "primary";
|
|
29
|
+
Ui89Theme[Ui89Theme["secondary"] = 1] = "secondary";
|
|
30
|
+
Ui89Theme[Ui89Theme["info"] = 2] = "info";
|
|
31
|
+
Ui89Theme[Ui89Theme["success"] = 3] = "success";
|
|
32
|
+
Ui89Theme[Ui89Theme["warning"] = 4] = "warning";
|
|
33
|
+
Ui89Theme[Ui89Theme["danger"] = 5] = "danger";
|
|
34
|
+
})(Ui89Theme || (Ui89Theme = {}));
|
|
35
|
+
var Ui89Look;
|
|
36
|
+
(function (Ui89Look) {
|
|
37
|
+
Ui89Look[Ui89Look["main"] = 0] = "main";
|
|
38
|
+
Ui89Look[Ui89Look["side"] = 1] = "side";
|
|
39
|
+
})(Ui89Look || (Ui89Look = {}));
|
|
40
|
+
|
|
41
|
+
function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick, href, children, autoDisableOnClick = true, disabled, activated, }) {
|
|
15
42
|
//const router = useRouter()
|
|
16
43
|
const [clicking, setClicking] = useState(false);
|
|
17
44
|
let localDisabled = disabled || (autoDisableOnClick && clicking);
|
|
@@ -27,7 +54,7 @@ function Button({ theme = 'good', size = 'normal', block, onClick, href, childre
|
|
|
27
54
|
try {
|
|
28
55
|
setClicking(true);
|
|
29
56
|
if (href !== undefined) {
|
|
30
|
-
if (href.startsWith(
|
|
57
|
+
if (href.startsWith("/")) {
|
|
31
58
|
e.preventDefault();
|
|
32
59
|
//router.push(href)
|
|
33
60
|
}
|
|
@@ -60,14 +87,14 @@ function Button({ theme = 'good', size = 'normal', block, onClick, href, childre
|
|
|
60
87
|
}
|
|
61
88
|
let buttonClass = [
|
|
62
89
|
styles$1.button,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
styles$1[
|
|
90
|
+
typoStyles.special,
|
|
91
|
+
chosenThemeStyles[theme],
|
|
92
|
+
styles$1["size--" + size],
|
|
66
93
|
activated ? styles$1.active : undefined,
|
|
67
94
|
block ? styles$1.block : undefined,
|
|
68
95
|
disabled ? styles$1.disabled : undefined,
|
|
69
96
|
clicking ? styles$1.active : undefined,
|
|
70
|
-
].join(
|
|
97
|
+
].join(" ");
|
|
71
98
|
if (href) {
|
|
72
99
|
return (React.createElement("span", { className: styles$1.container },
|
|
73
100
|
React.createElement(HoverShadow, null,
|
|
@@ -84,5 +111,5 @@ function Button({ theme = 'good', size = 'normal', block, onClick, href, childre
|
|
|
84
111
|
}
|
|
85
112
|
}
|
|
86
113
|
|
|
87
|
-
export {
|
|
114
|
+
export { Ui89Background, Ui89Button };
|
|
88
115
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/HoverShadow.tsx","../../src/components/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/components/Ui89Background.tsx","../../src/components/HoverShadow.tsx","../../src/theme.ts","../../src/components/Ui89Button.tsx"],"sourcesContent":["import React from \"react\"\n\nimport { Ui89Look } from \"../theme\"\n\nimport style from \"./Ui89Background.module.css\"\nimport lookStyle from \"../style/look.module.css\"\n\nexport function Ui89Background({\n look,\n children,\n}: {\n look: keyof typeof Ui89Look | Ui89Look\n children: React.ReactNode\n}) {\n return (\n <div className={`${style.container} ${lookStyle[look]}`}>{children}</div>\n )\n}\n","import React from \"react\"\nimport styles from \"./HoverShadow.module.css\"\n\nexport default function HoverShadow({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <span className={styles.container}>\n <span className={styles.bottom}></span>\n <span className={styles.right}></span>\n {children}\n </span>\n )\n}\n","export enum Ui89Theme {\n primary,\n secondary,\n info,\n success,\n warning,\n danger,\n}\n\nexport enum Ui89Look {\n main,\n side,\n}\n","import React, { useState } from \"react\"\n\nimport styles from \"./Ui89Button.module.css\"\nimport typoStyles from \"../style/typo.module.css\"\nimport chosenThemeStyles from \"../style/chosen-theme.module.css\"\n\nimport HoverShadow from \"./HoverShadow\"\n\nimport { Ui89Theme } from \"../theme\"\n\ninterface Ui89ButtonProps {\n theme?: keyof typeof Ui89Theme | Ui89Theme\n size?: string\n block?: boolean\n onClick?: () => void | Promise<void>\n href?: string\n children: React.ReactNode\n autoDisableOnClick?: boolean\n disabled?: boolean\n activated?: boolean\n}\n\nexport function Ui89Button({\n theme = Ui89Theme.primary,\n size = \"normal\",\n block,\n onClick,\n href,\n children,\n autoDisableOnClick = true,\n disabled,\n activated,\n}: Ui89ButtonProps) {\n //const router = useRouter()\n const [clicking, setClicking] = useState(false)\n\n let localDisabled = disabled || (autoDisableOnClick && clicking)\n\n async function onAnchorClick(e: React.MouseEvent<HTMLAnchorElement>) {\n if (localDisabled) {\n // The anchor tag does not support the disabled attribute so we do this.\n return\n }\n\n if (clicking) {\n // No double clicking allowed.\n return\n }\n\n try {\n setClicking(true)\n\n if (href !== undefined) {\n if (href.startsWith(\"/\")) {\n e.preventDefault()\n //router.push(href)\n }\n }\n } finally {\n setClicking(false)\n }\n }\n\n async function onButtonClick(e: React.MouseEvent<HTMLButtonElement>) {\n if (localDisabled) {\n // The anchor tag does not support the disabled attribute so we do this.\n return\n }\n\n if (clicking) {\n // No double clicking allowed.\n return\n }\n\n try {\n setClicking(true)\n\n if (onClick === undefined) {\n // No handler.\n return\n }\n\n await onClick()\n } finally {\n setClicking(false)\n }\n }\n\n let buttonClass = [\n styles.button,\n typoStyles.special,\n chosenThemeStyles[theme],\n styles[\"size--\" + size],\n activated ? styles.active : undefined,\n block ? styles.block : undefined,\n disabled ? styles.disabled : undefined,\n clicking ? styles.active : undefined,\n ].join(\" \")\n\n if (href) {\n return (\n <span className={styles.container}>\n <HoverShadow>\n <a className={buttonClass} href={href} onClick={onAnchorClick}>\n <span className={styles.click}></span>\n {children}\n </a>\n </HoverShadow>\n </span>\n )\n } else {\n return (\n <span className={styles.container}>\n <HoverShadow>\n <button\n className={buttonClass}\n type=\"button\"\n onClick={onButtonClick}\n disabled={localDisabled}\n >\n <span className={styles.click}></span>\n {children}\n </button>\n </HoverShadow>\n </span>\n )\n }\n}\n"],"names":["styles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-ui89",
|
|
3
3
|
"description": "A collection of components that mimic a style of user interfaces from the 80s.",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.2",
|
|
5
5
|
"author": "Daniel Araujo",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
9
|
"README.md"
|
|
10
10
|
],
|
|
11
|
-
"types": "dist/index.d.ts",
|
|
12
11
|
"peerDependencies": {
|
|
13
12
|
"react": "^18.3.1"
|
|
14
13
|
},
|