@solibo/solibo-ui 0.5.10 → 0.5.12
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/assets/index.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index13.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index41.css +1 -1
- package/dist/assets/index45.css +1 -1
- package/dist/components/_card/index.cjs +1 -1
- package/dist/components/_card/index.cjs.map +1 -1
- package/dist/components/_card/index.js +38 -39
- package/dist/components/_card/index.js.map +1 -1
- package/dist/components/_collapsible/index.cjs +1 -1
- package/dist/components/_collapsible/index.js +1 -1
- package/dist/components/_dropdown/index.cjs +1 -1
- package/dist/components/_dropdown/index.js +2 -2
- package/dist/components/_sortable/index.cjs +1 -1
- package/dist/components/_sortable/index.js +1 -1
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.cjs.map +1 -1
- package/dist/components/button/index.js +4 -4
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/chip/index.cjs +2 -0
- package/dist/components/chip/index.cjs.map +1 -0
- package/dist/components/chip/index.js +19 -0
- package/dist/components/chip/index.js.map +1 -0
- package/dist/components/controls/index.cjs +1 -1
- package/dist/components/controls/index.cjs.map +1 -1
- package/dist/components/controls/index.js +42 -21
- package/dist/components/controls/index.js.map +1 -1
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +1 -1
- package/dist/components/list/index.cjs +1 -1
- package/dist/components/list/index.cjs.map +1 -1
- package/dist/components/list/index.js +40 -20
- package/dist/components/list/index.js.map +1 -1
- package/dist/components/message/index.cjs +1 -1
- package/dist/components/message/index.cjs.map +1 -1
- package/dist/components/message/index.js +13 -12
- package/dist/components/message/index.js.map +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +1 -1
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/components/textarea/index.cjs +1 -1
- package/dist/components/textarea/index.js +7 -7
- package/dist/icons-Ckl56kYF.cjs +2 -0
- package/dist/icons-Ckl56kYF.cjs.map +1 -0
- package/dist/{icons-06oXnjRF.js → icons-w0wnkdpo.js} +14 -6
- package/dist/icons-w0wnkdpo.js.map +1 -0
- package/dist/{index-OLuoLabz.cjs → index-C9DOzjKO.cjs} +2 -2
- package/dist/{index-OLuoLabz.cjs.map → index-C9DOzjKO.cjs.map} +1 -1
- package/dist/{index-BDTbPD0V.js → index-DvABhnD0.js} +2 -2
- package/dist/{index-BDTbPD0V.js.map → index-DvABhnD0.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +33 -19
- package/dist/index.js +24 -24
- package/dist/tokens.css +52 -15
- package/dist/tokens.json +1021 -178
- package/package.json +2 -2
- package/dist/components/button-group/index.cjs +0 -2
- package/dist/components/button-group/index.cjs.map +0 -1
- package/dist/components/button-group/index.js +0 -33
- package/dist/components/button-group/index.js.map +0 -1
- package/dist/helpers-BD5fFZi-.cjs +0 -2
- package/dist/helpers-BD5fFZi-.cjs.map +0 -1
- package/dist/helpers-D56OHkFI.js +0 -25
- package/dist/helpers-D56OHkFI.js.map +0 -1
- package/dist/icons-06oXnjRF.js.map +0 -1
- package/dist/icons-o8Z5npPW.cjs +0 -2
- package/dist/icons-o8Z5npPW.cjs.map +0 -1
package/dist/assets/index12.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _reveal_1kztc_1{0%{opacity:0;transform:translateY(100%) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}._controls_1kztc_13{align-items:center;display:flex;flex-wrap:wrap;gap:var(--shape-spacing-md)}._default_1kztc_20{margin-top:var(--shape-spacing-md);justify-content:flex-end;width:100%}@media (width < 960px){._default_1kztc_20{flex-direction:column}._default_1kztc_20 [data-component=button]{width:100%}}._fixed_1kztc_34{animation:_reveal_1kztc_1 calc(var(--utils-tokens-transition-duration) * 2) var(--utils-tokens-transition-timing-function) var(--utils-tokens-transition-delay) both;background-color:var(--colors-semantic-bg-surface);border-left:var(--shape-border-width-thick) solid var(--colors-semantic-border-focus);border-radius:var(--shape-border-radius-radius-lg);bottom:var(--shape-spacing-xl);justify-content:center;left:50%;padding:var(--shape-spacing-2xs);position:fixed;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;will-change:opacity,transform;z-index:4}
|
package/dist/assets/index13.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._chip_1nmzv_1{align-items:center;border-radius:var(--shape-border-radius-radius-xl);border:var(--shape-border-width-default) solid var(--colors-semantic-primary-primary-subtle-border);background:var(--colors-semantic-primary-primary-subtle);color:var(--colors-semantic-primary-on-primary-subtle);display:inline-flex;justify-content:center;font-size:var(--typography-font-sizes-label-sm);gap:var(--shape-spacing-2xs);line-height:var(--typography-font-sizes-label-sm);padding:var(--shape-spacing-xs) var(--shape-spacing-xs) var(--shape-spacing-xs) var(--shape-spacing-sm);transition:background-color var(--utils-tokens-transition-duration)}._chip_1nmzv_1:focus{outline:solid var(--shape-outline-focus) var(--colors-semantic-border-focus);outline-offset:var(--shape-spacing-3xs)}._chip_1nmzv_1:hover{background:var(--colors-semantic-interactive-pressed);cursor:pointer}
|
package/dist/assets/index16.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._card_1sfar_1{background-color:var(--colors-semantic-bg-surface);border-radius:var(--shape-border-radius-radius-lg);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);min-width:0;overflow:hidden!important;padding:var(--shape-spacing-md);position:relative;text-overflow:ellipsis;transition:background-color var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function),box-shadow var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function),width var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%}._card_1sfar_1 section{display:inline-block;flex:1 1 auto;min-width:0;width:100%}._card_1sfar_1 ._head_1sfar_27{align-items:start;display:flex;gap:var(--shape-spacing-xs);max-width:100%}._card_1sfar_1 ._head_1sfar_27 header{display:inline-block;flex:1 1 auto;margin:0;min-width:0}._card_1sfar_1 ._head_1sfar_27._center_1sfar_40{align-items:center}._card_1sfar_1 ._head_1sfar_27 :is(h1,h2,h3,h4,h5,h6):first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._card_1sfar_1 ._content_1sfar_52>:last-child{margin-bottom:0}._card_1sfar_1 ._margin_1sfar_58{margin-top:var(--shape-spacing-md)}._card_1sfar_1:has(select),._card_1sfar_1:has([data-component=popover]){overflow:visible!important}._card_1sfar_1 [data-component=croppable]{width:100%}._card_1sfar_1 [data-component=list]{min-width:0}._card_1sfar_1 [data-component=list] li{max-width:100%;min-width:0}._card_1sfar_1 [data-component=list] li>a{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._card_1sfar_1 [data-component=list] li>[data-component=file]{width:100%}._clickable_1sfar_94{cursor:pointer}._clickable_1sfar_94:hover{background-color:var(--colors-semantic-interactive-hover-subtle);box-shadow:var(--shape-box-shadow-sm-position-x) var(--shape-box-shadow-sm-position-y) var(--shape-box-shadow-sm-blur) var(--shape-box-shadow-sm-spread) var(--shape-box-shadow-sm-color)}._clickable_1sfar_94:focus-visible{outline:var(--scale-2) solid var(--colors-semantic-border-focus)}._image-top_1sfar_109{margin-bottom:var(--shape-spacing-md);width:100%}._image-top_1sfar_109 img{width:100%;height:calc(12.5 * var(--utils-tokens-unit));-o-object-fit:cover;object-fit:cover}._image-left_1sfar_120{max-height:calc(8.75 * var(--utils-tokens-unit));max-width:calc(8.75 * var(--utils-tokens-unit));min-height:var(--scale-56);min-width:var(--scale-56)}._image-left_1sfar_120 img{aspect-ratio:1 / 1}._selected_1sfar_131{background-color:var(--colors-semantic-interactive-selected);outline:var(--scale-2) solid var(--colors-semantic-primary-primary-subtle-border)}
|
package/dist/assets/index41.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._message_1xlna_1{background-color:var(--colors-semantic-bg-page);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);overflow:hidden;padding:var(--utils-tokens-unit);white-space:pre-wrap;word-break:break-word}._message_1xlna_1[data-type=default]{border-radius:0 var(--utils-tokens-unit) var(--utils-tokens-unit) 0;margin-right:auto;max-width:90%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._message_1xlna_1[data-type=minimal]{background-color:transparent;box-shadow:none;margin:var(--scale-8) 0 0 0;padding:0}._message_1xlna_1[data-type=user]{background-color:var(--colors-semantic-primary-primary-subtle);border-radius:var(--utils-tokens-unit) 0 0 var(--utils-tokens-unit);margin-left:auto;max-width:90%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._message_1xlna_1[data-type=system]{background-color:var(--colors-semantic-bg-overlay);border-radius:var(--shape-border-radius-radius-md);color:var(--colors-semantic-content-secondary)}._message_1xlna_1[data-type=system] [data-component=icon]{float:left}._preview_1xlna_44{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
|
package/dist/assets/index45.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
label span{display:block}._textarea_1qef6_5{field-sizing:content;font-size:var(--typography-font-sizes-body-md);height:auto;min-height:calc((var(--min-rows) * var(--utils-tokens-unit) * 1.25) + (2 * var(--utils-tokens-unit)));max-height:calc((var(--max-rows) * var(--utils-tokens-unit) * 1.25) + (2 * var(--utils-tokens-unit)));overflow-y:auto;resize:none;transition:height var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%;word-break:break-word}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),p=require("../badge/index.cjs"),g=require("../checkbox/index.cjs"),u=require("../figure/index.cjs"),x=require("../icon/index.cjs"),j="_card_1sfar_1",q="_head_1sfar_27",y="_center_1sfar_40",h="_content_1sfar_52",N="_margin_1sfar_58",b="_clickable_1sfar_94",T="_selected_1sfar_131",t={card:j,head:q,center:y,content:h,margin:N,clickable:b,"image-top":"_image-top_1sfar_109","image-left":"_image-left_1sfar_120",selected:T},k=({actions:f,badge:d,checkbox:s,children:_,header:o,icon:m,image:r,imagePosition:c="top",onClick:a,variant:i="default"})=>e.jsxs("article",{className:l.t(t.card,a&&t.clickable,(s==null?void 0:s.checked)&&t.selected),"data-minimal":i==="minimal",onClick:a,onKeyDown:n=>{a&&n.currentTarget===document.activeElement&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),n.currentTarget.click())},tabIndex:a?0:-1,"data-component":"card",children:[r&&i!=="minimal"&&c==="top"&&e.jsx(u.Figure,{className:t[`image-${c}`],children:r}),e.jsxs("section",{children:[e.jsxs("div",{className:l.t(t.head,i==="minimal"&&t.center),children:[s&&e.jsx("span",{onClick:n=>n.stopPropagation(),children:e.jsx(g.Checkbox,{...s})}),r&&i!=="minimal"&&c==="left"&&e.jsx(u.Figure,{className:t[`image-${c}`],children:r}),o,d&&e.jsx(p.Badge,{...d}),m&&e.jsx(x.Icon,{name:m,size:"medium"}),f]}),_&&e.jsx("div",{className:l.t(t.content,!!o&&t.margin),children:_})]})]});exports.Card=k;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\ntype BaseCardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\ntype DefaultCardProps = BaseCardProps & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left'
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\ntype BaseCardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\ntype DefaultCardProps = BaseCardProps & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left';\n variant?: 'default';\n};\n\ntype MinimalCardProps = BaseCardProps & {\n children?: never;\n header: React.ReactNode;\n image?: never;\n imagePosition?: never;\n variant: 'minimal';\n};\n\nexport type CardProps = DefaultCardProps | MinimalCardProps;\n\nexport const Card = ({\n actions,\n badge,\n checkbox,\n children,\n header,\n icon,\n image,\n imagePosition = 'top',\n onClick,\n variant = 'default',\n}: CardProps) => {\n return (\n <article\n className={cx(styles.card, onClick && styles.clickable, checkbox?.checked && styles.selected)}\n data-minimal={variant === 'minimal'}\n onClick={onClick}\n onKeyDown={(e) => {\n if (!onClick) return;\n\n if (e.currentTarget !== document.activeElement) {\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.currentTarget.click();\n }\n }}\n tabIndex={onClick ? 0 : -1}\n >\n {image && variant !== 'minimal' && imagePosition === 'top' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n <section>\n <div className={cx(styles.head, variant === 'minimal' && styles.center)}>\n {checkbox && (\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox {...checkbox} />\n </span>\n )}\n {image && variant !== 'minimal' && imagePosition === 'left' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n {header}\n {badge && <Badge {...badge} />}\n {icon && (\n <Icon\n name={icon}\n size='medium'\n />\n )}\n {actions}\n </div>\n {children && (\n <div className={cx(styles.content, !!header && styles.margin)}>{children}</div>\n )}\n </section>\n </article>\n );\n};\n"],"names":["Card","actions","badge","checkbox","children","header","icon","image","imagePosition","onClick","variant","cx","styles","card","clickable","checked","selected","e","currentTarget","document","activeElement","key","preventDefault","click","jsx","Figure","jsxs","head","center","stopPropagation","Checkbox","Badge","Icon","content","margin"],"mappings":"kkBAoCaA,EAAOA,CAAC,CACnBC,QAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,cAAAA,EAAgB,MAChBC,QAAAA,EACAC,QAAAA,EAAU,SACD,WAEN,UAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,KAAMJ,GAAWG,EAAOE,WAAWX,GAAAA,YAAAA,EAAUY,UAAWH,EAAOI,QAAQ,EAC5F,eAAcN,IAAY,UAC1B,QAAAD,EACA,UAAYQ,GAAM,CACXR,GAEDQ,EAAEC,gBAAkBC,SAASC,gBAI7BH,EAAEI,MAAQ,SAAWJ,EAAEI,MAAQ,OACjCJ,EAAEK,eAAAA,EACFL,EAAEC,cAAcK,MAAAA,EAEpB,EACA,SAAUd,EAAU,EAAI,GAAG,iBAAA,OAE1BF,SAAAA,CAAAA,GAASG,IAAY,WAAaF,IAAkB,OACnDgB,EAAAA,IAACC,SAAA,CAAO,UAAWb,EAAO,SAASJ,CAAa,EAAE,EAAID,SAAAA,EAAM,SAE7D,UAAA,CACC,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWf,EAAAA,EAAGC,EAAOe,KAAMjB,IAAY,WAAaE,EAAOgB,MAAM,EACnEzB,SAAAA,CAAAA,GACCqB,EAAAA,IAAC,OAAA,CAAK,QAAUP,GAAMA,EAAEY,gBAAAA,EACtB,SAAAL,EAAAA,IAACM,EAAAA,SAAA,CAAS,GAAI3B,CAAAA,CAAS,EACzB,EAEDI,GAASG,IAAY,WAAaF,IAAkB,QACnDgB,EAAAA,IAACC,SAAA,CAAO,UAAWb,EAAO,SAASJ,CAAa,EAAE,EAAID,SAAAA,EAAM,EAE7DF,EACAH,GAASsB,EAAAA,IAACO,EAAAA,MAAA,CAAM,GAAI7B,CAAAA,CAAM,EAC1BI,GACCkB,EAAAA,IAACQ,OAAA,CACC,KAAM1B,EACN,KAAK,SAAQ,EAGhBL,CAAAA,EACH,EACCG,GACCoB,EAAAA,IAAC,MAAA,CAAI,UAAWb,EAAAA,EAAGC,EAAOqB,QAAS,CAAC,CAAC5B,GAAUO,EAAOsB,MAAM,EAAI9B,SAAAA,CAAAA,CAAS,CAAA,CAAA,CAE7E,CAAA,EACF"}
|
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { t as
|
|
3
|
-
import { Badge as
|
|
4
|
-
import { Checkbox as
|
|
5
|
-
import { Figure as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import '../../assets/index16.css';const
|
|
8
|
-
card:
|
|
9
|
-
head:
|
|
10
|
-
center:
|
|
11
|
-
content:
|
|
12
|
-
margin:
|
|
13
|
-
clickable:
|
|
14
|
-
"image-top": "_image-
|
|
15
|
-
"image-left": "_image-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
actions: p,
|
|
21
|
-
badge: _,
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { t as i } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { Badge as g } from "../badge/index.js";
|
|
4
|
+
import { Checkbox as N } from "../checkbox/index.js";
|
|
5
|
+
import { Figure as p } from "../figure/index.js";
|
|
6
|
+
import { Icon as h } from "../icon/index.js";
|
|
7
|
+
import '../../assets/index16.css';const y = "_card_1sfar_1", j = "_head_1sfar_27", D = "_center_1sfar_40", E = "_content_1sfar_52", I = "_margin_1sfar_58", T = "_clickable_1sfar_94", $ = "_selected_1sfar_131", e = {
|
|
8
|
+
card: y,
|
|
9
|
+
head: j,
|
|
10
|
+
center: D,
|
|
11
|
+
content: E,
|
|
12
|
+
margin: I,
|
|
13
|
+
clickable: T,
|
|
14
|
+
"image-top": "_image-top_1sfar_109",
|
|
15
|
+
"image-left": "_image-left_1sfar_120",
|
|
16
|
+
selected: $
|
|
17
|
+
}, K = ({
|
|
18
|
+
actions: u,
|
|
19
|
+
badge: d,
|
|
22
20
|
checkbox: a,
|
|
23
|
-
children:
|
|
21
|
+
children: _,
|
|
24
22
|
header: o,
|
|
25
|
-
icon:
|
|
26
|
-
image:
|
|
27
|
-
imagePosition:
|
|
28
|
-
onClick:
|
|
29
|
-
variant:
|
|
30
|
-
}) => /* @__PURE__ */
|
|
31
|
-
|
|
32
|
-
}, tabIndex:
|
|
33
|
-
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
a && /* @__PURE__ */ r("span", { onClick: (
|
|
23
|
+
icon: f,
|
|
24
|
+
image: n,
|
|
25
|
+
imagePosition: c = "top",
|
|
26
|
+
onClick: s,
|
|
27
|
+
variant: m = "default"
|
|
28
|
+
}) => /* @__PURE__ */ l("article", { className: i(e.card, s && e.clickable, (a == null ? void 0 : a.checked) && e.selected), "data-minimal": m === "minimal", onClick: s, onKeyDown: (t) => {
|
|
29
|
+
s && t.currentTarget === document.activeElement && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
|
|
30
|
+
}, tabIndex: s ? 0 : -1, "data-component": "card", children: [
|
|
31
|
+
n && m !== "minimal" && c === "top" && /* @__PURE__ */ r(p, { className: e[`image-${c}`], children: n }),
|
|
32
|
+
/* @__PURE__ */ l("section", { children: [
|
|
33
|
+
/* @__PURE__ */ l("div", { className: i(e.head, m === "minimal" && e.center), children: [
|
|
34
|
+
a && /* @__PURE__ */ r("span", { onClick: (t) => t.stopPropagation(), children: /* @__PURE__ */ r(N, { ...a }) }),
|
|
35
|
+
n && m !== "minimal" && c === "left" && /* @__PURE__ */ r(p, { className: e[`image-${c}`], children: n }),
|
|
37
36
|
o,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
d && /* @__PURE__ */ r(g, { ...d }),
|
|
38
|
+
f && /* @__PURE__ */ r(h, { name: f, size: "medium" }),
|
|
39
|
+
u
|
|
41
40
|
] }),
|
|
42
|
-
|
|
41
|
+
_ && /* @__PURE__ */ r("div", { className: i(e.content, !!o && e.margin), children: _ })
|
|
43
42
|
] })
|
|
44
43
|
] });
|
|
45
44
|
export {
|
|
46
|
-
|
|
45
|
+
K as Card
|
|
47
46
|
};
|
|
48
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\ntype BaseCardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\ntype DefaultCardProps = BaseCardProps & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left'
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\ntype BaseCardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\ntype DefaultCardProps = BaseCardProps & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left';\n variant?: 'default';\n};\n\ntype MinimalCardProps = BaseCardProps & {\n children?: never;\n header: React.ReactNode;\n image?: never;\n imagePosition?: never;\n variant: 'minimal';\n};\n\nexport type CardProps = DefaultCardProps | MinimalCardProps;\n\nexport const Card = ({\n actions,\n badge,\n checkbox,\n children,\n header,\n icon,\n image,\n imagePosition = 'top',\n onClick,\n variant = 'default',\n}: CardProps) => {\n return (\n <article\n className={cx(styles.card, onClick && styles.clickable, checkbox?.checked && styles.selected)}\n data-minimal={variant === 'minimal'}\n onClick={onClick}\n onKeyDown={(e) => {\n if (!onClick) return;\n\n if (e.currentTarget !== document.activeElement) {\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.currentTarget.click();\n }\n }}\n tabIndex={onClick ? 0 : -1}\n >\n {image && variant !== 'minimal' && imagePosition === 'top' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n <section>\n <div className={cx(styles.head, variant === 'minimal' && styles.center)}>\n {checkbox && (\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox {...checkbox} />\n </span>\n )}\n {image && variant !== 'minimal' && imagePosition === 'left' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n {header}\n {badge && <Badge {...badge} />}\n {icon && (\n <Icon\n name={icon}\n size='medium'\n />\n )}\n {actions}\n </div>\n {children && (\n <div className={cx(styles.content, !!header && styles.margin)}>{children}</div>\n )}\n </section>\n </article>\n );\n};\n"],"names":["Card","actions","badge","checkbox","children","header","icon","image","imagePosition","onClick","variant","cx","styles","card","clickable","checked","selected","e","currentTarget","document","activeElement","key","preventDefault","click","jsx","Figure","jsxs","head","center","stopPropagation","Checkbox","Badge","Icon","content","margin"],"mappings":";;;;;;;;;;;;;;;;GAoCaA,IAAOA,CAAC;AAAA,EACnBC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA;AAAAA,EACAC,SAAAA,IAAU;AACD,wBAEN,WAAA,EACC,WAAWC,EAAGC,EAAOC,MAAMJ,KAAWG,EAAOE,YAAWX,KAAAA,gBAAAA,EAAUY,YAAWH,EAAOI,QAAQ,GAC5F,gBAAcN,MAAY,WAC1B,SAAAD,GACA,WAAYQ,CAAAA,MAAM;AAChB,EAAKR,KAEDQ,EAAEC,kBAAkBC,SAASC,kBAI7BH,EAAEI,QAAQ,WAAWJ,EAAEI,QAAQ,SACjCJ,EAAEK,eAAAA,GACFL,EAAEC,cAAcK,MAAAA;AAEpB,GACA,UAAUd,IAAU,IAAI,IAAG,kBAAA,QAE1BF,UAAAA;AAAAA,EAAAA,KAASG,MAAY,aAAaF,MAAkB,SACnD,gBAAAgB,EAACC,GAAA,EAAO,WAAWb,EAAO,SAASJ,CAAa,EAAE,GAAID,UAAAA,GAAM;AAAA,oBAE7D,WAAA,EACC,UAAA;AAAA,IAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWf,EAAGC,EAAOe,MAAMjB,MAAY,aAAaE,EAAOgB,MAAM,GACnEzB,UAAAA;AAAAA,MAAAA,KACC,gBAAAqB,EAAC,QAAA,EAAK,SAAUP,CAAAA,MAAMA,EAAEY,gBAAAA,GACtB,UAAA,gBAAAL,EAACM,GAAA,EAAS,GAAI3B,EAAAA,CAAS,GACzB;AAAA,MAEDI,KAASG,MAAY,aAAaF,MAAkB,UACnD,gBAAAgB,EAACC,GAAA,EAAO,WAAWb,EAAO,SAASJ,CAAa,EAAE,GAAID,UAAAA,GAAM;AAAA,MAE7DF;AAAAA,MACAH,KAAS,gBAAAsB,EAACO,GAAA,EAAM,GAAI7B,EAAAA,CAAM;AAAA,MAC1BI,KACC,gBAAAkB,EAACQ,GAAA,EACC,MAAM1B,GACN,MAAK,UAAQ;AAAA,MAGhBL;AAAAA,IAAAA,GACH;AAAA,IACCG,KACC,gBAAAoB,EAAC,OAAA,EAAI,WAAWb,EAAGC,EAAOqB,SAAS,CAAC,CAAC5B,KAAUO,EAAOsB,MAAM,GAAI9B,UAAAA,EAAAA,CAAS;AAAA,EAAA,EAAA,CAE7E;AAAA,GACF;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const r=require("react/jsx-runtime"),s=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const r=require("react/jsx-runtime"),s=require("../../icons-Ckl56kYF.cjs"),n=require("../../utils-DBzf7CFq.cjs"),i="_collapsible_7flaz_1",a={collapsible:i},p=({children:c,disabled:o,label:e})=>{const l=n.resolveColor("--color-primary"),t=o?void 0:{"--icon-svg":s.iconSVG("chevron").replace("currentColor",l),"--icon-svg-open":s.iconSVG("chevron").replace("%3Cpath","%3Cpath transform='rotate(180 12 12)'").replace("currentColor",l)};return r.jsxs("details",{className:a.collapsible,open:o||void 0,"data-component":"collapsible",children:[r.jsx("summary",{style:t,children:e&&e}),c]})};exports.Collapsible=p;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { i as e } from "../../icons-
|
|
2
|
+
import { i as e } from "../../icons-w0wnkdpo.js";
|
|
3
3
|
import { r as n } from "../../utils--n2yqjCy.js";
|
|
4
4
|
import '../../assets/index17.css';const i = "_collapsible_7flaz_1", p = {
|
|
5
5
|
collapsible: i
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-Ckl56kYF.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-CitJm17A.cjs"),Z=require("../list/index.cjs"),k=require("../../index-C9DOzjKO.cjs"),M=require("../../utils-DBzf7CFq.cjs"),ee="_dropdown_1dsxx_1",te="_empty_1dsxx_4",ne="_group_1dsxx_5",re="_placeholder_1dsxx_6",se="_filter_1dsxx_14",oe="_native_1dsxx_25",le="_option_1dsxx_35",ie="_options_1dsxx_57",ce="_panel_1dsxx_81",ae="_selected_1dsxx_104",ue="_text_1dsxx_108",de="_trigger_1dsxx_117",pe="_minimal_1dsxx_133",c={dropdown:ee,empty:te,group:ne,placeholder:re,filter:se,native:oe,option:le,options:ie,panel:ce,selected:ae,text:ue,trigger:de,minimal:pe};function Q(e,r){return{"--icon-svg":U.iconSVG(e).replace("currentColor",r)}}function N(e){return typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(N).join(" "):o.isValidElement(e)?N(e.props.children):""}function fe(e){return o.isValidElement(e)&&e.type==="option"}function me(e){return o.isValidElement(e)&&e.type==="optgroup"}function xe(e){return o.isValidElement(e)&&e.type===o.Fragment}function he(e){return o.isValidElement(e)&&e.type===k.Select}function V(e,r,s=!1){const l=[];return o.Children.forEach(e,t=>{if(xe(t)){l.push(...V(t.props.children,r,s));return}if(fe(t)){const d=N(t.props.children).trim(),p=t.props.value!=null?String(t.props.value):d;l.push({disabled:s||!!t.props.disabled,groupLabel:r,hidden:!!t.props.hidden,isPlaceholder:!!(t.props.hidden&&p===""),label:t.props.children,selected:!!t.props.selected,text:d,value:p});return}me(t)&&l.push(...V(t.props.children,t.props.label,s||!!t.props.disabled))}),l}function _e(e){const r=e.trim();if(!r)return null;const l=[.../[*?]/.test(r)?r:`*${r}*`].map(t=>t==="*"?".*":t==="?"?".":t.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${l}$`,"i")}function ge(e,r){const s=_e(r),l=e.filter(t=>!t.hidden&&!t.isPlaceholder);return s?l.filter(t=>s.test([t.groupLabel,t.text,t.value].filter(Boolean).join(" "))):l}function ve(e,r){return e.find(s=>s.value===r)??e.find(s=>s.isPlaceholder)??e[0]}function ye(e,r,s){var t;if(r!=null)return String(r);if(s!=null)return String(s);const l=e.find(d=>d.selected);return l?l.value:((t=e[0])==null?void 0:t.value)??""}function be(e){if(he(e)){const{children:r,placeholder:s,...l}=e.props;return{children:i.jsxs(i.Fragment,{children:[s&&i.jsx("option",{hidden:!0,value:"",children:s}),r]}),props:l}}return{children:e.props.children,props:e.props}}const we=({children:e,className:r,emptyLabel:s="No matches found",searchPlaceholder:l="Filter",variant:t="default",...d})=>{const p=be(e),{defaultValue:z,onChange:_,value:g,...T}=p.props,q=k.sanitizeSelectProps(T),C=o.useRef(null),R=o.useRef(null),O=o.useRef(null),P=o.useRef(null),x=V(p.children),h=g!=null,v=ye(x,g,z),[y,b]=o.useState(()=>v),[u,w]=o.useState(!1),[B,$]=o.useState(""),S=h?String(g):y,I={default:M.resolveColor("--colors-semantic-content-secondary"),white:M.resolveColor("--color-white","white")},L=t==="minimal"?I.white:I.default,f=ve(x,S),A=Q("chevron",L),G=Q("search",L),D=ge(x,B);o.useEffect(()=>{!h&&!x.some(n=>n.value===y)&&b(v)},[v,y,h,x]),o.useEffect(()=>{var n;if(!u){$("");return}(n=P.current)==null||n.focus()},[u]),o.useEffect(()=>{if(!u)return;const n=a=>{var m;(m=R.current)!=null&&m.contains(a.target)||w(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[u]);const K=n=>{h||b(n.target.value),_==null||_(n)},j=()=>{var n;w(!1),(n=C.current)==null||n.focus()},H=n=>{var F;h||b(n);const a=O.current;if(!a){j();return}const m=(F=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:F.set;m==null||m.call(a,n),a.dispatchEvent(new Event("change",{bubbles:!0})),j()},J=n=>{n.key==="Escape"&&j()};return i.jsxs("div",{className:E.t(c.dropdown,t==="minimal"&&c.minimal,r),onKeyDown:J,ref:R,...d,"data-component":"dropdown",children:[i.jsx("select",{...q,"aria-hidden":"true",className:c.native,onChange:K,ref:O,tabIndex:-1,value:S,children:p.children}),i.jsx(W.Button,{"aria-expanded":u,"aria-haspopup":"dialog",className:E.t(t==="default"&&Y.inputStyles.input,c.trigger,(f==null?void 0:f.isPlaceholder)&&c.placeholder),"data-open":u?"true":void 0,disabled:q.disabled,onClick:()=>w(n=>!n),ref:C,style:A,variant:"minimal",children:i.jsx("span",{className:c.text,children:(f==null?void 0:f.label)??"Select an option"})}),u&&i.jsxs("div",{className:c.panel,children:[i.jsx(X.Input,{"aria-label":"Filter",className:c.filter,icon:"search",onChange:n=>$(n.target.value),placeholder:l,ref:P,style:G,type:"search",value:B}),i.jsx(Z.List,{"aria-label":"Dropdown",className:c.options,children:D.length>0?D.map(n=>{const a=n.value===S;return i.jsx("li",{"data-component":"dropdown",children:i.jsxs(W.Button,{"aria-label":a?`${n.text}, selected`:n.text,className:E.t(c.option,a&&c.selected),disabled:n.disabled,onClick:()=>H(n.value),variant:"minimal",children:[i.jsx("span",{className:c.text,children:n.label}),n.groupLabel&&i.jsx("small",{className:c.group,children:n.groupLabel})]})},`${n.groupLabel??"root"}-${n.value}`)}):i.jsx("li",{className:c.empty,children:s})})]})]})};exports.Dropdown=we;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,11 +2,11 @@ import { jsxs as _, jsx as i, Fragment as Z } from "react/jsx-runtime";
|
|
|
2
2
|
import { t as V } from "../../classix-DG18itHa.js";
|
|
3
3
|
import ee, { useRef as g, useState as O, useEffect as P, Children as te, isValidElement as x } from "react";
|
|
4
4
|
import { Button as A } from "../button/index.js";
|
|
5
|
-
import { i as ne } from "../../icons-
|
|
5
|
+
import { i as ne } from "../../icons-w0wnkdpo.js";
|
|
6
6
|
import { Input as re } from "../input/index.js";
|
|
7
7
|
import { i as oe } from "../../styles.module-Ioe0wPWW.js";
|
|
8
8
|
import { List as se } from "../list/index.js";
|
|
9
|
-
import { s as le, S as ie } from "../../index-
|
|
9
|
+
import { s as le, S as ie } from "../../index-DvABhnD0.js";
|
|
10
10
|
import { r as G } from "../../utils--n2yqjCy.js";
|
|
11
11
|
import '../../assets/index19.css';const ae = "_dropdown_1dsxx_1", ce = "_empty_1dsxx_4", pe = "_group_1dsxx_5", ue = "_placeholder_1dsxx_6", de = "_filter_1dsxx_14", fe = "_native_1dsxx_25", me = "_option_1dsxx_35", he = "_options_1dsxx_57", xe = "_panel_1dsxx_81", ge = "_selected_1dsxx_104", _e = "_text_1dsxx_108", ve = "_trigger_1dsxx_117", ye = "_minimal_1dsxx_133", l = {
|
|
12
12
|
dropdown: ae,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const y=require("react/jsx-runtime"),T=require("../../classix-5H4IWnMA.cjs"),o=require("react"),A=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const y=require("react/jsx-runtime"),T=require("../../classix-5H4IWnMA.cjs"),o=require("react"),A=require("../../icons-Ckl56kYF.cjs"),H=require("../list/index.cjs"),M="_sortable_c1ptl_5",V="_dragging_c1ptl_35",z="_dropping_c1ptl_50",B="_columns_c1ptl_63",N="_pseudo_c1ptl_73",c={sortable:M,dragging:V,dropping:z,columns:B,pseudo:N,"target-above":"_target-above_c1ptl_88","target-below":"_target-below_c1ptl_89"};function k({children:h,className:I,columns:g=1,isRearranging:d=!1,onChangeOrder:f,...b}){const x=Number.isFinite(g)?Math.max(1,Math.floor(g)):1,v=o.useMemo(()=>o.Children.toArray(h),[h]),n=o.useRef(-1),[p,q]=o.useState({height:0,width:0}),[a,m]=o.useState(null),[E,S]=o.useState(null),$={...b.style,"--icon-svg":A.iconSVG("sort",!0),"--height":`calc(${p.height}px - var(--scale-16))`,"--width":x>1?`calc(${p.width}px - var(--scale-16))`:`${p.width}px`},w=()=>{n.current=-1,m(null)};return o.useEffect(()=>{d||S(null)},[d]),y.jsx(H.List,{className:T.t(I,c.sortable,x>1&&c.columns),columns:g,ordered:!0,style:$,...b,"data-component":"sortable",children:v.map((_,t)=>{const j=o.isValidElement(_)?_.key:null;return y.jsx("li",{className:T.t(a!==null&&a>t-10&&a<t+10&&c.pseudo,a===t&&n.current<t&&c["target-below"],a===t&&n.current>t&&c["target-above"],n.current===t&&c.dragging,E===t&&d&&c.dropping),draggable:!d,onDragEnd:()=>w(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const r=n.current;if(r<0||r===t)return;const s=e.currentTarget.getBoundingClientRect(),l=t===r+1?p.height:s.height,u=e.clientY>s.top+l/2?t+1:t,i=u>r?u-1:u;m(i)},onDragStart:e=>{n.current=t,q({height:e.currentTarget.offsetHeight,width:e.currentTarget.offsetWidth}),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move",m(t)},onDrop:e=>{e.preventDefault();const r=n.current,s=a;if(r<0||s===null||r===s)return;S(s);const l=v.slice(),[D]=l.splice(r,1);l.splice(s,0,D),f==null||f(l.map((u,i)=>({id:String(o.isValidElement(u)?u.props["data-id"]??`idx-${i}`:`idx-${i}`),weight:l.length-1-i}))),w()},"data-component":"sortable",children:_},j??t)})})}exports.Sortable=k;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as I } from "react/jsx-runtime";
|
|
2
2
|
import { t as T } from "../../classix-DG18itHa.js";
|
|
3
3
|
import _, { useMemo as z, useRef as B, useState as h, useEffect as M } from "react";
|
|
4
|
-
import { i as N } from "../../icons-
|
|
4
|
+
import { i as N } from "../../icons-w0wnkdpo.js";
|
|
5
5
|
import { List as k } from "../list/index.js";
|
|
6
6
|
import '../../assets/index25.css';const j = "_sortable_c1ptl_5", F = "_dragging_c1ptl_35", G = "_dropping_c1ptl_50", L = "_columns_c1ptl_63", W = "_pseudo_c1ptl_73", s = {
|
|
7
7
|
sortable: j,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index33.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index33.css');const a=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),c=require("../icon/index.cjs"),d="_button_18vba_1",_="_danger_18vba_23",b="_minimal_18vba_36",p="_primary_18vba_43",t={button:d,danger:_,minimal:b,primary:p},f={danger:t.danger,default:t.default,minimal:t.minimal,primary:t.primary};function g({children:i,className:r,disabled:o=!1,icon:e,onClick:s,ref:m,variant:n="default",...u}){return a.jsxs("button",{className:l.t(t.button,f[n],r),disabled:o,onClick:s,ref:m,type:"button",...u,"data-component":"button",children:[e&&a.jsx(c.Icon,{fill:!0,gap:"right",name:e,size:"small",variant:n==="minimal"||n==="default"?"default":"white"}),i]})}exports.Button=g;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n danger: styles.danger,\n default: styles.default,\n minimal: styles.minimal,\n primary: styles.primary,\n};\n\nexport type ButtonProps = React.ComponentPropsWithRef<'button'> & {\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n variant?: keyof typeof variants;\n};\n\nexport function Button({\n children,\n className,\n disabled = false,\n icon,\n onClick,\n ref,\n variant = 'default',\n ...props\n}: ButtonProps) {\n return (\n <button\n className={cx(styles.button, variants[variant], className)}\n disabled={disabled}\n onClick={onClick}\n ref={ref}\n type='button'\n {...props}\n >\n {icon && (\n <Icon\n gap='right'\n name={icon}\n size='small'\n variant={variant === 'minimal' || variant === 'default' ? 'default' : 'white'}\n />\n )}\n {children}\n </button>\n );\n}\n"],"names":["variants","danger","styles","default","minimal","primary","Button","children","className","disabled","icon","onClick","ref","variant","props","cx","button","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n danger: styles.danger,\n default: styles.default,\n minimal: styles.minimal,\n primary: styles.primary,\n};\n\nexport type ButtonProps = React.ComponentPropsWithRef<'button'> & {\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n variant?: keyof typeof variants;\n};\n\nexport function Button({\n children,\n className,\n disabled = false,\n icon,\n onClick,\n ref,\n variant = 'default',\n ...props\n}: ButtonProps) {\n return (\n <button\n className={cx(styles.button, variants[variant], className)}\n disabled={disabled}\n onClick={onClick}\n ref={ref}\n type='button'\n {...props}\n >\n {icon && (\n <Icon\n fill\n gap='right'\n name={icon}\n size='small'\n variant={variant === 'minimal' || variant === 'default' ? 'default' : 'white'}\n />\n )}\n {children}\n </button>\n );\n}\n"],"names":["variants","danger","styles","default","minimal","primary","Button","children","className","disabled","icon","onClick","ref","variant","props","cx","button","Icon"],"mappings":"2TAMMA,EAAW,CACfC,OAAQC,EAAOD,OACfE,QAASD,EAAOC,QAChBC,QAASF,EAAOE,QAChBC,QAASH,EAAOG,OAClB,EAWO,SAASC,EAAO,CACrBC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EAAW,GACXC,KAAAA,EACAC,QAAAA,EACAC,IAAAA,EACAC,QAAAA,EAAU,UACV,GAAGC,CACQ,EAAG,CACd,cACG,SAAA,CACC,UAAWC,EAAAA,EAAGb,EAAOc,OAAQhB,EAASa,CAAO,EAAGL,CAAS,EACzD,SAAAC,EACA,QAAAE,EACA,IAAAC,EACA,KAAK,SACL,GAAIE,EAAM,iBAAA,SAETJ,SAAAA,CAAAA,SACEO,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMP,EACN,KAAK,QACL,QAASG,IAAY,WAAaA,IAAY,UAAY,UAAY,QAAQ,EAGjFN,CAAAA,EACH,CAEJ"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs as s, jsx as u } from "react/jsx-runtime";
|
|
2
2
|
import { t as d } from "../../classix-DG18itHa.js";
|
|
3
3
|
import { Icon as p } from "../icon/index.js";
|
|
4
|
-
import '../../assets/index33.css';const _ = "_button_18vba_1", b = "_danger_18vba_23",
|
|
4
|
+
import '../../assets/index33.css';const _ = "_button_18vba_1", b = "_danger_18vba_23", f = "_minimal_18vba_36", c = "_primary_18vba_43", t = {
|
|
5
5
|
button: _,
|
|
6
6
|
danger: b,
|
|
7
|
-
minimal:
|
|
8
|
-
primary:
|
|
7
|
+
minimal: f,
|
|
8
|
+
primary: c
|
|
9
9
|
}, g = {
|
|
10
10
|
danger: t.danger,
|
|
11
11
|
default: t.default,
|
|
@@ -23,7 +23,7 @@ function x({
|
|
|
23
23
|
...l
|
|
24
24
|
}) {
|
|
25
25
|
return /* @__PURE__ */ s("button", { className: d(t.button, g[a], r), disabled: i, onClick: o, ref: e, type: "button", ...l, "data-component": "button", children: [
|
|
26
|
-
n && /* @__PURE__ */ u(p, { gap: "right", name: n, size: "small", variant: a === "minimal" || a === "default" ? "default" : "white" }),
|
|
26
|
+
n && /* @__PURE__ */ u(p, { fill: !0, gap: "right", name: n, size: "small", variant: a === "minimal" || a === "default" ? "default" : "white" }),
|
|
27
27
|
m
|
|
28
28
|
] });
|
|
29
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n danger: styles.danger,\n default: styles.default,\n minimal: styles.minimal,\n primary: styles.primary,\n};\n\nexport type ButtonProps = React.ComponentPropsWithRef<'button'> & {\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n variant?: keyof typeof variants;\n};\n\nexport function Button({\n children,\n className,\n disabled = false,\n icon,\n onClick,\n ref,\n variant = 'default',\n ...props\n}: ButtonProps) {\n return (\n <button\n className={cx(styles.button, variants[variant], className)}\n disabled={disabled}\n onClick={onClick}\n ref={ref}\n type='button'\n {...props}\n >\n {icon && (\n <Icon\n gap='right'\n name={icon}\n size='small'\n variant={variant === 'minimal' || variant === 'default' ? 'default' : 'white'}\n />\n )}\n {children}\n </button>\n );\n}\n"],"names":["variants","danger","styles","default","minimal","primary","Button","children","className","disabled","icon","onClick","ref","variant","props","cx","button","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n danger: styles.danger,\n default: styles.default,\n minimal: styles.minimal,\n primary: styles.primary,\n};\n\nexport type ButtonProps = React.ComponentPropsWithRef<'button'> & {\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n icon?: IconName;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n variant?: keyof typeof variants;\n};\n\nexport function Button({\n children,\n className,\n disabled = false,\n icon,\n onClick,\n ref,\n variant = 'default',\n ...props\n}: ButtonProps) {\n return (\n <button\n className={cx(styles.button, variants[variant], className)}\n disabled={disabled}\n onClick={onClick}\n ref={ref}\n type='button'\n {...props}\n >\n {icon && (\n <Icon\n fill\n gap='right'\n name={icon}\n size='small'\n variant={variant === 'minimal' || variant === 'default' ? 'default' : 'white'}\n />\n )}\n {children}\n </button>\n );\n}\n"],"names":["variants","danger","styles","default","minimal","primary","Button","children","className","disabled","icon","onClick","ref","variant","props","cx","button","Icon"],"mappings":";;;;;;;;GAMMA,IAAW;AAAA,EACfC,QAAQC,EAAOD;AAAAA,EACfE,SAASD,EAAOC;AAAAA,EAChBC,SAASF,EAAOE;AAAAA,EAChBC,SAASH,EAAOG;AAClB;AAWO,SAASC,EAAO;AAAA,EACrBC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACV,GAAGC;AACQ,GAAG;AACd,2BACG,UAAA,EACC,WAAWC,EAAGb,EAAOc,QAAQhB,EAASa,CAAO,GAAGL,CAAS,GACzD,UAAAC,GACA,SAAAE,GACA,KAAAC,GACA,MAAK,UACL,GAAIE,GAAM,kBAAA,UAETJ,UAAAA;AAAAA,IAAAA,uBACEO,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMP,GACN,MAAK,SACL,SAASG,MAAY,aAAaA,MAAY,YAAY,YAAY,SAAQ;AAAA,IAGjFN;AAAAA,EAAAA,GACH;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const e=require("react/jsx-runtime"),x=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const e=require("react/jsx-runtime"),x=require("../../icons-Ckl56kYF.cjs"),b=require("../loading/index.cjs"),h="_checkbox_1e5vl_1",k={checkbox:h},l=({checked:s,disabled:t,isLoading:c,label:o,onChange:n,...i})=>{const r={"--icon-svg":x.iconSVG("check")};return e.jsxs("label",{className:k.checkbox,"data-component":"checkbox",children:[c&&e.jsx(b.Loading,{size:24,sticky:!0}),e.jsx("input",{checked:s,disabled:t||c,onChange:n,type:"checkbox",style:r,...i}),o&&o]})};exports.Checkbox=l;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { i as x } from "../../icons-
|
|
2
|
+
import { i as x } from "../../icons-w0wnkdpo.js";
|
|
3
3
|
import { Loading as k } from "../loading/index.js";
|
|
4
4
|
import '../../assets/index34.css';const b = "_checkbox_1e5vl_1", m = {
|
|
5
5
|
checkbox: b
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const n=require("react/jsx-runtime"),r=require("../icon/index.cjs"),c="_chip_1nmzv_1",o={chip:c},p=({accessibleLabel:s,label:a,onClick:e,...i})=>n.jsxs("a",{"aria-label":s,className:o.chip,onClick:t=>{t.stopPropagation(),e==null||e(t)},tabIndex:0,...i,"data-component":"chip",children:[a,n.jsx(r.Icon,{name:"x",size:"small",variant:"primary"})]});exports.Chip=p;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type ChipProps = Omit<ComponentPropsWithoutRef<'span'>, 'onClick' | 'tabIndex'> & {\n accessibleLabel?: string;\n label: string;\n onClick: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n};\n\nexport const Chip = ({ accessibleLabel, label, onClick, ...props }: ChipProps) => {\n return (\n <a\n aria-label={accessibleLabel}\n className={styles.chip}\n onClick={(e) => {\n e.stopPropagation();\n onClick?.(e);\n }}\n tabIndex={0}\n {...props}\n >\n {label}\n <Icon\n name='x'\n size='small'\n variant='primary'\n />\n </a>\n );\n};\n"],"names":["Chip","accessibleLabel","label","onClick","props","jsxs","styles","chip","e","stopPropagation","Icon"],"mappings":"iLAWaA,EAAOA,CAAC,CAAEC,gBAAAA,EAAiBC,MAAAA,EAAOC,QAAAA,EAAS,GAAGC,CAAiB,IAExEC,OAAC,KACC,aAAYJ,EACZ,UAAWK,EAAOC,KAClB,QAAUC,GAAM,CACdA,EAAEC,gBAAAA,EACFN,GAAAA,MAAAA,EAAUK,EACZ,EACA,SAAU,EACV,GAAIJ,EAAM,iBAAA,OAETF,SAAAA,CAAAA,QACAQ,EAAAA,KAAA,CACC,KAAK,IACL,KAAK,QACL,QAAQ,SAAA,CAAS,CAAA,EAErB"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as m } from "../icon/index.js";
|
|
3
|
+
import '../../assets/index13.css';const n = "_chip_1nmzv_1", c = {
|
|
4
|
+
chip: n
|
|
5
|
+
}, x = ({
|
|
6
|
+
accessibleLabel: p,
|
|
7
|
+
label: r,
|
|
8
|
+
onClick: a,
|
|
9
|
+
...s
|
|
10
|
+
}) => /* @__PURE__ */ i("a", { "aria-label": p, className: c.chip, onClick: (t) => {
|
|
11
|
+
t.stopPropagation(), a == null || a(t);
|
|
12
|
+
}, tabIndex: 0, ...s, "data-component": "chip", children: [
|
|
13
|
+
r,
|
|
14
|
+
/* @__PURE__ */ o(m, { name: "x", size: "small", variant: "primary" })
|
|
15
|
+
] });
|
|
16
|
+
export {
|
|
17
|
+
x as Chip
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type ChipProps = Omit<ComponentPropsWithoutRef<'span'>, 'onClick' | 'tabIndex'> & {\n accessibleLabel?: string;\n label: string;\n onClick: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n};\n\nexport const Chip = ({ accessibleLabel, label, onClick, ...props }: ChipProps) => {\n return (\n <a\n aria-label={accessibleLabel}\n className={styles.chip}\n onClick={(e) => {\n e.stopPropagation();\n onClick?.(e);\n }}\n tabIndex={0}\n {...props}\n >\n {label}\n <Icon\n name='x'\n size='small'\n variant='primary'\n />\n </a>\n );\n};\n"],"names":["Chip","accessibleLabel","label","onClick","props","jsxs","styles","chip","e","stopPropagation","Icon"],"mappings":";;;;GAWaA,IAAOA,CAAC;AAAA,EAAEC,iBAAAA;AAAAA,EAAiBC,OAAAA;AAAAA,EAAOC,SAAAA;AAAAA,EAAS,GAAGC;AAAiB,MAExE,gBAAAC,EAAC,OACC,cAAYJ,GACZ,WAAWK,EAAOC,MAClB,SAAUC,CAAAA,MAAM;AACdA,EAAAA,EAAEC,gBAAAA,GACFN,KAAAA,QAAAA,EAAUK;AACZ,GACA,UAAU,GACV,GAAIJ,GAAM,kBAAA,QAETF,UAAAA;AAAAA,EAAAA;AAAAA,oBACAQ,GAAA,EACC,MAAK,KACL,MAAK,SACL,SAAQ,UAAA,CAAS;AAAA,GAErB;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const f=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),o=require("react"),p=require("../button/index.cjs"),x="_controls_1kztc_13",_="_fixed_1kztc_34",s={controls:x,default:"_default_1kztc_20",fixed:_},k={primary:3,danger:2,default:1,minimal:0},y={default:s.default,fixed:s.fixed},g=e=>k[e.props.variant??"default"],h=({children:e,className:l,variant:i="default",...u})=>{const r=o.Children.toArray(e),a=[],c=[];r.forEach(t=>{o.isValidElement(t)&&t.type===p.Button?a.push(t):c.push(t)});const d=a.map((t,n)=>({button:t,index:n,rank:g(t)})).sort((t,n)=>t.rank-n.rank||t.index-n.index).map(({button:t,index:n})=>o.cloneElement(t,{key:t.key??n}));return r.length===0?null:f.jsxs("div",{className:m.t(s.controls,y[i],l),...u,"data-component":"controls",children:[c,d]})};exports.Controls=h;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n default: 1,\n minimal: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n fixed: styles.fixed,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'default'];\n\nexport const Controls = ({ children, className, variant = 'default', ...props }: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n if (childArray.length === 0) {\n return null;\n }\n\n return (\n <div\n className={cx(styles.controls, variants[variant], className)}\n {...props}\n >\n {nonButtons}\n {sortedButtons}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","default","minimal","variants","styles","fixed","getButtonRank","button","props","variant","Controls","children","className","childArray","Children","toArray","buttons","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","map","index","rank","sort","a","b","cloneElement","key","length","jsxs","cx","controls"],"mappings":"+SAMMA,EAAqB,CACzBC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,QAAS,CACX,EAEMC,EAAW,CACfF,QAASG,EAAOH,QAChBI,MAAOD,EAAOC,KAChB,EAOMC,EAAiBC,GACrBT,EAAmBS,EAAOC,MAAMC,SAAW,SAAS,EAEzCC,EAAWA,CAAC,CAAEC,SAAAA,EAAUC,UAAAA,EAAWH,QAAAA,EAAU,UAAW,GAAGD,CAAqB,IAAM,CACjG,MAAMK,EAAaC,EAAAA,SAASC,QAAQJ,CAAQ,EACtCK,EAA6C,CAAA,EAC7CC,EAAgC,CAAA,EAEtCJ,EAAWK,QAASC,GAAU,CACxBC,EAAAA,eAA4BD,CAAK,GAAKA,EAAME,OAASC,EAAAA,OACvDN,EAAQO,KAAKJ,CAAK,EAElBF,EAAWM,KAAKJ,CAAK,CAEzB,CAAC,EAED,MAAMK,EAAgBR,EACnBS,IAAI,CAAClB,EAAQmB,KAAW,CAAEnB,OAAAA,EAAQmB,MAAAA,EAAOC,KAAMrB,EAAcC,CAAM,CAAA,EAAI,EACvEqB,KAAK,CAACC,EAAGC,IAAMD,EAAEF,KAAOG,EAAEH,MAAQE,EAAEH,MAAQI,EAAEJ,KAAK,EACnDD,IAAI,CAAC,CAAElB,OAAAA,EAAQmB,MAAAA,CAAAA,IACdK,EAAAA,aAAaxB,EAAQ,CACnByB,IAAKzB,EAAOyB,KAAON,CAAAA,CACpB,CACH,EAEF,OAAIb,EAAWoB,SAAW,EACjB,KAIPC,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAG/B,EAAOgC,SAAUjC,EAASM,CAAO,EAAGG,CAAS,EAC3D,GAAIJ,EAAM,iBAAA,WAETS,SAAAA,CAAAA,EACAO,CAAAA,EACH,CAEJ"}
|
|
@@ -1,24 +1,45 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import { jsxs as f } from "react/jsx-runtime";
|
|
2
|
+
import { t as m } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { Children as u, isValidElement as p, cloneElement as k } from "react";
|
|
4
|
+
import { Button as x } from "../button/index.js";
|
|
5
|
+
import '../../assets/index12.css';const _ = "_controls_1kztc_13", y = "_fixed_1kztc_34", r = {
|
|
6
|
+
controls: _,
|
|
7
|
+
default: "_default_1kztc_20",
|
|
8
|
+
fixed: y
|
|
9
|
+
}, h = {
|
|
10
|
+
primary: 3,
|
|
11
|
+
danger: 2,
|
|
12
|
+
default: 1,
|
|
13
|
+
minimal: 0
|
|
14
|
+
}, B = {
|
|
15
|
+
default: r.default,
|
|
16
|
+
fixed: r.fixed
|
|
17
|
+
}, g = (o) => h[o.props.variant ?? "default"], C = ({
|
|
18
|
+
children: o,
|
|
19
|
+
className: l,
|
|
20
|
+
variant: c = "default",
|
|
21
|
+
...i
|
|
22
|
+
}) => {
|
|
23
|
+
const e = u.toArray(o), s = [], a = [];
|
|
24
|
+
e.forEach((t) => {
|
|
25
|
+
p(t) && t.type === x ? s.push(t) : a.push(t);
|
|
26
|
+
});
|
|
27
|
+
const d = s.map((t, n) => ({
|
|
28
|
+
button: t,
|
|
29
|
+
index: n,
|
|
30
|
+
rank: g(t)
|
|
31
|
+
})).sort((t, n) => t.rank - n.rank || t.index - n.index).map(({
|
|
32
|
+
button: t,
|
|
33
|
+
index: n
|
|
34
|
+
}) => k(t, {
|
|
35
|
+
key: t.key ?? n
|
|
36
|
+
}));
|
|
37
|
+
return e.length === 0 ? null : /* @__PURE__ */ f("div", { className: m(r.controls, B[c], l), ...i, "data-component": "controls", children: [
|
|
38
|
+
a,
|
|
39
|
+
d
|
|
40
|
+
] });
|
|
41
|
+
};
|
|
21
42
|
export {
|
|
22
|
-
|
|
43
|
+
C as Controls
|
|
23
44
|
};
|
|
24
45
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n default: 1,\n minimal: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n fixed: styles.fixed,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'default'];\n\nexport const Controls = ({ children, className, variant = 'default', ...props }: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n if (childArray.length === 0) {\n return null;\n }\n\n return (\n <div\n className={cx(styles.controls, variants[variant], className)}\n {...props}\n >\n {nonButtons}\n {sortedButtons}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","default","minimal","variants","styles","fixed","getButtonRank","button","props","variant","Controls","children","className","childArray","Children","toArray","buttons","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","map","index","rank","sort","a","b","cloneElement","key","length","jsxs","cx","controls"],"mappings":";;;;;;;;GAMMA,IAAqB;AAAA,EACzBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,SAAS;AACX,GAEMC,IAAW;AAAA,EACfF,SAASG,EAAOH;AAAAA,EAChBI,OAAOD,EAAOC;AAChB,GAOMC,IAAgBA,CAACC,MACrBT,EAAmBS,EAAOC,MAAMC,WAAW,SAAS,GAEzCC,IAAWA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWH,SAAAA,IAAU;AAAA,EAAW,GAAGD;AAAqB,MAAM;AACjG,QAAMK,IAAaC,EAASC,QAAQJ,CAAQ,GACtCK,IAA6C,CAAA,GAC7CC,IAAgC,CAAA;AAEtCJ,EAAAA,EAAWK,QAASC,CAAAA,MAAU;AAC5B,IAAIC,EAA4BD,CAAK,KAAKA,EAAME,SAASC,IACvDN,EAAQO,KAAKJ,CAAK,IAElBF,EAAWM,KAAKJ,CAAK;AAAA,EAEzB,CAAC;AAED,QAAMK,IAAgBR,EACnBS,IAAI,CAAClB,GAAQmB,OAAW;AAAA,IAAEnB,QAAAA;AAAAA,IAAQmB,OAAAA;AAAAA,IAAOC,MAAMrB,EAAcC,CAAM;AAAA,EAAA,EAAI,EACvEqB,KAAK,CAACC,GAAGC,MAAMD,EAAEF,OAAOG,EAAEH,QAAQE,EAAEH,QAAQI,EAAEJ,KAAK,EACnDD,IAAI,CAAC;AAAA,IAAElB,QAAAA;AAAAA,IAAQmB,OAAAA;AAAAA,EAAAA,MACdK,EAAaxB,GAAQ;AAAA,IACnByB,KAAKzB,EAAOyB,OAAON;AAAAA,EAAAA,CACpB,CACH;AAEF,SAAIb,EAAWoB,WAAW,IACjB,OAIP,gBAAAC,EAAC,OAAA,EACC,WAAWC,EAAG/B,EAAOgC,UAAUjC,EAASM,CAAO,GAAGG,CAAS,GAC3D,GAAIJ,GAAM,kBAAA,YAETS,UAAAA;AAAAA,IAAAA;AAAAA,IACAO;AAAAA,EAAAA,GACH;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index37.css');const r=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),n=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index37.css');const r=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),n=require("../../icons-Ckl56kYF.cjs"),l="_icon_1uucz_1",_="_small_1uucz_9",m="_medium_1uucz_14",d="_large_1uucz_19",g="_danger_1uucz_24",p="_primary_1uucz_32",y="_white_1uucz_36",e={icon:l,small:_,medium:m,large:d,danger:g,default:"_default_1uucz_28",primary:p,white:y,"gap-right":"_gap-right_1uucz_40","gap-left":"_gap-left_1uucz_44"},z={large:e.large,medium:e.medium,small:e.small},f={danger:e.danger,default:e.default,primary:e.primary,white:e.white},h=({fill:a,gap:t="none",name:c,size:s="medium",variant:u="default"})=>{const i={maskImage:n.iconSVG(c,a??!1)};return r.jsx("span",{"aria-hidden":"true",className:o.t(t!=="none"&&e[`gap-${t}`],z[s],e.icon,f[u]),style:i,"data-component":"icon"})},w=()=>Object.keys(n.iconPaths);exports.Icon=h;exports.Icons=w;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { t as o } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { i as u, a as m } from "../../icons-
|
|
3
|
+
import { i as u, a as m } from "../../icons-w0wnkdpo.js";
|
|
4
4
|
import '../../assets/index37.css';const _ = "_icon_1uucz_1", l = "_small_1uucz_9", d = "_medium_1uucz_14", g = "_large_1uucz_19", p = "_danger_1uucz_24", f = "_primary_1uucz_32", z = "_white_1uucz_36", a = {
|
|
5
5
|
icon: _,
|
|
6
6
|
small: l,
|