@jamsrui/time-field 0.0.19

package/README.md

@@ -0,0 +1,40 @@
+# 🚀 **JamsrUI**
+
+**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**
+
+
+## 📖 **Overview**
+
+[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.
+
+## 🚀 Getting Started 
+
+Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).
+
+## ✨ Features
+
+- 🚀 **Production-Ready**: Optimized for modern React projects.
+- 🎨 **Customizable**: Easily override styles and themes.
+- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
+- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
+- 📦 **Lightweight**: Minimal dependencies for fast performance.
+- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.
+
+## 🌱 Community
+
+We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.
+
+### How to Engage
+
+- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
+- 🚀 **Request Features**: Share ideas for new components.
+- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.
+
+## Contributing
+
+We welcome contributions from developers of all skill levels!
+
+## ⭐ Support the Project
+
+If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
+

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TimeField as TimeField$1 } from './time-field.mjs';
+export { TimeFieldConfig, useTimeFieldConfig } from './time-field-config.mjs';
+import { TimeFieldSeparator } from './time-field-separator.mjs';
+import { TimeInput } from './time-input.mjs';
+import { TimeSegment } from './time-segment.mjs';
+export { TimeFieldSlots, TimeFieldVariants, timeFieldVariants } from './styles.mjs';
+export { useTimeField } from './use-time-field.mjs';
+export { useTimeSegment } from './use-time-segment.mjs';
+import '@jamsrui/core';
+import '@jamsrui/utils';
+import './time-field-root.mjs';
+
+declare const TimeField: ((props: TimeField$1.Props) => react_jsx_runtime.JSX.Element) & {
+    Input: (props: TimeInput.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Segment: (props: TimeSegment.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Separator: (props: TimeFieldSeparator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+};
+
+export { TimeField, TimeField$1 as TimeFieldRoot, TimeFieldSeparator, TimeInput, TimeSegment };

package/dist/index.mjs

@@ -0,0 +1 @@
+import{TimeField as e}from"./time-field.mjs";import{TimeFieldConfig as o,useTimeFieldConfig as r}from"./time-field-config.mjs";import{TimeFieldSeparator as i}from"./time-field-separator.mjs";import{TimeInput as m}from"./time-input.mjs";import{TimeSegment as t}from"./time-segment.mjs";import{timeFieldVariants as p}from"./styles.mjs";import{useTimeField as l}from"./use-time-field.mjs";import{useTimeSegment as T}from"./use-time-segment.mjs";const c=Object.assign(e,{Input:m,Segment:t,Separator:i});export{c as TimeField,o as TimeFieldConfig,e as TimeFieldRoot,i as TimeFieldSeparator,m as TimeInput,t as TimeSegment,p as timeFieldVariants,l as useTimeField,r as useTimeFieldConfig,T as useTimeSegment};

package/dist/styles.d.mts

@@ -0,0 +1,20 @@
+import * as _jamsrui_utils from '@jamsrui/utils';
+import { VariantProps } from '@jamsrui/utils';
+
+declare const timeFieldVariants: _jamsrui_utils.TVReturnType<{}, {
+    root: string;
+    input: string;
+    separator: string;
+}, undefined, {}, {
+    root: string;
+    input: string;
+    separator: string;
+}, _jamsrui_utils.TVReturnType<{}, {
+    root: string;
+    input: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+type TimeFieldVariants = VariantProps<typeof timeFieldVariants>;
+type TimeFieldSlots = keyof ReturnType<typeof timeFieldVariants>;
+
+export { type TimeFieldSlots, type TimeFieldVariants, timeFieldVariants };

package/dist/styles.mjs

@@ -0,0 +1 @@
+import{tv as t}from"@jamsrui/utils";const r=t({slots:{root:"flex gap-1 items-center",input:"focus:bg-default px-0.5 caret-transparent outline-none rounded text-sm",separator:"opacity-50"},variants:{},defaultVariants:{}});export{r as timeFieldVariants};

package/dist/time-field-config.d.mts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WithGlobalConfig } from '@jamsrui/core';
+import { TimeField } from './time-field.mjs';
+import './use-time-field.mjs';
+import 'react';
+import '@jamsrui/utils';
+import './time-segment.mjs';
+import './time-field-separator.mjs';
+import './time-field-root.mjs';
+
+declare const useTimeFieldConfig: () => TimeFieldConfig.Props;
+declare const TimeFieldConfig: (props: Omit<Partial<TimeFieldConfig.Props>, "children"> & {
+    merge?: boolean;
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare namespace TimeFieldConfig {
+    interface Props extends WithGlobalConfig<TimeField.Props> {
+    }
+}
+
+export { TimeFieldConfig, useTimeFieldConfig };

package/dist/time-field-config.mjs

@@ -0,0 +1 @@
+"use client";import{createConfigContext as e}from"@jamsrui/utils";const[o,t]=e({displayName:"TimeFieldConfig"});export{o as TimeFieldConfig,t as useTimeFieldConfig};

package/dist/time-field-context.d.mts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { useTimeField } from './use-time-field.mjs';
+import '@jamsrui/utils';
+import './time-segment.mjs';
+import './time-field-separator.mjs';
+import './time-field-root.mjs';
+
+declare const useTimeFieldContext: () => TimeFieldContext.Props;
+declare const TimeFieldContext: react.Context<TimeFieldContext.Props | null>;
+declare namespace TimeFieldContext {
+    interface Props extends ReturnType<typeof useTimeField> {
+    }
+}
+
+export { TimeFieldContext, useTimeFieldContext };

package/dist/time-field-context.mjs

@@ -0,0 +1 @@
+"use client";import{createContext as t,use as i}from"react";const o=t(null),r=()=>{const e=i(o);if(!e)throw new Error("useTimeFieldContext must be used within TimeFieldContext");return e};export{o as TimeFieldContext,r as useTimeFieldContext};

package/dist/time-field-root.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const TimeFieldRoot: (props: TimeFieldRoot.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace TimeFieldRoot {
+    interface Props extends UIProps<"div"> {
+        as?: React.ElementType;
+    }
+}
+
+export { TimeFieldRoot };

package/dist/time-field-root.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as m}from"@jamsrui/hooks";import{useTimeFieldContext as n}from"./time-field-context.mjs";const R=e=>{const{as:o="div",children:t,className:r,...s}=e,{getRootProps:i}=n();return m(o,{props:i({...s,children:t,className:r})})};export{R as TimeFieldRoot};

package/dist/time-field-separator.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const TimeFieldSeparator: (props: TimeFieldSeparator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace TimeFieldSeparator {
+    interface Props extends UIProps<"span"> {
+    }
+}
+
+export { TimeFieldSeparator };

package/dist/time-field-separator.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as t}from"@jamsrui/hooks";import{useTimeFieldContext as o}from"./time-field-context.mjs";const i=e=>{const{getSeparatorProps:r}=o();return t("span",{props:[r(e),{children:":"}]})};export{i as TimeFieldSeparator};

package/dist/time-field.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useTimeField } from './use-time-field.mjs';
+import 'react';
+import '@jamsrui/utils';
+import './time-segment.mjs';
+import './time-field-separator.mjs';
+import './time-field-root.mjs';
+
+declare const TimeField: (props: TimeField.Props) => react_jsx_runtime.JSX.Element;
+declare namespace TimeField {
+    interface Props extends useTimeField.Props {
+    }
+}
+
+export { TimeField };

package/dist/time-field.mjs

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import{mergeConfigProps as p}from"@jamsrui/utils";import{timeFieldVariants as d}from"./styles.mjs";import{useTimeFieldConfig as l}from"./time-field-config.mjs";import{TimeFieldContext as a}from"./time-field-context.mjs";import{useTimeField as c}from"./use-time-field.mjs";const x=i=>{const t=l(),r=p(d.defaultVariants,t,i),e=c(r),{Component:m,getRootProps:n,children:s}=e;return o(a,{value:e,children:o(m,{...n({}),children:s})})};export{x as TimeField};

package/dist/time-input.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+import { TimeSegment } from './time-segment.mjs';
+
+declare const TimeInput: (props: TimeInput.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace TimeInput {
+    interface Props extends Omit<UIProps<"div">, "children"> {
+        as?: React.ElementType;
+        children?: React.ReactNode | ((segment: TimeSegment.Segment) => React.ReactNode);
+    }
+}
+
+export { TimeInput };

package/dist/time-input.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as s}from"@jamsrui/hooks";import{useTimeFieldContext as i}from"./time-field-context.mjs";const T=t=>{const{as:n="div",children:e,...r}=t,{getInputProps:o,segmentList:m}=i();return s(n,{props:[o(r),{children:typeof e=="function"?m.map(p=>e(p)):e}]})};export{T as TimeInput};

package/dist/time-segment.d.mts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const TimeSegment: (props: TimeSegment.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace TimeSegment {
+    type Segment = "hour" | "minute" | "second" | "period";
+    interface Props extends UIProps<"div"> {
+        segment: Segment;
+    }
+}
+
+export { TimeSegment };

package/dist/time-segment.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as m}from"@jamsrui/hooks";import{useTimeFieldContext as s}from"./time-field-context.mjs";import{useTimeSegment as p}from"./use-time-segment.mjs";const g=e=>{const{segment:t,...r}=e,n=p({segment:t}),{getInputProps:o}=s();return m("div",{props:[o(r),{...n}]})};export{g as TimeSegment};

package/dist/use-time-field.d.mts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { PropGetter } from '@jamsrui/utils';
+import { TimeSegment } from './time-segment.mjs';
+import { TimeFieldSeparator } from './time-field-separator.mjs';
+import { TimeFieldRoot } from './time-field-root.mjs';
+
+type Segments = Record<TimeSegment.Segment, string>;
+
+declare const useTimeField: (props: useTimeField.Props) => {
+    Component: (props: TimeFieldRoot.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    segments: Segments;
+    activeSegment: TimeSegment.Segment;
+    getRootProps: PropGetter<TimeFieldRoot.Props>;
+    getInputProps: PropGetter<TimeFieldRoot.Props>;
+    getSeparatorProps: PropGetter<TimeFieldSeparator.Props>;
+    setActiveSegment: react.Dispatch<react.SetStateAction<TimeSegment.Segment>>;
+    segmentList: readonly ["hour", "minute", "period"];
+    children: null;
+};
+declare namespace useTimeField {
+    interface Props {
+    }
+}
+
+export { useTimeField };

package/dist/use-time-field.mjs

@@ -0,0 +1 @@
+"use client";import{useCallback as o,useRef as g,useState as r}from"react";import{dataAttrDev as s,mapPropsVariants as P}from"@jamsrui/utils";import{timeFieldVariants as a}from"./styles.mjs";import{TimeFieldRoot as S}from"./time-field-root.mjs";const b=m=>{const[f,n]=P(m,a.variantKeys),[i,T]=r({hour:"",minute:"",second:"",period:""}),[l,p]=r("hour"),F=g([]),[N,v]=r(null),t=a(n),c=o(e=>({...e,"data-component":s("time-field"),className:t.root({className:e.className}),"data-slot":s("root")}),[t]),u=o(e=>({...e,contentEditable:!0,suppressContentEditableWarning:!0,className:t.input({className:e.className}),"data-slot":s("input"),inputMode:"numeric",spellCheck:!1}),[t]),d=o(e=>({...e,className:t.separator({className:e.className}),"data-slot":s("separator")}),[t]);return{Component:S,segments:i,activeSegment:l,getRootProps:c,getInputProps:u,getSeparatorProps:d,setActiveSegment:p,segmentList:["hour","minute","period"],children:null}};export{b as useTimeField};

package/dist/use-time-segment.d.mts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { TimeSegment } from './time-segment.mjs';
+import '@jamsrui/utils';
+
+declare const useTimeSegment: (props: useTimeSegment.Props) => useTimeSegment.ReturnType;
+declare namespace useTimeSegment {
+    interface ReturnType extends ComponentProps<"div"> {
+    }
+    interface Props {
+        segment: TimeSegment.Segment;
+    }
+}
+
+export { useTimeSegment };

package/dist/use-time-segment.mjs

@@ -0,0 +1 @@
+"use client";import{useCallback as o}from"react";import{useTimeFieldContext as u}from"./time-field-context.mjs";const f=m=>{const{segment:n}=m,{activeSegment:i,setActiveSegment:r}=u();console.log(i);const p=o(t=>{const e=t.key;if(console.log(e),e==="ArrowLeft"){t.preventDefault();return}if(e==="ArrowRight"){t.preventDefault();return}if(e==="ArrowUp"){t.preventDefault();return}if(e==="ArrowDown"){t.preventDefault();return}if(e==="Home"){t.preventDefault();return}if(e==="End"){t.preventDefault();return}if(e==="Backspace"||e==="Delete"){t.preventDefault();return}},[]),s=o(()=>{r(n)},[n,r]);return{onKeyDown:p,onFocus:s}};export{f as useTimeSegment};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@jamsrui/time-field",
+  "version": "0.0.19",
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "dependencies": {
+    "@jamsrui/hooks": "^0.0.17",
+    "@jamsrui/core": "^0.0.14",
+    "@jamsrui/utils": "^0.0.17",
+    "@jamsrui/input": "^0.0.19"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "description": "A modern and beautiful Next.js UI components library.",
+  "keywords": [
+    "react",
+    "ui",
+    "UI components",
+    "Next.js",
+    "React",
+    "JamsrUI",
+    "jamsr-ui",
+    "TypeScript"
+  ],
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "@jamsrworld",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jamsrworld/jamsr-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/jamsrworld/jamsr-ui/issues"
+  },
+  "homepage": "https://jamsr-ui.jamsrworld.com",
+  "files": [
+    "dist",
+    "README",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ]
+}