@uxf/ui 1.0.0-beta.91 → 1.0.0-beta.92

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 (13) hide show
  1. package/css/combobox.css +2 -2
  2. package/css/date-picker-input.css +3 -1
  3. package/css/label.css +1 -1
  4. package/css/paper.css +3 -0
  5. package/css/time-picker-input.css +3 -1
  6. package/date-picker-input/date-picker-input.stories.js +4 -4
  7. package/package.json +1 -1
  8. package/paper/paper.d.ts +5 -0
  9. package/paper/paper.js +13 -0
  10. package/paper/paper.stories.d.ts +7 -0
  11. package/paper/paper.stories.js +18 -0
  12. package/time-picker-input/time-picker-input.stories.js +4 -4
  13. package/utils/tailwind-config.js +3 -0
package/css/combobox.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .uxf-combobox {
2
- @apply relative shadow-sm;
2
+ @apply relative;
3
3
 
4
4
  &__button {
5
5
  height: theme("inputSize.default");
6
6
 
7
- @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left
7
+ @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
8
8
  outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
9
9
 
10
10
  .uxf-icon {
package/css/date-picker-input.css CHANGED
@@ -22,7 +22,9 @@
22
22
  }
23
23
 
24
24
  &__wrapper {
25
- @apply flex items-center w-full h-12 rounded-lg border px-4;
25
+ height: theme("inputSize.default");
26
+
27
+ @apply flex items-center w-full rounded-lg border px-4;
26
28
 
27
29
  :root .light & {
28
30
  @apply bg-gray-100 text-gray-900 border-gray-200;
package/css/label.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .uxf-label {
2
- @apply mb-2 block text-sm font-medium;
2
+ @apply mb-0.5 block text-sm font-medium;
3
3
 
4
4
  :root .light & {
5
5
  @apply text-gray-900;
package/css/paper.css ADDED
@@ -0,0 +1,3 @@
1
+ .uxf-paper {
2
+ @apply bg-white rounded-lg shadow-paper;
3
+ }
package/css/time-picker-input.css CHANGED
@@ -25,7 +25,9 @@
25
25
  }
26
26
 
27
27
  &__wrapper {
28
- @apply flex items-center w-full h-12 rounded-lg border px-4;
28
+ height: theme("inputSize.default");
29
+
30
+ @apply flex items-center w-full rounded-lg border px-4;
29
31
 
30
32
  :root .light & {
31
33
  @apply bg-gray-100 text-gray-900 border-gray-200;
package/date-picker-input/date-picker-input.stories.js CHANGED
@@ -43,10 +43,10 @@ exports.default = {
43
43
  function Default() {
44
44
  const [date, setDate] = (0, react_1.useState)(null);
45
45
  const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
46
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null) }),
47
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", name: "date-disabled", label: "Datum disabled", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isDisabled: true }),
48
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", name: "date-readonly", label: "Datum readonly", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isReadOnly: true }),
49
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isInvalid: true })));
46
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null) }),
47
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", name: "date-disabled", label: "Datum disabled", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isDisabled: true }),
48
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", name: "date-readonly", label: "Datum readonly", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isReadOnly: true }),
49
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isInvalid: true })));
50
50
  return (react_1.default.createElement(react_1.default.Fragment, null,
51
51
  react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
52
52
  react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.91",
3
+ "version": "1.0.0-beta.92",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/paper/paper.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import React, { HTMLAttributes } from "react";
2
+ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
3
+ className?: string;
4
+ }
5
+ export declare const Paper: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
package/paper/paper.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Paper = void 0;
7
+ const cx_1 = require("@uxf/core/utils/cx");
8
+ const react_1 = __importDefault(require("react"));
9
+ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
10
+ exports.Paper = (0, forwardRef_1.forwardRef)("Paper", (props, ref) => {
11
+ const paperClassName = (0, cx_1.cx)("uxf-paper", props.className);
12
+ return (react_1.default.createElement("div", { ref: ref, className: paperClassName }, props.children));
13
+ });
package/paper/paper.stories.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ declare const _default: {
3
+ title: string;
4
+ component: React.ForwardRefExoticComponent<import("./paper").BadgeProps & React.RefAttributes<HTMLDivElement>>;
5
+ };
6
+ export default _default;
7
+ export declare function Default(): JSX.Element;
package/paper/paper.stories.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Default = void 0;
7
+ const paper_1 = require("./paper");
8
+ const react_1 = __importDefault(require("react"));
9
+ exports.default = {
10
+ title: "UI/Paper",
11
+ component: paper_1.Paper,
12
+ };
13
+ function Default() {
14
+ return (react_1.default.createElement("div", { className: "flex items-center justify-center bg-gray-100" },
15
+ react_1.default.createElement(paper_1.Paper, null,
16
+ react_1.default.createElement("div", { className: "flex items-center justify-center p-24" }, "Paper default"))));
17
+ }
18
+ exports.Default = Default;
package/time-picker-input/time-picker-input.stories.js CHANGED
@@ -34,10 +34,10 @@ exports.default = {
34
34
  function Default() {
35
35
  const [time, setTime] = (0, react_1.useState)(null);
36
36
  const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
37
- react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", name: "time", label: "\u010Cas \u010Dehokoliv", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data) }),
38
- react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-disabled", name: "time-disabled", label: "\u010Cas disabled", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isDisabled: true }),
39
- react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", name: "time-readonly", label: "\u010Cas readonly", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isReadOnly: true }),
40
- react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", name: "time-invalid", label: "\u010Cas invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isInvalid: true })));
37
+ react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", name: "time", label: "\u010Cas \u010Dehokoliv", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: time, onChange: (data) => setTime(data) }),
38
+ react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-disabled", name: "time-disabled", label: "\u010Cas disabled", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: time, onChange: (data) => setTime(data), isDisabled: true }),
39
+ react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", name: "time-readonly", label: "\u010Cas readonly", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: time, onChange: (data) => setTime(data), isReadOnly: true }),
40
+ react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", name: "time-invalid", label: "\u010Cas invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: time, onChange: (data) => setTime(data), isInvalid: true })));
41
41
  return (react_1.default.createElement(react_1.default.Fragment, null,
42
42
  react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testTimePickers),
43
43
  react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testTimePickers)));
package/utils/tailwind-config.js CHANGED
@@ -96,6 +96,9 @@ module.exports = {
96
96
  900: "#7f1d1d",
97
97
  },
98
98
  },
99
+ boxShadow: {
100
+ paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
101
+ },
99
102
  spacing: {
100
103
  inherit: "inherit",
101
104
  },