@adamjanicki/ui 1.6.7 → 1.6.9

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.
Files changed (6) hide show
  1. package/components/Accordion/Accordion.js +1 -1
  2. package/components/Modal/Modal.js +1 -0
  3. package/package.json +1 -1
  4. package/style.css +1 -1
  5. package/utils/transformVfx.js +91 -133
  6. package/utils/types.d.ts +4 -2
package/components/Accordion/Accordion.js CHANGED
@@ -28,7 +28,7 @@ import { UnstyledButton } from "../Button";
28
28
  import Animated from "../Animated";
29
29
  var Accordion = React.forwardRef(function (_a, ref) {
30
30
  var drawers = _a.drawers, duration = _a.duration, hideDividers = _a.hideDividers, vfx = _a.vfx, rest = __rest(_a, ["drawers", "duration", "hideDividers", "vfx"]);
31
- return (_jsx(Box, __assign({ vfx: __assign({ axis: "y", radius: "rounded", color: "default", backgroundColor: "default", shadow: "subtle" }, vfx) }, rest, { ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
31
+ return (_jsx(Box, __assign({ vfx: __assign({ axis: "y", radius: "rounded", color: "default", backgroundColor: "default", shadow: "subtle", border: true }, vfx) }, rest, { ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
32
32
  });
33
33
  var Drawer = function (_a) {
34
34
  var item = _a.item, duration = _a.duration, showDivider = _a.showDivider;
package/components/Modal/Modal.js CHANGED
@@ -35,6 +35,7 @@ var Modal = React.forwardRef(function (_a, ref) {
35
35
  radius: "rounded",
36
36
  maxWidth: "full",
37
37
  shadow: "floating",
38
+ border: true,
38
39
  color: "default",
39
40
  backgroundColor: "default",
40
41
  }, children: [_jsx(Box, { vfx: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adamjanicki/ui",
3
- "version": "1.6.7",
3
+ "version": "1.6.9",
4
4
  "description": "Basic UI components and hooks for React in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./index.js",
package/style.css CHANGED
@@ -1 +1 @@
1
- :root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-color-default: black;--aui-color-muted: var(--aui-dark-gray);--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-opacity-disabled: 0.5;--aui-opacity-dim: 0.75;--aui-default-transition: 0.25s ease-in-out;--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--aui-radius-none: 0;--aui-radius-subtle: 4px;--aui-radius-rounded: 8px;--aui-radius-max: 10000px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-avatar-purple: #bc54d6;--aui-avatar-blue: #618bdc;--aui-avatar-red: #ee6060;--aui-avatar-green: #add386;--aui-avatar-yellow: #f5c76d;--aui-static-background: #e8e8e8;--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-layer-backdrop-background: rgba(200, 200, 200, 0.6);--aui-link-color: #0070ff}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-color-default: white;--aui-color-muted: var(--aui-moon-gray);--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff}.aui-content-success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content-warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content-error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content-info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content-static{background-color:var(--aui-static-background);color:var(--aui-static-color);border-color:var(--aui-static-border)}.aui-alert,.aui-badge{border-style:solid;border-width:1px}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button:disabled{cursor:default !important;opacity:var(--aui-opacity-disabled)}.aui-button-primary{background-color:var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button-secondary{color:var(--aui-color-default);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-opacity-dim)}.aui-link{color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button-primary:not([disabled]):hover,.aui-dim:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-opacity-dim)}.aui-button-secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}.aui-undim:not([disabled]):hover{opacity:1}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-opacity-disabled);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-opacity-disabled);cursor:default}.aui-layer-backdrop{top:0;left:0;width:100vw;height:100vh;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel-item{flex:0 0 100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l)}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s)}.aui-pos-static{position:static}.aui-pos-relative{position:relative}.aui-pos-absolute{position:absolute}.aui-pos-fixed{position:fixed}.aui-pos-sticky{position:sticky}.aui-flex-x{display:flex;flex-direction:row}.aui-flex-y{display:flex;flex-direction:column}.aui-flex--x{display:flex;flex-direction:row-reverse}.aui-flex--y{display:flex;flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-end{justify-content:flex-end}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-avatar-red{background-color:var(--aui-avatar-red)}.aui-avatar-yellow{background-color:var(--aui-avatar-yellow)}.aui-avatar-green{background-color:var(--aui-avatar-green)}.aui-avatar-blue{background-color:var(--aui-avatar-blue)}.aui-avatar-purple{background-color:var(--aui-avatar-purple)}.aui-avatar-xxs{width:12px;height:12px;line-height:12px;font-size:9.6px}.aui-avatar-xs{width:16px;height:16px;line-height:16px;font-size:12.8px}.aui-avatar-s{width:24px;height:24px;line-height:24px;font-size:19.2px}.aui-avatar-m{width:32px;height:32px;line-height:32px;font-size:25.6px}.aui-avatar-l{width:48px;height:48px;line-height:48px;font-size:38.4px}.aui-avatar-xl{width:64px;height:64px;line-height:64px;font-size:51.2px}.aui-avatar-xxl{width:128px;height:128px;line-height:128px;font-size:102.4px}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-auto{margin-top:auto}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-auto{margin-bottom:auto}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-auto{margin-left:auto}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-auto{margin-right:auto}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-radius-none{border-radius:var(--aui-radius-none)}.aui-radius-subtle{border-radius:var(--aui-radius-subtle)}.aui-radius-rounded{border-radius:var(--aui-radius-rounded)}.aui-radius-max{border-radius:var(--aui-radius-max)}.aui-ba{border:1px solid var(--aui-default-border)}.aui-bt{border-top:1px solid var(--aui-default-border)}.aui-br{border-right:1px solid var(--aui-default-border)}.aui-bb{border-bottom:1px solid var(--aui-default-border)}.aui-bl{border-left:1px solid var(--aui-default-border)}.aui-bw-none{border-width:0px}.aui-bw-xs{border-width:1px}.aui-bw-s{border-width:2px}.aui-bw-m{border-width:4px}.aui-bw-l{border-width:8px}.aui-bw-xl{border-width:16px}.aui-bs-solid{border-style:solid}.aui-bs-dotted{border-style:dotted}.aui-bs-dashed{border-style:dashed}.aui-bs-none{border-style:none}.aui-bc-default{border-color:var(--aui-default-border)}.aui-bc-primary{border-color:var(--aui-color-default)}.aui-shadow-sharp{box-shadow:0 0 0 1px var(--aui-default-border) inset}.aui-shadow-subtle{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow)}.aui-shadow-floating{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-floating-box-shadow)}.aui-shadow-none{box-shadow:none}.aui-op-none{opacity:0}.aui-op-disabled{opacity:var(--aui-opacity-disabled)}.aui-op-dim{opacity:var(--aui-opacity-dim)}.aui-op-full{opacity:1}.aui-f-xxs{font-size:10px}.aui-f-xs{font-size:12px}.aui-f-s{font-size:14px}.aui-f-m{font-size:16px}.aui-f-l{font-size:20px}.aui-f-xl{font-size:24px}.aui-f-xxl{font-size:32px}.aui-fw-1{font-weight:100}.aui-fw-2{font-weight:200}.aui-fw-3{font-weight:300}.aui-fw-4{font-weight:400}.aui-fw-5{font-weight:500}.aui-fw-6{font-weight:600}.aui-fw-7{font-weight:700}.aui-fw-8{font-weight:800}.aui-fw-9{font-weight:900}.aui-ta-left{text-align:left}.aui-ta-right{text-align:right}.aui-ta-center{text-align:center}.aui-it{font-style:italic}.aui-bg-default{background-color:var(--aui-color-default)}.aui-bg-muted{background-color:var(--aui-color-muted)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-bg-default{background-color:var(--aui-default-background)}.aui-bg-muted{background-color:var(--aui-static-background)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-ov-scroll{overflow:scroll}.aui-ov-x-scroll{overflow-x:scroll}.aui-ov-y-scroll{overflow-y:scroll}.aui-ov-hidden{overflow:hidden}.aui-ov-x-hidden{overflow-x:hidden}.aui-ov-y-hidden{overflow-y:hidden}.aui-z-auto{z-index:auto}.aui-z-floating{z-index:100}.aui-z-nav{z-index:1000}.aui-z-max{z-index:10000}.aui-select-icon{--size: 10px;color:var(--aui-color-muted);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}
1
+ :root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-color-default: black;--aui-color-muted: var(--aui-dark-gray);--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-opacity-disabled: 0.5;--aui-opacity-dim: 0.75;--aui-default-transition: 0.25s ease-in-out;--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--aui-radius-none: 0;--aui-radius-subtle: 4px;--aui-radius-rounded: 8px;--aui-radius-max: 10000px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-avatar-purple: #bc54d6;--aui-avatar-blue: #618bdc;--aui-avatar-red: #ee6060;--aui-avatar-green: #add386;--aui-avatar-yellow: #f5c76d;--aui-static-background: #e8e8e8;--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-layer-backdrop-background: rgba(200, 200, 200, 0.6);--aui-link-color: #0070ff}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-color-default: white;--aui-color-muted: var(--aui-moon-gray);--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-static-color: var(--aui-color-default);--aui-static-border: var(--aui-default-border);--aui-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff}.aui-content-success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content-warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content-error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content-info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content-static{background-color:var(--aui-static-background);color:var(--aui-static-color);border-color:var(--aui-static-border)}.aui-alert,.aui-badge{border-style:solid;border-width:1px}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button:disabled{cursor:default !important;opacity:var(--aui-opacity-disabled)}.aui-button-primary{background-color:var(--aui-button-primary-background);border:1px solid var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button-secondary{color:var(--aui-color-default);background-color:var(--aui-default-background);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);transition:border var(--aui-default-transition)}.aui-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-opacity-dim)}.aui-link{color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button-primary:not([disabled]):hover,.aui-dim:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-opacity-dim)}.aui-button-secondary:not([disabled]):hover{border-color:var(--aui-button-secondary-border-hover)}.aui-undim:not([disabled]):hover{opacity:1}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-input,.aui-select-container{transition:box-shadow var(--aui-default-transition);border:1px solid var(--aui-default-border);box-shadow:var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-opacity-disabled);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-opacity-disabled);cursor:default}.aui-layer-backdrop{top:0;left:0;width:100vw;height:100vh;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel-item{flex:0 0 100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l)}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s)}.aui-pos-static{position:static}.aui-pos-relative{position:relative}.aui-pos-absolute{position:absolute}.aui-pos-fixed{position:fixed}.aui-pos-sticky{position:sticky}.aui-flex-x{display:flex;flex-direction:row}.aui-flex-y{display:flex;flex-direction:column}.aui-flex--x{display:flex;flex-direction:row-reverse}.aui-flex--y{display:flex;flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-end{justify-content:flex-end}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-avatar-red{background-color:var(--aui-avatar-red)}.aui-avatar-yellow{background-color:var(--aui-avatar-yellow)}.aui-avatar-green{background-color:var(--aui-avatar-green)}.aui-avatar-blue{background-color:var(--aui-avatar-blue)}.aui-avatar-purple{background-color:var(--aui-avatar-purple)}.aui-avatar-xxs{width:12px;height:12px;line-height:12px;font-size:9.6px}.aui-avatar-xs{width:16px;height:16px;line-height:16px;font-size:12.8px}.aui-avatar-s{width:24px;height:24px;line-height:24px;font-size:19.2px}.aui-avatar-m{width:32px;height:32px;line-height:32px;font-size:25.6px}.aui-avatar-l{width:48px;height:48px;line-height:48px;font-size:38.4px}.aui-avatar-xl{width:64px;height:64px;line-height:64px;font-size:51.2px}.aui-avatar-xxl{width:128px;height:128px;line-height:128px;font-size:102.4px}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-auto{margin-top:auto}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-auto{margin-bottom:auto}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-auto{margin-left:auto}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-auto{margin-right:auto}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-radius-none{border-radius:var(--aui-radius-none)}.aui-radius-subtle{border-radius:var(--aui-radius-subtle)}.aui-radius-rounded{border-radius:var(--aui-radius-rounded)}.aui-radius-max{border-radius:var(--aui-radius-max)}.aui-ba{border:1px solid var(--aui-default-border)}.aui-bt{border-top:1px solid var(--aui-default-border)}.aui-br{border-right:1px solid var(--aui-default-border)}.aui-bb{border-bottom:1px solid var(--aui-default-border)}.aui-bl{border-left:1px solid var(--aui-default-border)}.aui-bw-none{border-width:0px}.aui-bw-xs{border-width:1px}.aui-bw-s{border-width:2px}.aui-bw-m{border-width:4px}.aui-bw-l{border-width:8px}.aui-bw-xl{border-width:16px}.aui-bs-solid{border-style:solid}.aui-bs-dotted{border-style:dotted}.aui-bs-dashed{border-style:dashed}.aui-bs-none{border-style:none}.aui-bc-default{border-color:var(--aui-default-border)}.aui-bc-primary{border-color:var(--aui-color-default)}.aui-shadow-subtle{box-shadow:var(--aui-subtle-box-shadow)}.aui-shadow-floating{box-shadow:var(--aui-floating-box-shadow)}.aui-shadow-none{box-shadow:none}.aui-op-none{opacity:0}.aui-op-disabled{opacity:var(--aui-opacity-disabled)}.aui-op-dim{opacity:var(--aui-opacity-dim)}.aui-op-full{opacity:1}.aui-f-xxs{font-size:10px}.aui-f-xs{font-size:12px}.aui-f-s{font-size:14px}.aui-f-default{font-size:16px}.aui-f-m{font-size:20px}.aui-f-l{font-size:24px}.aui-f-xl{font-size:32px}.aui-f-xxl{font-size:48px}.aui-fw-1{font-weight:100}.aui-fw-2{font-weight:200}.aui-fw-3{font-weight:300}.aui-fw-4{font-weight:400}.aui-fw-5{font-weight:500}.aui-fw-6{font-weight:600}.aui-fw-7{font-weight:700}.aui-fw-8{font-weight:800}.aui-fw-9{font-weight:900}.aui-ta-left{text-align:left}.aui-ta-right{text-align:right}.aui-ta-center{text-align:center}.aui-it{font-style:italic}.aui-bg-default{background-color:var(--aui-color-default)}.aui-bg-muted{background-color:var(--aui-color-muted)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-bg-default{background-color:var(--aui-default-background)}.aui-bg-muted{background-color:var(--aui-static-background)}.aui-bg-inherit{background-color:inherit}.aui-bg-transparent{background-color:rgba(0,0,0,0)}.aui-ov-scroll{overflow:scroll}.aui-ov-x-scroll{overflow-x:scroll}.aui-ov-y-scroll{overflow-y:scroll}.aui-ov-hidden{overflow:hidden}.aui-ov-x-hidden{overflow-x:hidden}.aui-ov-y-hidden{overflow-y:hidden}.aui-z-auto{z-index:auto}.aui-z-floating{z-index:100}.aui-z-nav{z-index:1000}.aui-z-max{z-index:10000}.aui-cur-auto{cursor:auto}.aui-cur-pointer{cursor:pointer}.aui-select-icon{--size: 10px;color:var(--aui-color-muted);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}
package/utils/transformVfx.js CHANGED
@@ -1,147 +1,105 @@
1
- import { classNames } from "../functions";
2
- // Prefix maps for padding and margin keys
3
- var spacingPrefixMap = {
4
- padding: "pa",
5
- paddingTop: "pt",
6
- paddingBottom: "pb",
7
- paddingLeft: "pl",
8
- paddingRight: "pr",
9
- margin: "ma",
10
- marginTop: "mt",
11
- marginBottom: "mb",
12
- marginLeft: "ml",
13
- marginRight: "mr",
14
- };
15
- var dimensionPrefixMap = {
16
- width: "w",
17
- maxWidth: "mw",
18
- height: "h",
19
- maxHeight: "mh",
20
- };
21
- var mapLayout = function (_a) {
22
- var pos = _a.pos, axis = _a.axis, wrap = _a.wrap, align = _a.align, justify = _a.justify, gap = _a.gap, overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY, z = _a.z;
23
- var className = pos ? "aui-pos-".concat(pos) : null;
1
+ export default function transformVfx(vfx) {
2
+ if (!vfx)
3
+ return null;
4
+ var pos = vfx.pos, axis = vfx.axis, wrap = vfx.wrap, align = vfx.align, justify = vfx.justify, gap = vfx.gap, overflow = vfx.overflow, overflowX = vfx.overflowX, overflowY = vfx.overflowY, z = vfx.z, padding = vfx.padding, paddingX = vfx.paddingX, paddingY = vfx.paddingY, paddingTop = vfx.paddingTop, paddingBottom = vfx.paddingBottom, paddingLeft = vfx.paddingLeft, paddingRight = vfx.paddingRight, margin = vfx.margin, marginX = vfx.marginX, marginY = vfx.marginY, marginTop = vfx.marginTop, marginBottom = vfx.marginBottom, marginLeft = vfx.marginLeft, marginRight = vfx.marginRight, width = vfx.width, height = vfx.height, maxWidth = vfx.maxWidth, maxHeight = vfx.maxHeight, border = vfx.border, borderTop = vfx.borderTop, borderBottom = vfx.borderBottom, borderRight = vfx.borderRight, borderLeft = vfx.borderLeft, borderColor = vfx.borderColor, borderStyle = vfx.borderStyle, borderWidth = vfx.borderWidth, fontSize = vfx.fontSize, fontWeight = vfx.fontWeight, textAlign = vfx.textAlign, italics = vfx.italics, radius = vfx.radius, shadow = vfx.shadow, color = vfx.color, backgroundColor = vfx.backgroundColor, opacity = vfx.opacity, cursor = vfx.cursor;
5
+ var classes = [];
6
+ // --- Layout ---
7
+ if (pos)
8
+ classes.push("aui-pos-".concat(pos));
24
9
  if (axis)
25
- className = classNames(className, "aui-flex-".concat(axis));
10
+ classes.push("aui-flex-".concat(axis));
26
11
  if (wrap)
27
- className = classNames(className, "aui-flex-wrap");
12
+ classes.push("aui-flex-wrap");
28
13
  if (align)
29
- className = classNames(className, "aui-align-".concat(align));
14
+ classes.push("aui-align-".concat(align));
30
15
  if (justify)
31
- className = classNames(className, "aui-justify-".concat(justify));
16
+ classes.push("aui-justify-".concat(justify));
32
17
  if (gap)
33
- className = classNames(className, "aui-gap-".concat(gap));
18
+ classes.push("aui-gap-".concat(gap));
34
19
  if (overflow)
35
- className = classNames(className, "aui-ov-".concat(overflow));
20
+ classes.push("aui-ov-".concat(overflow));
36
21
  if (overflowX)
37
- className = classNames(className, "aui-ov-x-".concat(overflowX));
22
+ classes.push("aui-ov-x-".concat(overflowX));
38
23
  if (overflowY)
39
- className = classNames(className, "aui-ov-y-".concat(overflowY));
24
+ classes.push("aui-ov-y-".concat(overflowY));
40
25
  if (z)
41
- className = classNames(className, "aui-z-".concat(z));
42
- return className;
43
- };
44
- var mapSpacing = function (_a) {
45
- var padding = _a.padding, paddingX = _a.paddingX, paddingY = _a.paddingY, paddingBottom = _a.paddingBottom, paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, margin = _a.margin, marginX = _a.marginX, marginY = _a.marginY, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
46
- // Use your existing spacingPrefixMap logic
47
- var className = null;
48
- var spacingProps = [
49
- ["padding", padding],
50
- ["paddingTop", paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY],
51
- ["paddingBottom", paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY],
52
- ["paddingLeft", paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX],
53
- ["paddingRight", paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX],
54
- ["margin", margin],
55
- ["marginTop", marginTop !== null && marginTop !== void 0 ? marginTop : marginY],
56
- ["marginBottom", marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY],
57
- ["marginLeft", marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX],
58
- ["marginRight", marginRight !== null && marginRight !== void 0 ? marginRight : marginX],
59
- ];
60
- spacingProps.forEach(function (_a) {
61
- var prop = _a[0], value = _a[1];
62
- if (value) {
63
- var prefix = spacingPrefixMap[prop];
64
- className = classNames(className, "aui-".concat(prefix, "-").concat(value));
65
- }
66
- });
67
- return className;
68
- };
69
- var dimensionProps = ["width", "height", "maxWidth", "maxHeight"];
70
- var mapDimensions = function (vfx) {
71
- var className = null;
72
- dimensionProps.forEach(function (prop) {
73
- var value = vfx[prop];
74
- if (value)
75
- className = classNames(className, "aui-".concat(dimensionPrefixMap[prop], "-").concat(value));
76
- });
77
- return className;
78
- };
79
- var mapBorders = function (_a) {
80
- var border = _a.border, borderTop = _a.borderTop, borderBottom = _a.borderBottom, borderLeft = _a.borderLeft, borderRight = _a.borderRight, borderWidth = _a.borderWidth, borderStyle = _a.borderStyle, borderColor = _a.borderColor;
81
- var className = null;
82
- var sides = {
83
- ba: border,
84
- bt: borderTop,
85
- bb: borderBottom,
86
- bl: borderLeft,
87
- br: borderRight,
88
- };
89
- Object.entries(sides).forEach(function (_a) {
90
- var prefix = _a[0], value = _a[1];
91
- if (value) {
92
- className = classNames(className, "aui-".concat(prefix));
93
- }
94
- });
95
- var modifiers = {
96
- bw: borderWidth,
97
- bs: borderStyle,
98
- bc: borderColor,
99
- };
100
- Object.entries(modifiers).forEach(function (_a) {
101
- var prefix = _a[0], value = _a[1];
102
- if (value) {
103
- className = classNames(className, "aui-".concat(prefix, "-").concat(value));
104
- }
105
- });
106
- return className;
107
- };
108
- var mapMiscellaneous = function (_a) {
109
- var radius = _a.radius, shadow = _a.shadow, color = _a.color, backgroundColor = _a.backgroundColor, opacity = _a.opacity;
110
- var className = radius ? "aui-radius-".concat(radius) : null;
111
- if (shadow)
112
- className = classNames(className, "aui-shadow-".concat(shadow));
113
- if (color)
114
- className = classNames(className, "aui-c-".concat(color));
115
- if (backgroundColor)
116
- className = classNames(className, "aui-bg-".concat(backgroundColor));
117
- if (opacity)
118
- className = classNames(className, "aui-op-".concat(opacity));
119
- return className;
120
- };
121
- var mapTypography = function (_a) {
122
- var fontSize = _a.fontSize, fontWeight = _a.fontWeight, textAlign = _a.textAlign, italics = _a.italics;
123
- var className = null;
26
+ classes.push("aui-z-".concat(z));
27
+ // --- Spacing ---
28
+ var pt = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY;
29
+ var pb = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY;
30
+ var pl = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX;
31
+ var pr = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX;
32
+ var mt = marginTop !== null && marginTop !== void 0 ? marginTop : marginY;
33
+ var mb = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY;
34
+ var ml = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX;
35
+ var mr = marginRight !== null && marginRight !== void 0 ? marginRight : marginX;
36
+ if (padding)
37
+ classes.push("aui-pa-".concat(padding));
38
+ if (pt)
39
+ classes.push("aui-pt-".concat(pt));
40
+ if (pb)
41
+ classes.push("aui-pb-".concat(pb));
42
+ if (pl)
43
+ classes.push("aui-pl-".concat(pl));
44
+ if (pr)
45
+ classes.push("aui-pr-".concat(pr));
46
+ if (margin)
47
+ classes.push("aui-ma-".concat(margin));
48
+ if (mt)
49
+ classes.push("aui-mt-".concat(mt));
50
+ if (mb)
51
+ classes.push("aui-mb-".concat(mb));
52
+ if (ml)
53
+ classes.push("aui-ml-".concat(ml));
54
+ if (mr)
55
+ classes.push("aui-mr-".concat(mr));
56
+ // --- Dimensions ---
57
+ if (width)
58
+ classes.push("aui-w-".concat(width));
59
+ if (height)
60
+ classes.push("aui-h-".concat(height));
61
+ if (maxWidth)
62
+ classes.push("aui-mw-".concat(maxWidth));
63
+ if (maxHeight)
64
+ classes.push("aui-mh-".concat(maxHeight));
65
+ // --- Borders ---
66
+ if (border)
67
+ classes.push("aui-ba");
68
+ if (borderTop)
69
+ classes.push("aui-bt");
70
+ if (borderBottom)
71
+ classes.push("aui-bb");
72
+ if (borderLeft)
73
+ classes.push("aui-bl");
74
+ if (borderRight)
75
+ classes.push("aui-br");
76
+ if (borderWidth)
77
+ classes.push("aui-bw-".concat(borderWidth));
78
+ if (borderStyle)
79
+ classes.push("aui-bs-".concat(borderStyle));
80
+ if (borderColor)
81
+ classes.push("aui-bc-".concat(borderColor));
82
+ // --- Typography ---
124
83
  if (fontSize)
125
- className = classNames(className, "aui-f-".concat(fontSize));
84
+ classes.push("aui-f-".concat(fontSize));
126
85
  if (fontWeight)
127
- className = classNames(className, "aui-fw-".concat(fontWeight));
86
+ classes.push("aui-fw-".concat(fontWeight));
128
87
  if (textAlign)
129
- className = classNames(className, "aui-ta-".concat(textAlign));
88
+ classes.push("aui-ta-".concat(textAlign));
130
89
  if (italics)
131
- className = classNames(className, "aui-it");
132
- return className;
133
- };
134
- var transformers = [
135
- mapLayout,
136
- mapSpacing,
137
- mapDimensions,
138
- mapBorders,
139
- mapTypography,
140
- mapMiscellaneous,
141
- ];
142
- export default function transformVfx(vfx) {
143
- if (!vfx)
144
- return null;
145
- var combinedClasses = classNames.apply(void 0, transformers.map(function (transformer) { return transformer(vfx); }));
146
- return combinedClasses || null;
90
+ classes.push("aui-it");
91
+ // --- Misc ---
92
+ if (radius)
93
+ classes.push("aui-radius-".concat(radius));
94
+ if (shadow)
95
+ classes.push("aui-shadow-".concat(shadow));
96
+ if (color)
97
+ classes.push("aui-c-".concat(color));
98
+ if (backgroundColor)
99
+ classes.push("aui-bg-".concat(backgroundColor));
100
+ if (opacity)
101
+ classes.push("aui-op-".concat(opacity));
102
+ if (cursor)
103
+ classes.push("aui-cur-".concat(cursor));
104
+ return classes.join(" ") || null;
147
105
  }
package/utils/types.d.ts CHANGED
@@ -84,11 +84,11 @@ export type Vfx = {
84
84
  /** Border color */
85
85
  borderColor?: "default" | "primary";
86
86
  /** Box shadow presets */
87
- shadow?: "subtle" | "floating" | "sharp";
87
+ shadow?: "subtle" | "floating" | "none";
88
88
  /** Opacity presets */
89
89
  opacity?: "none" | "disabled" | "dim" | "full";
90
90
  /** Font size */
91
- fontSize?: SizeToken;
91
+ fontSize?: SizeToken | "default";
92
92
  /** Font weight */
93
93
  fontWeight?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
94
94
  /** Text alignment */
@@ -99,5 +99,7 @@ export type Vfx = {
99
99
  color?: Color;
100
100
  /** Background color */
101
101
  backgroundColor?: Color;
102
+ /** Supported cursor values */
103
+ cursor?: "auto" | "pointer";
102
104
  };
103
105
  export {};