django-cotton-ui 0.1.0__tar.gz

django_cotton_ui-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Will Abbott
+
+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.

django_cotton_ui-0.1.0/PKG-INFO

@@ -0,0 +1,87 @@
+Metadata-Version: 2.4
+Name: django-cotton-ui
+Version: 0.1.0
+Summary: UI component library for Django Cotton
+License: MIT
+License-File: LICENSE
+Keywords: django,components,ui,tailwind,alpine
+Author: Will Abbott
+Author-email: willabb83@gmail.com
+Requires-Python: >=3.8,<4
+Classifier: Development Status :: 3 - Alpha
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 4.2
+Classifier: Framework :: Django :: 5.0
+Classifier: Framework :: Django :: 5.1
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.8
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Programming Language :: Python :: 3.14
+Classifier: Topic :: Software Development :: Libraries :: Python Modules
+Requires-Dist: django (>=4.2,<6.0)
+Requires-Dist: django-cotton (>=2.5.0)
+Project-URL: Homepage, https://github.com/wrabit/django-cotton-ui
+Project-URL: Repository, https://github.com/wrabit/django-cotton-ui
+Description-Content-Type: text/markdown
+
+# Django Cotton UI
+
+An optional kit of accessible, themeable UI components for [Django Cotton](https://github.com/wrabit/django-cotton), built with Tailwind CSS v4 and Alpine.js.
+
+### 📖 Documentation: **[django-cotton.com/ui](https://django-cotton.com/ui)**
+
+The docs cover installation, theming and every component with live examples.
+
+## Install
+
+```bash
+pip install django-cotton-ui
+```
+
+Add it to `INSTALLED_APPS` after `django_cotton`:
+
+```python
+INSTALLED_APPS = [
+    # ...
+    "django_cotton",
+    "django_cotton_ui",
+]
+```
+
+Then wire up Tailwind v4 (scan the component templates, import the theme) and the
+Alpine bundle. See the [installation guide](https://django-cotton.com/ui/installation)
+for the full setup.
+
+## Usage
+
+Components use the `c-ui.` prefix:
+
+```django
+<c-ui.button variant="primary">Save</c-ui.button>
+<c-ui.input name="email" label="Email" placeholder="you@example.com" />
+
+<c-ui.card>
+    <h3 class="font-semibold">Title</h3>
+    <p>Content goes here.</p>
+</c-ui.card>
+```
+
+Browse the full set with live examples in the [component docs](https://django-cotton.com/ui).
+
+## Requirements
+
+- Python ≥ 3.8 · Django ≥ 4.2 · django-cotton ≥ 2.5
+- Tailwind CSS **v4** with a build step (the same setup any Tailwind project uses; the Play CDN and v3 won't work, as the kit's styles are compiled from your `@source`-scanned templates)
+- Alpine.js v3
+
+## License
+
+MIT
+

django_cotton_ui-0.1.0/README.md

@@ -0,0 +1,53 @@
+# Django Cotton UI
+
+An optional kit of accessible, themeable UI components for [Django Cotton](https://github.com/wrabit/django-cotton), built with Tailwind CSS v4 and Alpine.js.
+
+### 📖 Documentation: **[django-cotton.com/ui](https://django-cotton.com/ui)**
+
+The docs cover installation, theming and every component with live examples.
+
+## Install
+
+```bash
+pip install django-cotton-ui
+```
+
+Add it to `INSTALLED_APPS` after `django_cotton`:
+
+```python
+INSTALLED_APPS = [
+    # ...
+    "django_cotton",
+    "django_cotton_ui",
+]
+```
+
+Then wire up Tailwind v4 (scan the component templates, import the theme) and the
+Alpine bundle. See the [installation guide](https://django-cotton.com/ui/installation)
+for the full setup.
+
+## Usage
+
+Components use the `c-ui.` prefix:
+
+```django
+<c-ui.button variant="primary">Save</c-ui.button>
+<c-ui.input name="email" label="Email" placeholder="you@example.com" />
+
+<c-ui.card>
+    <h3 class="font-semibold">Title</h3>
+    <p>Content goes here.</p>
+</c-ui.card>
+```
+
+Browse the full set with live examples in the [component docs](https://django-cotton.com/ui).
+
+## Requirements
+
+- Python ≥ 3.8 · Django ≥ 4.2 · django-cotton ≥ 2.5
+- Tailwind CSS **v4** with a build step (the same setup any Tailwind project uses; the Play CDN and v3 won't work, as the kit's styles are compiled from your `@source`-scanned templates)
+- Alpine.js v3
+
+## License
+
+MIT

django_cotton_ui-0.1.0/django_cotton_ui/__init__.py

@@ -0,0 +1,3 @@
+"""Django Cotton UI - A UI component library for Django Cotton."""
+
+__version__ = "0.1.0"

django_cotton_ui-0.1.0/django_cotton_ui/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class CottonUiConfig(AppConfig):
+    name = "django_cotton_ui"
+    verbose_name = "Cotton UI"

django_cotton_ui-0.1.0/django_cotton_ui/static/cotton-ui/cotton-ui.css

@@ -0,0 +1,81 @@
+/*
+ * Cotton UI styles — the kit's single stylesheet.
+ *
+ * Import once into your Tailwind v4 entry, AFTER `@import "tailwindcss"`:
+ *
+ *     @import "tailwindcss";
+ *     @import "<path>/static/cotton-ui/cotton-ui.css";
+ *     @source "<path>/templates";
+ *
+ * One import compiles everything the components need into your CSS: the accent
+ * palette (neutral zinc by default), the component tokens (radius, surfaces,
+ * shadows, focus ring) and the Alpine `x-cloak` rule.
+ *
+ * Note: `@import` this into your Tailwind entry (it contains `@theme`); do NOT
+ * `<link>` it at runtime. To brand the kit, override --color-accent in your own
+ * @theme AFTER this import:
+ *
+ *     @theme { --color-accent: var(--color-teal-500); --color-accent-content: var(--color-teal-600); }
+ *     @layer theme { .dark { --color-accent: var(--color-teal-400); --color-accent-content: var(--color-teal-300); } }
+ */
+
+@theme {
+    --color-accent: var(--color-zinc-900);
+    --color-accent-content: var(--color-zinc-700);
+    --color-accent-foreground: var(--color-white);
+
+    /* Radius is split by role, not by size, and kept in its own namespace so it never
+       collides with Tailwind's --radius-md/-lg scale or your own rounded-* usage.
+       Declared in @theme so the `rounded-control` / `rounded-box` utilities are generated. */
+    --radius-control: 0.375rem;   /* form controls: inputs, buttons → rounded-control */
+    --radius-box: 0.5rem;         /* structural: cards, dialogs, menus → rounded-box */
+}
+
+/* The remaining component tokens live in the `theme` layer so a consumer's @theme /
+   @layer theme overrides always win (light and dark stay in the same layer, no cascade upset). */
+@layer theme {
+    :root {
+        --color-bg: var(--color-zinc-50);       /* page base */
+        --color-surface: #ffffff;               /* raised: cards, dialogs, menus */
+        --color-input-bg: transparent;          /* form fields: border-defined in light; see .dark for the lift */
+        --color-box-border: var(--color-zinc-200);  /* border for box-role surfaces (cards, dialogs, menus); set transparent for a shadow-only look. NOT inputs (see --radius-control). */
+
+        --shadow-input: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-box: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+        --focus-ring-width: 2px;
+        --focus-ring-offset: 0px;
+        --focus-ring-color: color-mix(in oklab, var(--color-accent) 50%, white);
+        --focus-ring-offset-color: #ffffff;
+    }
+
+    .dark {
+        --color-accent: var(--color-zinc-100);
+        --color-accent-content: var(--color-zinc-300);
+        --color-accent-foreground: var(--color-zinc-900);
+        --color-bg: var(--color-zinc-900);
+        --color-surface: var(--color-zinc-800);
+        --color-box-border: var(--color-zinc-700);
+        /* Inputs lift off any surface (page or card) via a translucent lighten. */
+        --color-input-bg: color-mix(in oklab, white 4%, transparent);
+        --focus-ring-offset-color: #18181b; /* zinc-900 */
+    }
+}
+
+/* Unified focus indicator. Add `focus-ring` to any interactive element for a flush,
+   translucent accent ring on keyboard focus. Uses `outline` so it follows border-radius,
+   never clashes with the element's box-shadow, and is not clipped by overflow. Themeable
+   via --focus-ring-width / --focus-ring-color / --focus-ring-offset (see the theme builder). */
+@utility focus-ring {
+    /* Solid 2px accent ring just outside the resting border, on keyboard focus.
+       The always-present transparent outline avoids a colour flash and suppresses the
+       UA default; only the colour changes on focus-visible. */
+    outline: var(--focus-ring-width) solid transparent;
+    outline-offset: var(--focus-ring-offset);
+    &:focus-visible { outline-color: var(--focus-ring-color); }
+}
+
+/* Alpine.js x-cloak */
+[x-cloak] {
+    display: none !important;
+}