@tecsinapse/cortex-react 1.2.2-beta.2 → 1.3.0-beta.0

package/dist/cjs/components/Button.js

@@ -5,7 +5,16 @@ var cortexCore = require('@tecsinapse/cortex-core');
 
 const Button = React.forwardRef((props, ref) => {
   const { variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("button", { className: cortexCore.button(variants), ref, ...rest }, children);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cortexCore.button(variants),
+      ref,
+      "data-testid": "button",
+      ...rest
+    },
+    children
+  );
 });
 
 exports.Button = Button;

package/dist/cjs/components/DateSegment.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+
+const DateSegment = ({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+};
+
+exports.DateSegment = DateSegment;

package/dist/cjs/components/TextArea.js

@@ -14,6 +14,7 @@ const Box = React.forwardRef(
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "textarea",
       {
+        "data-testid": "textarea-box",
         ref,
         id: id ?? name,
         name,
@@ -48,6 +49,7 @@ const Face = React.forwardRef(
       {
         ref,
         className: clsx.clsx(cortexCore.input(variants), className),
+        "data-testid": "textarea-face",
         id: "textarea-face",
         ...rest
       },

package/dist/cjs/components/TimeField.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var DateSegment = require('./DateSegment.js');
+var useTimeField = require('../hooks/useTimeField.js');
+
+const TimeField = (props) => {
+  const { fieldProps, ref, state } = useTimeField.useTimeField(props);
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
+};
+
+module.exports = TimeField;

package/dist/cjs/components/TimeFieldInput.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var Input = require('./Input.js');
+var cortexCore = require('@tecsinapse/cortex-core');
+var TimeField = require('./TimeField.js');
+
+const TimeFieldInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Input.Input.Face,
+    {
+      variants,
+      className: "flex flex-row",
+      "data-testid": "time-field-input"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label),
+    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField, { onChange, value }))
+  ));
+};
+
+exports.TimeFieldInput = TimeFieldInput;

package/dist/cjs/hooks/useTimeField.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var date = require('@internationalized/date');
+
+const useTimeField = (props) => {
+  const { value, onChange } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    value: new date.Time(value?.hour, value?.minute),
+    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    {
+      "aria-label": "time-field",
+      hourCycle: 24
+    },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    ref,
+    state
+  };
+};
+
+exports.useTimeField = useTimeField;

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ var Table = require('./components/Table.js');
 var Tag = require('./components/Tag.js');
 var TextArea = require('./components/TextArea.js');
 var Toggle = require('./components/Toggle.js');
+var TimeFieldInput = require('./components/TimeFieldInput.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
@@ -63,6 +64,7 @@ exports.Td = Table.Td;
 exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.Toggle = Toggle.Toggle;
+exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;

package/dist/esm/components/Button.js

@@ -3,7 +3,16 @@ import { button } from '@tecsinapse/cortex-core';
 
 const Button = forwardRef((props, ref) => {
   const { variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("button", { className: button(variants), ref, ...rest }, children);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button(variants),
+      ref,
+      "data-testid": "button",
+      ...rest
+    },
+    children
+  );
 });
 
 export { Button };

package/dist/esm/components/DateSegment.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useDateSegment } from 'react-aria';
+
+const DateSegment = ({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+};
+
+export { DateSegment };

package/dist/esm/components/TextArea.js

@@ -12,6 +12,7 @@ const Box = React.forwardRef(
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "textarea",
       {
+        "data-testid": "textarea-box",
         ref,
         id: id ?? name,
         name,
@@ -46,6 +47,7 @@ const Face = React.forwardRef(
       {
         ref,
         className: clsx(input(variants), className),
+        "data-testid": "textarea-face",
         id: "textarea-face",
         ...rest
       },

package/dist/esm/components/TimeField.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DateSegment } from './DateSegment.js';
+import { useTimeField } from '../hooks/useTimeField.js';
+
+const TimeField = (props) => {
+  const { fieldProps, ref, state } = useTimeField(props);
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment, { key: i, segment, state })));
+};
+
+export { TimeField as default };

package/dist/esm/components/TimeFieldInput.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Input } from './Input.js';
+import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
+import TimeField from './TimeField.js';
+
+const TimeFieldInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Input.Face,
+    {
+      variants,
+      className: "flex flex-row",
+      "data-testid": "time-field-input"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: labelStyle({}) }, label),
+    /* @__PURE__ */ React.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField, { onChange, value }))
+  ));
+};
+
+export { TimeFieldInput };

package/dist/esm/hooks/useTimeField.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useLocale, useTimeField as useTimeField$1 } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
+import { Time } from '@internationalized/date';
+
+const useTimeField = (props) => {
+  const { value, onChange } = props;
+  const { locale } = useLocale();
+  const state = useTimeFieldState({
+    value: new Time(value?.hour, value?.minute),
+    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = useTimeField$1(
+    {
+      "aria-label": "time-field",
+      hourCycle: 24
+    },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    ref,
+    state
+  };
+};
+
+export { useTimeField };

package/dist/esm/index.js

@@ -19,6 +19,7 @@ export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './c
 export { Tag } from './components/Tag.js';
 export { TextArea } from './components/TextArea.js';
 export { Toggle } from './components/Toggle.js';
+export { TimeFieldInput } from './components/TimeFieldInput.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';

package/dist/types/components/DateSegment.d.ts

@@ -0,0 +1,7 @@
+import { DateFieldState, DateSegment as DateSegmentType } from 'react-stately';
+interface DateSegmentProps {
+    segment: DateSegmentType;
+    state: DateFieldState;
+}
+export declare const DateSegment: ({ segment, state }: DateSegmentProps) => JSX.Element;
+export {};

package/dist/types/components/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
 import React from 'react';
-interface InputPropsBase {
+export interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;
 }

package/dist/types/components/TimeField.d.ts

@@ -0,0 +1,7 @@
+import { TimeValueType } from './TimeFieldInput';
+export interface TimeFieldProps {
+    value?: TimeValueType;
+    onChange: (number: TimeValueType) => void;
+}
+declare const TimeField: (props: TimeFieldProps) => JSX.Element;
+export default TimeField;

package/dist/types/components/TimeFieldInput.d.ts

@@ -0,0 +1,10 @@
+import { InputPropsBase } from './Input';
+export type TimeValueType = {
+    hour: number;
+    minute: number;
+};
+export interface TimeFieldInputProps extends InputPropsBase {
+    value?: TimeValueType;
+    onChange: (number: TimeValueType) => void;
+}
+export declare const TimeFieldInput: (props: TimeFieldInputProps) => JSX.Element;

package/dist/types/components/index.d.ts

@@ -19,3 +19,4 @@ export * from './Table';
 export * from './Tag';
 export * from './TextArea';
 export * from './Toggle';
+export * from './TimeFieldInput';

package/dist/types/hooks/useTimeField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TimeFieldProps } from '../components/TimeField';
+export declare const useTimeField: (props: TimeFieldProps) => {
+    fieldProps: import("@react-types/shared").GroupDOMAttributes;
+    ref: React.MutableRefObject<null>;
+    state: import("react-stately").TimeFieldState;
+};

package/dist/types/tests/Button.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/DateSegment.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/TextArea.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/TimeField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/TimeFieldInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.2.2-beta.2",
+  "version": "1.3.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -18,7 +18,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@tecsinapse/cortex-core": "0.2.2-beta.1",
+    "@tecsinapse/cortex-core": "0.2.2-beta.2",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -39,5 +39,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "8018ecf7ba73dcedf9d6f58c9c836f50ca94ea70"
+  "gitHead": "0ecb7949c627cb5d2fe9395f148e48a0bb071599"
 }