@umbra.ui/core 0.1.0

package/src/components/inputs/AutogrowTextView/README.md

@@ -0,0 +1,643 @@
+# AutogrowTextView
+
+A text input component that automatically grows in height as the user types, built with Vue 3 Composition API and TypeScript. The AutogrowTextView component provides a seamless text editing experience with automatic height adjustment, customizable styling, and smooth transitions.
+
+## Installation/Import
+
+```typescript
+import { AutogrowTextView } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- autosize (for automatic height adjustment)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const text = ref("");
+
+const handleTextUpdate = (newText: string) => {
+  console.log("Text updated:", newText);
+  text.value = newText;
+};
+
+const handleBlur = (text: string) => {
+  console.log("Text on blur:", text);
+};
+</script>
+
+<template>
+  <div>
+    <AutogrowTextView
+      v-model:text="text"
+      placeholder="Start typing..."
+      @update:text="handleTextUpdate"
+      @onBlur="handleBlur"
+    />
+  </div>
+</template>
+```
+
+## Props
+
+| Prop Name     | Type     | Required | Default          | Description                                          |
+| ------------- | -------- | -------- | ---------------- | ---------------------------------------------------- |
+| `text`        | `string` | No       | `""`             | The text content of the textarea                     |
+| `placeholder` | `string` | No       | `"Type Here..."` | Placeholder text displayed when empty                |
+| `fontStyle`   | `string` | No       | `"body"`         | CSS class for font styling (e.g., "body", "caption") |
+
+## Events
+
+| Event Name    | Payload Type | Description                           |
+| ------------- | ------------ | ------------------------------------- |
+| `update:text` | `string`     | Emitted when the text content changes |
+| `onBlur`      | `string`     | Emitted when the textarea loses focus |
+
+## Slots
+
+This component does not use slots.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs.
+
+## CSS Customization
+
+The AutogrowTextView component uses CSS custom properties for easy theming and customization:
+
+```css
+/* AutogrowTextView colors */
+--autogrow-bg: #ffffff;
+--autogrow-border: #d9d9d9;
+--autogrow-focus-border: #0090ff;
+--autogrow-text-color: #202020;
+--autogrow-placeholder-color: rgba(26, 29, 35, 0.5);
+
+/* Customizable properties */
+--autogrow-padding: 1.176rem;
+--autogrow-border-radius: 0.706rem;
+```
+
+## Examples
+
+### Basic Text Input
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const message = ref("");
+
+const handleSubmit = () => {
+  if (message.value.trim()) {
+    console.log("Sending message:", message.value);
+    message.value = "";
+  }
+};
+</script>
+
+<template>
+  <div class="message-composer">
+    <h3>Compose Message</h3>
+
+    <AutogrowTextView
+      v-model:text="message"
+      placeholder="Type your message here..."
+      fontStyle="body"
+    />
+
+    <button @click="handleSubmit" :disabled="!message.trim()">
+      Send Message
+    </button>
+  </div>
+</template>
+
+<style module>
+.message-composer {
+  max-width: 500px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+button {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### Different Font Styles
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const bodyText = ref("");
+const captionText = ref("");
+const headlineText = ref("");
+</script>
+
+<template>
+  <div class="font-styles">
+    <h3>Font Style Examples</h3>
+
+    <div class="style-group">
+      <label>Body Text</label>
+      <AutogrowTextView
+        v-model:text="bodyText"
+        placeholder="Body style text..."
+        fontStyle="body"
+      />
+    </div>
+
+    <div class="style-group">
+      <label>Caption Text</label>
+      <AutogrowTextView
+        v-model:text="captionText"
+        placeholder="Caption style text..."
+        fontStyle="caption"
+      />
+    </div>
+
+    <div class="style-group">
+      <label>Headline Text</label>
+      <AutogrowTextView
+        v-model:text="headlineText"
+        placeholder="Headline style text..."
+        fontStyle="headline"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.font-styles {
+  max-width: 600px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.style-group {
+  margin-bottom: 1.5rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+</style>
+```
+
+### Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const formData = ref({
+  title: "",
+  description: "",
+  notes: "",
+});
+
+const handleSubmit = () => {
+  console.log("Form submitted:", formData.value);
+  // Reset form
+  formData.value = {
+    title: "",
+    description: "",
+    notes: "",
+  };
+};
+</script>
+
+<template>
+  <div class="form-example">
+    <h3>Create Post</h3>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label>Title</label>
+        <input
+          v-model="formData.title"
+          type="text"
+          placeholder="Enter post title"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Description</label>
+        <AutogrowTextView
+          v-model:text="formData.description"
+          placeholder="Enter post description..."
+          fontStyle="body"
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Notes (Optional)</label>
+        <AutogrowTextView
+          v-model:text="formData.notes"
+          placeholder="Add any additional notes..."
+          fontStyle="caption"
+        />
+      </div>
+
+      <button type="submit">Create Post</button>
+    </form>
+  </div>
+</template>
+
+<style module>
+.form-example {
+  max-width: 600px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+
+input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+button {
+  padding: 0.75rem 1.5rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+</style>
+```
+
+### Comment System
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const newComment = ref("");
+const comments = ref([
+  {
+    id: 1,
+    text: "This is a great article!",
+    author: "John Doe",
+    timestamp: "2 hours ago",
+  },
+  {
+    id: 2,
+    text: "I learned a lot from this. Thank you for sharing!",
+    author: "Jane Smith",
+    timestamp: "1 hour ago",
+  },
+]);
+
+const addComment = () => {
+  if (newComment.value.trim()) {
+    comments.value.push({
+      id: comments.value.length + 1,
+      text: newComment.value,
+      author: "Current User",
+      timestamp: "Just now",
+    });
+    newComment.value = "";
+  }
+};
+</script>
+
+<template>
+  <div class="comment-system">
+    <h3>Comments</h3>
+
+    <div class="comments-list">
+      <div v-for="comment in comments" :key="comment.id" class="comment">
+        <div class="comment-header">
+          <strong>{{ comment.author }}</strong>
+          <span class="timestamp">{{ comment.timestamp }}</span>
+        </div>
+        <p class="comment-text">{{ comment.text }}</p>
+      </div>
+    </div>
+
+    <div class="add-comment">
+      <AutogrowTextView
+        v-model:text="newComment"
+        placeholder="Add a comment..."
+        fontStyle="body"
+        @onBlur="() => console.log('Comment input lost focus')"
+      />
+      <button @click="addComment" :disabled="!newComment.trim()">
+        Add Comment
+      </button>
+    </div>
+  </div>
+</template>
+
+<style module>
+.comment-system {
+  max-width: 600px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.comments-list {
+  margin-bottom: 1.5rem;
+}
+
+.comment {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.timestamp {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.comment-text {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.add-comment {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 1rem;
+}
+
+button {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### Notes App
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const notes = ref([
+  {
+    id: 1,
+    title: "Meeting Notes",
+    content: "Discuss project timeline and deliverables for Q1.",
+    lastModified: "2024-01-15",
+  },
+  {
+    id: 2,
+    title: "Ideas",
+    content:
+      "New feature ideas for the mobile app:\n- Dark mode\n- Offline support\n- Push notifications",
+    lastModified: "2024-01-14",
+  },
+]);
+
+const newNote = ref({
+  title: "",
+  content: "",
+});
+
+const addNote = () => {
+  if (newNote.value.title.trim() && newNote.value.content.trim()) {
+    notes.value.push({
+      id: notes.value.length + 1,
+      title: newNote.value.title,
+      content: newNote.value.content,
+      lastModified: new Date().toISOString().split("T")[0],
+    });
+    newNote.value = { title: "", content: "" };
+  }
+};
+</script>
+
+<template>
+  <div class="notes-app">
+    <h3>My Notes</h3>
+
+    <div class="notes-list">
+      <div v-for="note in notes" :key="note.id" class="note">
+        <h4>{{ note.title }}</h4>
+        <p class="note-content">{{ note.content }}</p>
+        <span class="note-date">{{ note.lastModified }}</span>
+      </div>
+    </div>
+
+    <div class="add-note">
+      <h4>Add New Note</h4>
+
+      <div class="note-form">
+        <input
+          v-model="newNote.title"
+          type="text"
+          placeholder="Note title"
+          class="note-title"
+        />
+
+        <AutogrowTextView
+          v-model:text="newNote.content"
+          placeholder="Write your note here..."
+          fontStyle="body"
+        />
+
+        <button
+          @click="addNote"
+          :disabled="!newNote.title.trim() || !newNote.content.trim()"
+        >
+          Add Note
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.notes-app {
+  max-width: 700px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.notes-list {
+  margin-bottom: 2rem;
+}
+
+.note {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border-left: 4px solid #007bff;
+}
+
+.note h4 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.note-content {
+  margin: 0 0 0.5rem 0;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+.note-date {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.add-note {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 1.5rem;
+}
+
+.note-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.note-title {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+button {
+  padding: 0.75rem 1rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### Custom Styling
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowTextView } from "@umbra-ui/core";
+
+const customText = ref("");
+</script>
+
+<template>
+  <div class="custom-styling">
+    <h3>Custom Styled AutogrowTextView</h3>
+
+    <div class="custom-container">
+      <AutogrowTextView
+        v-model:text="customText"
+        placeholder="This textarea has custom styling..."
+        fontStyle="body"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.custom-styling {
+  max-width: 500px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.custom-container {
+  /* Override CSS custom properties for custom styling */
+  --autogrow-bg: #f0f8ff;
+  --autogrow-border: #4a90e2;
+  --autogrow-focus-border: #2c5aa0;
+  --autogrow-text-color: #1a365d;
+  --autogrow-placeholder-color: rgba(26, 54, 93, 0.6);
+  --autogrow-padding: 1.5rem;
+  --autogrow-border-radius: 12px;
+}
+</style>
+```
+
+## Notes
+
+- The component automatically adjusts its height based on content using the `autosize` library
+- The textarea is not resizable by the user (resize: none)
+- The component includes smooth border color transitions on focus
+- The entire container is clickable to focus the textarea
+- The component supports v-model binding with the `text` prop
+- Font styling can be customized through the `fontStyle` prop
+- The component includes proper cleanup of the autosize functionality on unmount
+- The component supports both light and dark themes through CSS custom properties
+- The component is fully accessible and supports keyboard navigation
+- The autosize functionality is automatically updated when the text prop changes externally

package/src/components/inputs/AutogrowTextView/theme.css

@@ -0,0 +1,28 @@
+/* Light theme */
+:root {
+  /* AutogrowTextView colors - using primary/default values from original */
+  --autogrow-bg: #ffffff;
+  --autogrow-border: #d9d9d9;
+  --autogrow-focus-border: #0090ff;
+  --autogrow-text-color: #202020;
+  --autogrow-placeholder-color: rgba(26, 29, 35, 0.5);
+
+  /* Customizable properties */
+  --autogrow-padding: 1.176rem;
+  --autogrow-border-radius: 0.706rem;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* AutogrowTextView colors - using primary/default values from original */
+  --autogrow-bg: #484848;
+  --autogrow-border: #606060;
+  --autogrow-focus-border: #0090ff;
+  --autogrow-text-color: #eeeeee;
+  --autogrow-placeholder-color: rgba(238, 238, 238, 0.5);
+
+  /* Customizable properties */
+  --autogrow-padding: 1.176rem;
+  --autogrow-border-radius: 0.706rem;
+}