@fctc/sme-widget-ui 1.2.2 → 1.2.3

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 (5) hide show
  1. package/dist/index.js +47 -10
  2. package/dist/index.mjs +47 -10
  3. package/dist/widgets.js +47 -10
  4. package/dist/widgets.mjs +47 -10
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -34654,25 +34654,62 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
34654
34654
  var StatusBarOptionField = (props) => {
34655
34655
  const { selection, defaultValue } = props;
34656
34656
  const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
34657
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
34657
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34658
34658
  const value = option?.[0] === defaultValue;
34659
34659
  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34660
34660
  "label",
34661
34661
  {
34662
- className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
34663
- ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
34664
- ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
34665
- ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
34666
- `,
34662
+ style: {
34663
+ position: "relative",
34664
+ flexShrink: 0,
34665
+ cursor: "default",
34666
+ paddingTop: "10px",
34667
+ paddingBottom: "10px",
34668
+ paddingLeft: "32px",
34669
+ // pl-8
34670
+ paddingRight: "20px",
34671
+ // pr-[20px]
34672
+ fontWeight: 600,
34673
+ // font-semibold
34674
+ fontSize: "12px",
34675
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34676
+ color: value ? "#fff" : "#121212",
34677
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34678
+ // rounded-l-xl
34679
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34680
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34681
+ // rounded-r-xl
34682
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34683
+ },
34667
34684
  children: [
34668
- /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
34685
+ /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34686
+ "input",
34687
+ {
34688
+ type: "radio",
34689
+ checked: value,
34690
+ style: { display: "none" },
34691
+ disabled: true
34692
+ }
34693
+ ),
34669
34694
  option[1],
34670
34695
  !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34671
34696
  "div",
34672
34697
  {
34673
- className: `absolute top-[50%] translate-y-[-50%] z-[2] w-[25.5px] h-[25.5px] transform rotate-45
34674
- ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
34675
- `
34698
+ style: {
34699
+ position: "absolute",
34700
+ top: "50%",
34701
+ transform: "translateY(-50%) rotate(45deg)",
34702
+ zIndex: 2,
34703
+ width: "25.5px",
34704
+ height: "25.5px",
34705
+ right: value ? "-13px" : "-12.5px",
34706
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34707
+ border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
34708
+ borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
34709
+ borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
34710
+ borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
34711
+ borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
34712
+ }
34676
34713
  }
34677
34714
  )
34678
34715
  ]
package/dist/index.mjs CHANGED
@@ -34535,25 +34535,62 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34535
34535
  var StatusBarOptionField = (props) => {
34536
34536
  const { selection, defaultValue } = props;
34537
34537
  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34538
- return /* @__PURE__ */ jsx106("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
34538
+ return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34539
34539
  const value = option?.[0] === defaultValue;
34540
34540
  return /* @__PURE__ */ jsxs74(
34541
34541
  "label",
34542
34542
  {
34543
- className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
34544
- ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
34545
- ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
34546
- ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
34547
- `,
34543
+ style: {
34544
+ position: "relative",
34545
+ flexShrink: 0,
34546
+ cursor: "default",
34547
+ paddingTop: "10px",
34548
+ paddingBottom: "10px",
34549
+ paddingLeft: "32px",
34550
+ // pl-8
34551
+ paddingRight: "20px",
34552
+ // pr-[20px]
34553
+ fontWeight: 600,
34554
+ // font-semibold
34555
+ fontSize: "12px",
34556
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34557
+ color: value ? "#fff" : "#121212",
34558
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34559
+ // rounded-l-xl
34560
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34561
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34562
+ // rounded-r-xl
34563
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34564
+ },
34548
34565
  children: [
34549
- /* @__PURE__ */ jsx106("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
34566
+ /* @__PURE__ */ jsx106(
34567
+ "input",
34568
+ {
34569
+ type: "radio",
34570
+ checked: value,
34571
+ style: { display: "none" },
34572
+ disabled: true
34573
+ }
34574
+ ),
34550
34575
  option[1],
34551
34576
  !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34552
34577
  "div",
34553
34578
  {
34554
- className: `absolute top-[50%] translate-y-[-50%] z-[2] w-[25.5px] h-[25.5px] transform rotate-45
34555
- ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
34556
- `
34579
+ style: {
34580
+ position: "absolute",
34581
+ top: "50%",
34582
+ transform: "translateY(-50%) rotate(45deg)",
34583
+ zIndex: 2,
34584
+ width: "25.5px",
34585
+ height: "25.5px",
34586
+ right: value ? "-13px" : "-12.5px",
34587
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34588
+ border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
34589
+ borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
34590
+ borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
34591
+ borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
34592
+ borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
34593
+ }
34557
34594
  }
34558
34595
  )
34559
34596
  ]
package/dist/widgets.js CHANGED
@@ -34300,25 +34300,62 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
34300
34300
  var StatusBarOptionField = (props) => {
34301
34301
  const { selection, defaultValue } = props;
34302
34302
  const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
34303
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
34303
+ return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34304
34304
  const value = option?.[0] === defaultValue;
34305
34305
  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
34306
34306
  "label",
34307
34307
  {
34308
- className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
34309
- ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
34310
- ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
34311
- ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
34312
- `,
34308
+ style: {
34309
+ position: "relative",
34310
+ flexShrink: 0,
34311
+ cursor: "default",
34312
+ paddingTop: "10px",
34313
+ paddingBottom: "10px",
34314
+ paddingLeft: "32px",
34315
+ // pl-8
34316
+ paddingRight: "20px",
34317
+ // pr-[20px]
34318
+ fontWeight: 600,
34319
+ // font-semibold
34320
+ fontSize: "12px",
34321
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34322
+ color: value ? "#fff" : "#121212",
34323
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34324
+ // rounded-l-xl
34325
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34326
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34327
+ // rounded-r-xl
34328
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34329
+ },
34313
34330
  children: [
34314
- /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
34331
+ /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34332
+ "input",
34333
+ {
34334
+ type: "radio",
34335
+ checked: value,
34336
+ style: { display: "none" },
34337
+ disabled: true
34338
+ }
34339
+ ),
34315
34340
  option[1],
34316
34341
  !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
34317
34342
  "div",
34318
34343
  {
34319
- className: `absolute top-[50%] translate-y-[-50%] z-[2] w-[25.5px] h-[25.5px] transform rotate-45
34320
- ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
34321
- `
34344
+ style: {
34345
+ position: "absolute",
34346
+ top: "50%",
34347
+ transform: "translateY(-50%) rotate(45deg)",
34348
+ zIndex: 2,
34349
+ width: "25.5px",
34350
+ height: "25.5px",
34351
+ right: value ? "-13px" : "-12.5px",
34352
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34353
+ border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
34354
+ borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
34355
+ borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
34356
+ borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
34357
+ borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
34358
+ }
34322
34359
  }
34323
34360
  )
34324
34361
  ]
package/dist/widgets.mjs CHANGED
@@ -34237,25 +34237,62 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34237
34237
  var StatusBarOptionField = (props) => {
34238
34238
  const { selection, defaultValue } = props;
34239
34239
  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34240
- return /* @__PURE__ */ jsx106("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
34240
+ return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
34241
34241
  const value = option?.[0] === defaultValue;
34242
34242
  return /* @__PURE__ */ jsxs74(
34243
34243
  "label",
34244
34244
  {
34245
- className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
34246
- ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
34247
- ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
34248
- ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
34249
- `,
34245
+ style: {
34246
+ position: "relative",
34247
+ flexShrink: 0,
34248
+ cursor: "default",
34249
+ paddingTop: "10px",
34250
+ paddingBottom: "10px",
34251
+ paddingLeft: "32px",
34252
+ // pl-8
34253
+ paddingRight: "20px",
34254
+ // pr-[20px]
34255
+ fontWeight: 600,
34256
+ // font-semibold
34257
+ fontSize: "12px",
34258
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34259
+ color: value ? "#fff" : "#121212",
34260
+ borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34261
+ // rounded-l-xl
34262
+ borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
34263
+ borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
34264
+ // rounded-r-xl
34265
+ borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
34266
+ },
34250
34267
  children: [
34251
- /* @__PURE__ */ jsx106("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
34268
+ /* @__PURE__ */ jsx106(
34269
+ "input",
34270
+ {
34271
+ type: "radio",
34272
+ checked: value,
34273
+ style: { display: "none" },
34274
+ disabled: true
34275
+ }
34276
+ ),
34252
34277
  option[1],
34253
34278
  !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
34254
34279
  "div",
34255
34280
  {
34256
- className: `absolute top-[50%] translate-y-[-50%] z-[2] w-[25.5px] h-[25.5px] transform rotate-45
34257
- ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
34258
- `
34281
+ style: {
34282
+ position: "absolute",
34283
+ top: "50%",
34284
+ transform: "translateY(-50%) rotate(45deg)",
34285
+ zIndex: 2,
34286
+ width: "25.5px",
34287
+ height: "25.5px",
34288
+ right: value ? "-13px" : "-12.5px",
34289
+ background: value ? "var(--primary-color)" : "#FAFAFA",
34290
+ border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
34291
+ borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
34292
+ borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
34293
+ borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
34294
+ borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
34295
+ }
34259
34296
  }
34260
34297
  )
34261
34298
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",