@jamsrui/date-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/date-field-config.d.mts

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

package/dist/date-field-config.mjs

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

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

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

package/dist/date-field-context.mjs

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

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

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

package/dist/date-field-root.mjs

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

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

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

package/dist/date-field-separator.mjs

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

package/dist/date-field.d.mts

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

package/dist/date-field.mjs

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

package/dist/date-input.d.mts

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

package/dist/date-input.mjs

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

package/dist/date-segment.d.mts

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

package/dist/date-segment.mjs

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

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateField as DateField$1 } from './date-field.mjs';
+export { DateFieldConfig, useDateFieldConfig } from './date-field-config.mjs';
+import { DateFieldSeparator } from './date-field-separator.mjs';
+import { DateInput } from './date-input.mjs';
+import { DateSegment } from './date-segment.mjs';
+export { DateFieldSlots, DateFieldVariants, dateFieldVariants } from './styles.mjs';
+export { useDateField } from './use-date-field.mjs';
+export { useDateSegment } from './use-date-segment.mjs';
+import '@jamsrui/core';
+import '@jamsrui/utils';
+import './date-field-root.mjs';
+
+declare const DateField: ((props: DateField$1.Props) => react_jsx_runtime.JSX.Element) & {
+    Input: (props: DateInput.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Segment: (props: DateSegment.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Separator: (props: DateFieldSeparator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+};
+
+export { DateField, DateField$1 as DateFieldRoot, DateFieldSeparator, DateInput, DateSegment };

package/dist/index.mjs

@@ -0,0 +1 @@
+import{DateField as e}from"./date-field.mjs";import{DateFieldConfig as i,useDateFieldConfig as r}from"./date-field-config.mjs";import{DateFieldSeparator as t}from"./date-field-separator.mjs";import{DateInput as a}from"./date-input.mjs";import{DateSegment as o}from"./date-segment.mjs";import{dateFieldVariants as m}from"./styles.mjs";import{useDateField as p}from"./use-date-field.mjs";import{useDateSegment as l}from"./use-date-segment.mjs";const c=Object.assign(e,{Input:a,Segment:o,Separator:t});export{c as DateField,i as DateFieldConfig,e as DateFieldRoot,t as DateFieldSeparator,a as DateInput,o as DateSegment,m as dateFieldVariants,p as useDateField,r as useDateFieldConfig,l as useDateSegment};

package/dist/styles.d.mts

@@ -0,0 +1,20 @@
+import * as _jamsrui_utils from '@jamsrui/utils';
+import { VariantProps } from '@jamsrui/utils';
+
+declare const dateFieldVariants: _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 DateFieldVariants = VariantProps<typeof dateFieldVariants>;
+type DateFieldSlots = keyof ReturnType<typeof dateFieldVariants>;
+
+export { type DateFieldSlots, type DateFieldVariants, dateFieldVariants };

package/dist/styles.mjs

@@ -0,0 +1 @@
+import{tv as t}from"@jamsrui/utils";const a=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{a as dateFieldVariants};

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

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

package/dist/use-date-field.mjs

@@ -0,0 +1 @@
+"use client";import{useCallback as s,useRef as g,useState as o}from"react";import{dataAttrDev as a,mapPropsVariants as P}from"@jamsrui/utils";import{dateFieldVariants as r}from"./styles.mjs";import{DateFieldRoot as S}from"./date-field-root.mjs";const h=n=>{const[f,m]=P(n,r.variantKeys),[l,D]=o({day:"",month:"",year:""}),[i,p]=o("day"),y=g([]),[F,N]=o(null),t=r(m),c=s(e=>({...e,"data-component":a("date-field"),className:t.root({className:e.className}),"data-slot":a("root")}),[t]),d=s(e=>({...e,contentEditable:!0,suppressContentEditableWarning:!0,className:t.input({className:e.className}),"data-slot":a("input"),inputMode:"numeric",spellCheck:!1}),[t]),u=s(e=>({...e,className:t.separator({className:e.className}),"data-slot":a("separator")}),[t]);return{Component:S,segments:l,activeSegment:i,getRootProps:c,getInputProps:d,getSeparatorProps:u,setActiveSegment:p,segmentList:["day","month","year"],children:null}};export{h as useDateField};

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

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

package/dist/use-date-segment.mjs

@@ -0,0 +1 @@
+"use client";import{useCallback as o}from"react";import{useDateFieldContext as m}from"./date-field-context.mjs";const i=a=>{const{segment:n}=a,{activeSegment:p,setActiveSegment:r}=m();console.log(p);const s=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}},[]),u=o(()=>{r(n)},[n,r]);return{onKeyDown:s,onFocus:u}};export{i as useDateSegment};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@jamsrui/date-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"
+  ]
+}