@versini/ui-responsive-text 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+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,115 @@
+# @versini/ui-responsive-text
+
+[![npm version](https://img.shields.io/npm/v/@versini/ui-responsive-text?style=flat-square)](https://www.npmjs.com/package/@versini/ui-responsive-text)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-responsive-text?style=flat-square&label=size%20(gzip)>)
+
+> A semantic and accessible React responsive text component built with TypeScript and TailwindCSS.
+
+The ResponsiveText component displays different text content based on screen or container size, allowing for flexible and adaptive UI text. It supports both viewport-based and container-query-based breakpoints.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [API](#api)
+
+## Features
+
+- **🎯 Adaptive Text**: Show different content at different breakpoints
+- **📦 Container Queries**: Supports both viewport and container-query modes
+- **♿ Accessible**: Renders semantic inline spans
+- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
+- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
+
+## Installation
+
+```bash
+npm install @versini/ui-responsive-text
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { ResponsiveText } from "@versini/ui-responsive-text";
+
+function App() {
+  return (
+    <ResponsiveText
+      short="Hi"
+      long="Hello, World!"
+    />
+  );
+}
+```
+
+On small screens, "Hi" is displayed. Above the `sm` breakpoint, "Hello, World!" is shown instead.
+
+### Custom Breakpoint
+
+```tsx
+import { ResponsiveText } from "@versini/ui-responsive-text";
+
+function App() {
+  return (
+    <ResponsiveText
+      short="Menu"
+      long="Navigation Menu"
+      breakpoint="md"
+    />
+  );
+}
+```
+
+### Container Query Mode
+
+When your layout depends on a container's width rather than the viewport, use `mode="container"`. The parent element must have the `@container` class (from `@tailwindcss/container-queries`).
+
+```tsx
+import { ResponsiveText } from "@versini/ui-responsive-text";
+
+function App() {
+  return (
+    <div className="@container">
+      <ResponsiveText
+        short="$99"
+        long="$99.00 per month"
+        mode="container"
+        breakpoint="sm"
+      />
+    </div>
+  );
+}
+```
+
+### With JSX Content
+
+Both `short` and `long` accept `React.ReactNode`, so you can pass rich content:
+
+```tsx
+import { ResponsiveText } from "@versini/ui-responsive-text";
+
+function App() {
+  return (
+    <ResponsiveText
+      short={<strong>Save</strong>}
+      long={<span><strong>Save</strong> to favorites</span>}
+    />
+  );
+}
+```
+
+## API
+
+### ResponsiveText Props
+
+| Prop       | Type                         | Default      | Description                                             |
+| ---------- | ---------------------------- | ------------ | ------------------------------------------------------- |
+| short      | `React.ReactNode`            | **required** | Content displayed below the breakpoint                  |
+| long       | `React.ReactNode`            | **required** | Content displayed at or above the breakpoint            |
+| breakpoint | `"sm" \| "md" \| "lg" \| "xl"` | `"sm"`       | The TailwindCSS breakpoint at which to switch content   |
+| mode       | `"viewport" \| "container"`  | `"viewport"` | Whether to use viewport media queries or container queries |

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare type Breakpoint = "sm" | "md" | "lg" | "xl";
+
+declare type QueryMode = "viewport" | "container";
+
+export declare const ResponsiveText: ({ short, long, breakpoint, mode, }: ResponsiveTextProps) => JSX.Element;
+
+declare type ResponsiveTextProps = {
+    short: React.ReactNode;
+    long: React.ReactNode;
+    breakpoint?: Breakpoint;
+    mode?: QueryMode;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,66 @@
+/*!
+  @versini/ui-responsive-text v1.0.0
+  © 2026 gizmette.com
+*/
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+
+
+// Static class maps to keep Tailwind's JIT scanner happy
+const viewportClasses = {
+    sm: {
+        long: "hidden sm:inline",
+        short: "inline sm:hidden"
+    },
+    md: {
+        long: "hidden md:inline",
+        short: "inline md:hidden"
+    },
+    lg: {
+        long: "hidden lg:inline",
+        short: "inline lg:hidden"
+    },
+    xl: {
+        long: "hidden xl:inline",
+        short: "inline xl:hidden"
+    }
+};
+// Uses @tailwindcss/container-queries prefix "@"
+const containerClasses = {
+    sm: {
+        long: "hidden @sm:inline",
+        short: "inline @sm:hidden"
+    },
+    md: {
+        long: "hidden @md:inline",
+        short: "inline @md:hidden"
+    },
+    lg: {
+        long: "hidden @lg:inline",
+        short: "inline @lg:hidden"
+    },
+    xl: {
+        long: "hidden @xl:inline",
+        short: "inline @xl:hidden"
+    }
+};
+const ResponsiveText = ({ short, long, breakpoint = "sm", mode = "viewport" })=>{
+    const classes = mode === "container" ? containerClasses[breakpoint] : viewportClasses[breakpoint];
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: classes.long,
+                children: long
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: classes.short,
+                children: short
+            })
+        ]
+    });
+};
+
+
+
+export { ResponsiveText };

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@versini/ui-responsive-text",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.npmjs.com/package/@versini/ui-responsive-text",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
+		"clean": "rimraf dist tmp coverage",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
+		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
+		"prettier": "biome check --write --no-errors-on-unmatched",
+		"start": "static-server dist --port 5173",
+		"test:coverage:ui": "vitest --coverage --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"devDependencies": {
+		"@versini/ui-types": "8.3.0"
+	},
+	"dependencies": {
+		"tailwindcss": "4.2.1"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"gitHead": "51ad61b8366b0220e699ccde69f2235ab1d1c54a"
+}