@pos-360/horizon 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 POS-360
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# @pos-360/horizon
+
+Unified UI component library for the POS-360 software ecosystem. Built with React, TypeScript, and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @pos-360/horizon
+# or
+pnpm add @pos-360/horizon
+# or
+yarn add @pos-360/horizon
+```
+
+### Peer Dependencies
+
+Ensure you have the following peer dependencies installed:
+
+```bash
+npm install react react-dom tailwindcss clsx tailwind-merge class-variance-authority
+# For enhanced components
+npm install framer-motion lucide-react @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-tabs
+```
+
+## Setup
+
+### Tailwind Configuration
+
+Extend your `tailwind.config.js` with the Horizon preset:
+
+```js
+const horizonPreset = require("@pos-360/horizon/tailwind");
+
+module.exports = {
+  presets: [horizonPreset],
+  content: [
+    // ... your content paths
+    "./node_modules/@pos-360/horizon/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ... rest of your config
+};
+```
+
+## Usage
+
+### Importing Components
+
+```tsx
+// Import specific components
+import { Button, Card, Badge } from "@pos-360/horizon";
+
+// Or import from specific entry points for better tree-shaking
+import { Button, Badge } from "@pos-360/horizon/primitives";
+import { Input, Toast } from "@pos-360/horizon/enhanced";
+import { useToast } from "@pos-360/horizon/hooks";
+```
+
+### Basic Example
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@pos-360/horizon";
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button variant="default">Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Using Toast Notifications
+
+```tsx
+import { Toast, useToast } from "@pos-360/horizon";
+
+function MyComponent() {
+  const { toast, showSuccess, showError } = useToast();
+
+  return (
+    <div>
+      <button onClick={() => showSuccess("Operation completed!")}>
+        Show Success
+      </button>
+      <button onClick={() => showError("Something went wrong")}>
+        Show Error
+      </button>
+      {toast && <Toast {...toast} />}
+    </div>
+  );
+}
+```
+
+## Components
+
+### Primitives
+
+Core UI building blocks based on shadcn/ui patterns:
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Versatile button with variants (default, destructive, outline, secondary, ghost, link) |
+| `Badge` | Status indicators with variants (default, secondary, destructive, outline, success, warning, info) |
+| `Card` | Container with header, title, description, content, and footer subcomponents |
+| `Checkbox` | Accessible checkbox built on Radix UI |
+| `Dialog` | Modal dialog with overlay, header, footer, title, and description |
+| `DropdownMenu` | Full-featured dropdown menu system |
+| `Popover` | Floating content container |
+| `Select` | Accessible select/dropdown built on Radix UI |
+| `Skeleton` | Loading state placeholders (text, title, avatar, card, table rows) |
+| `Table` | Full table system with header, body, row, cell components |
+| `Tabs` | Tab navigation built on Radix UI |
+| `Textarea` | Multi-line text input |
+
+### Enhanced
+
+Feature-rich components with advanced behaviors:
+
+| Component | Description |
+|-----------|-------------|
+| `AnimatedButton` | Framer Motion powered button with hover/tap animations |
+| `Input` | Full-featured input with icons, decorators, number controls, select mode, and mobile formatting |
+| `TextButton` | Text-style button with leading/trailing decorators |
+| `Toast` | Animated toast notifications with progress bar |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useToast` | Toast notification state management |
+
+### Utilities
+
+| Utility | Description |
+|---------|-------------|
+| `cn` | Class name merger (clsx + tailwind-merge) |
+
+## Design Tokens
+
+The Horizon Tailwind preset includes POS-360 design tokens:
+
+### Colors
+
+- Primary: `primary-50` through `primary-950`
+- Semantic: `background`, `foreground`, `card`, `popover`, `muted`, `accent`, `destructive`
+- Border and input colors with dark mode support
+
+### Animations
+
+- `accordion-down` / `accordion-up`
+- `pulse-slow` (slower pulse for skeletons)
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm build
+
+# Watch mode
+pnpm dev
+```
+
+## Package Exports
+
+```json
+{
+  ".": "./dist/index.js",
+  "./primitives": "./dist/primitives.js",
+  "./enhanced": "./dist/enhanced.js",
+  "./hooks": "./dist/hooks.js",
+  "./tailwind": "./dist/tailwind.js"
+}
+```
+
+## License
+
+MIT - POS-360

package/dist/animated-icons.d.mts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+interface ArrowRightIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowRightIconProps {
+    size?: number;
+    className?: string;
+}
+declare const ArrowRightIcon: React.ForwardRefExoticComponent<ArrowRightIconProps & React.RefAttributes<ArrowRightIconHandle>>;
+
+interface PlusIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface PlusIconProps {
+    size?: number;
+    className?: string;
+}
+declare const PlusIcon: React.ForwardRefExoticComponent<PlusIconProps & React.RefAttributes<PlusIconHandle>>;
+
+interface CheckIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface CheckIconProps {
+    size?: number;
+    className?: string;
+}
+declare const CheckIcon: React.ForwardRefExoticComponent<CheckIconProps & React.RefAttributes<CheckIconHandle>>;
+
+interface SendIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface SendIconProps {
+    size?: number;
+    className?: string;
+}
+declare const SendIcon: React.ForwardRefExoticComponent<SendIconProps & React.RefAttributes<SendIconHandle>>;
+
+interface TrashIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TrashIconProps {
+    size?: number;
+    duration?: number;
+    className?: string;
+}
+declare const TrashIcon: React.ForwardRefExoticComponent<TrashIconProps & React.RefAttributes<TrashIconHandle>>;
+
+export { ArrowRightIcon, type ArrowRightIconHandle, type ArrowRightIconProps, CheckIcon, type CheckIconHandle, type CheckIconProps, PlusIcon, type PlusIconHandle, type PlusIconProps, SendIcon, type SendIconHandle, type SendIconProps, TrashIcon, type TrashIconHandle, type TrashIconProps };

package/dist/animated-icons.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+interface ArrowRightIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowRightIconProps {
+    size?: number;
+    className?: string;
+}
+declare const ArrowRightIcon: React.ForwardRefExoticComponent<ArrowRightIconProps & React.RefAttributes<ArrowRightIconHandle>>;
+
+interface PlusIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface PlusIconProps {
+    size?: number;
+    className?: string;
+}
+declare const PlusIcon: React.ForwardRefExoticComponent<PlusIconProps & React.RefAttributes<PlusIconHandle>>;
+
+interface CheckIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface CheckIconProps {
+    size?: number;
+    className?: string;
+}
+declare const CheckIcon: React.ForwardRefExoticComponent<CheckIconProps & React.RefAttributes<CheckIconHandle>>;
+
+interface SendIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface SendIconProps {
+    size?: number;
+    className?: string;
+}
+declare const SendIcon: React.ForwardRefExoticComponent<SendIconProps & React.RefAttributes<SendIconHandle>>;
+
+interface TrashIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TrashIconProps {
+    size?: number;
+    duration?: number;
+    className?: string;
+}
+declare const TrashIcon: React.ForwardRefExoticComponent<TrashIconProps & React.RefAttributes<TrashIconHandle>>;
+
+export { ArrowRightIcon, type ArrowRightIconHandle, type ArrowRightIconProps, CheckIcon, type CheckIconHandle, type CheckIconProps, PlusIcon, type PlusIconHandle, type PlusIconProps, SendIcon, type SendIconHandle, type SendIconProps, TrashIcon, type TrashIconHandle, type TrashIconProps };

package/dist/animated-icons.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var chunkR5HAFV6M_js = require('./chunk-R5HAFV6M.js');
+
+
+
+Object.defineProperty(exports, "ArrowRightIcon", {
+  enumerable: true,
+  get: function () { return chunkR5HAFV6M_js.ArrowRightIcon; }
+});
+Object.defineProperty(exports, "CheckIcon", {
+  enumerable: true,
+  get: function () { return chunkR5HAFV6M_js.CheckIcon; }
+});
+Object.defineProperty(exports, "PlusIcon", {
+  enumerable: true,
+  get: function () { return chunkR5HAFV6M_js.PlusIcon; }
+});
+Object.defineProperty(exports, "SendIcon", {
+  enumerable: true,
+  get: function () { return chunkR5HAFV6M_js.SendIcon; }
+});
+Object.defineProperty(exports, "TrashIcon", {
+  enumerable: true,
+  get: function () { return chunkR5HAFV6M_js.TrashIcon; }
+});
+//# sourceMappingURL=animated-icons.js.map
+//# sourceMappingURL=animated-icons.js.map

package/dist/animated-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"animated-icons.js"}

package/dist/animated-icons.mjs

@@ -0,0 +1,3 @@
+export { ArrowRightIcon, CheckIcon, PlusIcon, SendIcon, TrashIcon } from './chunk-2B2BWI5A.mjs';
+//# sourceMappingURL=animated-icons.mjs.map
+//# sourceMappingURL=animated-icons.mjs.map

package/dist/animated-icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"animated-icons.mjs"}

package/dist/chunk-2B2BWI5A.mjs

@@ -0,0 +1,324 @@
+import * as React from 'react';
+import { useAnimation, motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ArrowRightIcon = React.forwardRef(
+  ({ size = 24, className }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => ({
+      startAnimation: () => {
+        isControlledRef.current = true;
+        controls.start({
+          x: [0, 4, 0],
+          transition: { duration: 0.4, ease: "easeInOut" }
+        });
+      },
+      stopAnimation: () => {
+        isControlledRef.current = false;
+        controls.stop();
+        controls.set({ x: 0 });
+      }
+    }));
+    const handleHoverStart = () => {
+      if (!isControlledRef.current) {
+        controls.start({
+          x: [0, 4, 0],
+          transition: { duration: 0.4, ease: "easeInOut" }
+        });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        onHoverStart: handleHoverStart,
+        animate: controls,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+          /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+        ]
+      }
+    );
+  }
+);
+ArrowRightIcon.displayName = "ArrowRightIcon";
+var PlusIcon = React.forwardRef(
+  ({ size = 24, className }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => ({
+      startAnimation: () => {
+        isControlledRef.current = true;
+        controls.start({
+          rotate: [0, 90],
+          scale: [1, 1.1, 1],
+          transition: { duration: 0.3, ease: "easeInOut" }
+        });
+      },
+      stopAnimation: () => {
+        isControlledRef.current = false;
+        controls.stop();
+        controls.set({ rotate: 0, scale: 1 });
+      }
+    }));
+    const handleHoverStart = () => {
+      if (!isControlledRef.current) {
+        controls.start({
+          rotate: [0, 90],
+          scale: [1, 1.1, 1],
+          transition: { duration: 0.3, ease: "easeInOut" }
+        });
+      }
+    };
+    const handleHoverEnd = () => {
+      if (!isControlledRef.current) {
+        controls.start({
+          rotate: 0,
+          scale: 1,
+          transition: { duration: 0.2 }
+        });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        onHoverStart: handleHoverStart,
+        onHoverEnd: handleHoverEnd,
+        animate: controls,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+          /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+        ]
+      }
+    );
+  }
+);
+PlusIcon.displayName = "PlusIcon";
+var CheckIcon = React.forwardRef(
+  ({ size = 24, className }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => ({
+      startAnimation: () => {
+        isControlledRef.current = true;
+        controls.start({
+          pathLength: [0, 1],
+          transition: { duration: 0.4, ease: "easeOut" }
+        });
+      },
+      stopAnimation: () => {
+        isControlledRef.current = false;
+        controls.stop();
+        controls.set({ pathLength: 1 });
+      }
+    }));
+    const handleHoverStart = () => {
+      if (!isControlledRef.current) {
+        controls.start({
+          scale: [1, 1.2, 1],
+          transition: { duration: 0.3, ease: "easeInOut" }
+        });
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        onHoverStart: handleHoverStart,
+        animate: controls,
+        children: /* @__PURE__ */ jsx(motion.path, { d: "M20 6 9 17l-5-5", animate: controls })
+      }
+    );
+  }
+);
+CheckIcon.displayName = "CheckIcon";
+var SendIcon = React.forwardRef(
+  ({ size = 24, className }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => ({
+      startAnimation: () => {
+        isControlledRef.current = true;
+        controls.start({
+          x: [0, 8, -2, 0],
+          y: [0, -8, 2, 0],
+          transition: { duration: 0.5, ease: "easeInOut" }
+        });
+      },
+      stopAnimation: () => {
+        isControlledRef.current = false;
+        controls.stop();
+        controls.set({ x: 0, y: 0 });
+      }
+    }));
+    const handleHoverStart = () => {
+      if (!isControlledRef.current) {
+        controls.start({
+          x: [0, 4, 0],
+          y: [0, -4, 0],
+          transition: { duration: 0.4, ease: "easeInOut" }
+        });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        onHoverStart: handleHoverStart,
+        animate: controls,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })
+        ]
+      }
+    );
+  }
+);
+SendIcon.displayName = "SendIcon";
+var TrashIcon = React.forwardRef(
+  ({ size = 24, duration = 1, className }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = () => {
+      if (!isControlledRef.current) {
+        controls.start("animate");
+      }
+    };
+    const handleMouseLeave = () => {
+      if (!isControlledRef.current) {
+        controls.start("normal");
+      }
+    };
+    const lidBounce = {
+      normal: { y: 0, rotate: 0 },
+      animate: {
+        rotate: [0, -10, 6, -3, 0],
+        y: [0, -2, 0.5, 0],
+        transition: {
+          duration: 0.9 * duration,
+          ease: "easeInOut",
+          delay: 0.05
+        }
+      }
+    };
+    const barSnap = {
+      normal: { scaleX: 1, opacity: 1 },
+      animate: {
+        scaleX: [0.85, 1.08, 1],
+        opacity: [0.9, 1, 1],
+        transition: { duration: 0.45 * duration, ease: "easeOut", delay: 0.1 }
+      }
+    };
+    const binSettle = {
+      normal: { y: 0, scaleY: 1 },
+      animate: {
+        scaleY: [1, 0.97, 1],
+        transition: { duration: 0.5 * duration, ease: "easeOut", delay: 0.2 }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className,
+        style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsxs(
+          motion.svg,
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+                  variants: binSettle,
+                  initial: "normal",
+                  animate: controls,
+                  style: { transformOrigin: "50% 100%" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  d: "M3 6h18",
+                  variants: barSnap,
+                  initial: "normal",
+                  animate: controls
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+                  variants: lidBounce,
+                  initial: "normal",
+                  animate: controls,
+                  style: { transformOrigin: "12px 6px" }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TrashIcon.displayName = "TrashIcon";
+
+export { ArrowRightIcon, CheckIcon, PlusIcon, SendIcon, TrashIcon };
+//# sourceMappingURL=chunk-2B2BWI5A.mjs.map
+//# sourceMappingURL=chunk-2B2BWI5A.mjs.map