@kashi-ui/css 0.0.0-stage → 0.3.0

package/dist/components/card.css

@@ -0,0 +1,77 @@
+/* کارت
+ * <article class="k-card">
+ *   <header class="k-card__header">
+ *     <h3 class="k-card__title">عنوان</h3>
+ *     <p class="k-card__description">توضیح</p>
+ *   </header>
+ *   <div class="k-card__body">...</div>
+ *   <footer class="k-card__footer">...دکمه‌ها</footer>
+ * </article>
+ * گونه‌ها: k-card--flat (بدون سایه) | k-card--interactive (برای کارت قابل‌کلیک، همراه با <a> یا <button>)
+ *
+ * متغیرها: --k-card-padding  --k-card-radius  --k-card-bg  --k-card-border  --k-card-shadow
+ */
+.k-card {
+  --_p: var(--k-card-padding, calc(1.5rem * var(--k-density)));
+
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--k-card-border, var(--k-border-secondary));
+  border-radius: var(--k-card-radius, var(--k-radius-xl));
+  background: var(--k-card-bg, var(--k-bg-elevated));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-card-shadow, var(--k-shadow-xs));
+  overflow: clip;
+}
+
+.k-card__header,
+.k-card__body,
+.k-card__footer { padding: var(--_p); }
+
+.k-card__header + .k-card__body { padding-block-start: 0; }
+
+.k-card__header { display: grid; gap: var(--k-space-1); }
+
+.k-card__title {
+  margin: 0;
+  font-size: var(--k-text-lg);
+  font-weight: var(--k-weight-semibold);
+  line-height: var(--k-leading-tight);
+}
+
+.k-card__description {
+  margin: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+}
+
+.k-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--k-space-3);
+  justify-content: flex-end;
+  padding-block: calc(var(--_p) * 0.66);
+  border-block-start: 1px solid var(--k-border-secondary);
+  margin-block-start: auto;
+}
+
+.k-card__media { display: block; inline-size: 100%; object-fit: cover; }
+
+.k-card--flat { box-shadow: none; }
+
+.k-card--interactive {
+  position: relative;
+  transition:
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-normal) var(--k-ease-standard);
+}
+.k-card--interactive:hover { border-color: var(--k-border-primary); box-shadow: var(--k-shadow-md); }
+.k-card--interactive:has(:focus-visible) { box-shadow: var(--k-shadow-md), var(--k-ring-brand); }
+/* لینک اصلی کل کارت را قابل‌کلیک می‌کند ولی فقط یک توقف Tab دارد */
+.k-card--interactive :is(a, button).k-card__link::after { content: ""; position: absolute; inset: 0; }
+.k-card--interactive .k-card__link:focus-visible { outline: none; }
+
+@media (forced-colors: active) {
+  .k-card { border-color: CanvasText; }
+  .k-card--interactive:has(:focus-visible) { outline: 2px solid Highlight; }
+}

package/dist/components/checkbox.css

@@ -0,0 +1,93 @@
+/* چک‌باکس — روی <input type="checkbox"> بومی، پس کیبورد و صفحه‌خوان خودکار کار می‌کنند
+ * <label class="k-check">
+ *   <input type="checkbox" class="k-checkbox">
+ *   <span class="k-check__text">
+ *     <span class="k-check__label">مرا به خاطر بسپار</span>
+ *     <span class="k-check__description">توضیح اختیاری</span>
+ *   </span>
+ * </label>
+ * حالت نیمه: input.indeterminate = true — خطا: aria-invalid="true" — اندازه: k-checkbox--lg
+ *
+ * متغیرها: --k-checkbox-size  --k-checkbox-radius
+ */
+.k-checkbox {
+  --_s: var(--k-checkbox-size, 1.125rem);
+  --_border: var(--k-border-input);
+
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_s);
+  block-size: var(--_s);
+  margin: 0;
+  border: 1px solid var(--_border);
+  border-radius: var(--k-checkbox-radius, calc(0.3125rem * var(--k-radius-factor)));
+  background: var(--k-bg-primary);
+  color: var(--k-text-on-brand);
+  cursor: pointer;
+  transition:
+    background-color var(--k-duration-fast) var(--k-ease-standard),
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-checkbox::before {
+  content: "";
+  inline-size: calc(var(--_s) * 0.7);
+  block-size: calc(var(--_s) * 0.7);
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5 5.5 10 2.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
+  scale: 0;
+  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
+}
+.k-checkbox:indeterminate::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
+}
+
+.k-checkbox:hover { --_border: var(--k-border-brand); }
+
+.k-checkbox:is(:checked, :indeterminate) {
+  --_border: var(--k-bg-brand);
+  background: var(--k-bg-brand);
+}
+.k-checkbox:is(:checked, :indeterminate)::before { scale: 1; }
+
+.k-checkbox:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--k-ring-brand);
+}
+
+.k-checkbox[aria-invalid="true"] { --_border: var(--k-border-error); }
+.k-checkbox[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }
+
+.k-checkbox:disabled {
+  --_border: var(--k-border-secondary);
+  background: var(--k-bg-tertiary);
+  color: var(--k-text-quaternary);
+  cursor: not-allowed;
+}
+
+.k-checkbox--lg { --_s: var(--k-checkbox-size, 1.25rem); }
+
+/* ردیف برچسب — مشترک بین چک‌باکس و سوییچ */
+.k-check {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--k-space-2);
+  cursor: pointer;
+  /* ارتفاع خط متن با کنترل هم‌تراز شود */
+  line-height: 1.25rem;
+}
+.k-check > :is(.k-checkbox, .k-switch) { margin-block-start: calc((1.25rem - var(--_h, var(--_s))) / 2); }
+.k-check:has(:disabled) { cursor: not-allowed; }
+.k-check__text { display: grid; gap: 0.125rem; }
+.k-check__label { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
+.k-check__description { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
+.k-check:has(:disabled) .k-check__label { color: var(--k-text-quaternary); }
+
+/* حالت کنتراست بالای ویندوز: برگشت به کنترل بومی سیستم */
+@media (forced-colors: active) {
+  .k-checkbox { appearance: auto; }
+  .k-checkbox::before { display: none; }
+}

package/dist/components/field.css

@@ -0,0 +1,29 @@
+/* فیلد: برچسب + کنترل + راهنما/خطا — مشترک بین Input، Checkbox و Switch
+ * <div class="k-field">
+ *   <label class="k-label" for="email">ایمیل <span class="k-label__required" aria-hidden="true">*</span></label>
+ *   ...کنترل...
+ *   <p class="k-hint" id="email-hint">راهنما</p>
+ *   <p class="k-hint k-hint--error" id="email-error">خطا</p>
+ * </div>
+ */
+.k-field {
+  display: grid;
+  gap: var(--k-field-gap, var(--k-space-1_5));
+  min-inline-size: 0;
+}
+
+.k-label {
+  color: var(--k-text-secondary);
+  font-size: var(--k-text-sm);
+  font-weight: var(--k-weight-medium);
+  line-height: var(--k-leading-tight);
+}
+.k-label__required { color: var(--k-text-error); margin-inline-start: 0.125em; }
+
+.k-hint {
+  margin: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  line-height: var(--k-leading-tight);
+}
+.k-hint--error { color: var(--k-text-error); }

package/dist/components/input.css

@@ -0,0 +1,97 @@
+/* ورودی متن
+ * <div class="k-input">
+ *   <span class="k-input__addon">svg یا متن</span>
+ *   <input class="k-input__control" id="email" aria-describedby="email-hint">
+ * </div>
+ * خطا: aria-invalid="true" روی input — اندازه‌ها: k-input--sm | k-input--lg
+ *
+ * متغیرها: --k-input-height-{sm,md,lg}  --k-input-radius  --k-input-bg  --k-input-border
+ */
+.k-input {
+  --_h: var(--k-input-height-md, calc(2.75rem * var(--k-density)));
+  --_border: var(--k-input-border, var(--k-border-input));
+  --_ring: var(--k-ring-brand);
+
+  display: flex;
+  align-items: center;
+  gap: var(--k-space-2);
+  min-block-size: var(--_h);
+  padding-inline: calc(0.875rem * var(--k-density));
+  border: 1px solid var(--_border);
+  border-radius: var(--k-input-radius, var(--k-radius-md));
+  background: var(--k-input-bg, var(--k-bg-primary));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-shadow-xs);
+  cursor: text;
+  transition:
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-input:focus-within {
+  --_border: var(--k-border-brand);
+  box-shadow: var(--k-shadow-xs), var(--_ring);
+  /* forced-colors */
+  outline: 2px solid transparent;
+}
+
+.k-input:has(.k-input__control[aria-invalid="true"]) {
+  --_border: var(--k-border-error);
+  --_ring: var(--k-ring-error);
+}
+
+.k-input:has(.k-input__control:disabled) {
+  background: var(--k-bg-secondary);
+  border-color: var(--k-border-secondary);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.k-input__control {
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--k-text-md);
+}
+.k-input__control::placeholder { color: var(--k-text-tertiary); opacity: 1; }
+.k-input__control:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
+
+/* ایمیل، آدرس، شماره و رمز همیشه چپ‌به‌راست تایپ می‌شوند */
+.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [dir="ltr"]) {
+  direction: ltr;
+  text-align: end;
+}
+.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
+  direction: rtl;
+  text-align: start;
+}
+[dir="ltr"] .k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
+  direction: ltr;
+}
+
+.k-input__addon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-md);
+}
+.k-input__addon svg { inline-size: 1.25rem; block-size: 1.25rem; }
+
+/* چندخطی */
+.k-input--textarea { align-items: stretch; padding-block: calc(0.625rem * var(--k-density)); }
+.k-input--textarea .k-input__control { min-block-size: 5lh; resize: vertical; line-height: var(--k-leading-normal); }
+
+.k-input--sm { --_h: var(--k-input-height-sm, calc(2.5rem * var(--k-density))); }
+.k-input--lg { --_h: var(--k-input-height-lg, calc(3rem * var(--k-density))); }
+
+@media (forced-colors: active) {
+  .k-input { border-color: FieldText; }
+  .k-input:focus-within { outline-color: Highlight; }
+}

package/dist/components/switch.css

@@ -0,0 +1,69 @@
+/* سوییچ — روی <input type="checkbox" role="switch"> بومی
+ * <label class="k-check">
+ *   <input type="checkbox" role="switch" class="k-switch">
+ *   <span class="k-check__text"><span class="k-check__label">اعلان‌ها</span></span>
+ * </label>
+ * در RTL دکمهٔ سوییچ در حالت روشن به چپ می‌رود (خودکار با Logical Properties)
+ * اندازه‌ها: k-switch--sm | k-switch--lg
+ *
+ * متغیرها: --k-switch-width  --k-switch-height  --k-switch-track-on  --k-switch-track-off  --k-switch-thumb
+ */
+.k-switch {
+  --_w: var(--k-switch-width, 2.25rem);
+  --_h: var(--k-switch-height, 1.25rem);
+  --_pad: 2px;
+  --_track: var(--k-switch-track-off, var(--k-border-input));
+
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_w);
+  block-size: var(--_h);
+  margin: 0;
+  padding: var(--_pad);
+  border: 0;
+  border-radius: var(--k-radius-full);
+  background: var(--_track);
+  cursor: pointer;
+  transition:
+    background-color var(--k-duration-normal) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-switch::before {
+  content: "";
+  inline-size: calc(var(--_h) - var(--_pad) * 2);
+  block-size: calc(var(--_h) - var(--_pad) * 2);
+  border-radius: var(--k-radius-full);
+  background: var(--k-switch-thumb, #fff);
+  box-shadow: var(--k-shadow-sm);
+  transition: margin-inline-start var(--k-duration-normal) var(--k-ease-emphasized);
+}
+
+.k-switch:hover { --_track: color-mix(in srgb, var(--k-switch-track-off, var(--k-border-input)), var(--k-text-primary) 12%); }
+
+.k-switch:checked { --_track: var(--k-switch-track-on, var(--k-bg-brand)); }
+.k-switch:checked:hover { --_track: var(--k-switch-track-on, var(--k-bg-brand-hover)); }
+.k-switch:checked::before { margin-inline-start: calc(var(--_w) - var(--_h)); }
+
+.k-switch:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--k-ring-brand);
+}
+
+.k-switch:disabled {
+  --_track: var(--k-bg-tertiary);
+  cursor: not-allowed;
+}
+.k-switch:disabled::before { background: var(--k-bg-secondary); box-shadow: none; }
+
+.k-switch--sm { --_w: var(--k-switch-width, 1.75rem); --_h: var(--k-switch-height, 1rem); }
+.k-switch--lg { --_w: var(--k-switch-width, 2.75rem); --_h: var(--k-switch-height, 1.5rem); }
+
+@media (forced-colors: active) {
+  .k-switch { border: 1px solid ButtonText; background: Canvas; }
+  .k-switch::before { background: ButtonText; forced-color-adjust: none; }
+  .k-switch:checked { background: Highlight; }
+  .k-switch:checked::before { background: HighlightText; }
+}

package/dist/font.css

@@ -0,0 +1,9 @@
+/* فونت وزیرمتن (Variable، وزن ۱۰۰ تا ۹۰۰) — لایسنس OFL */
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("./fonts/Vazirmatn.woff2") format("woff2-variations"),
+       url("./fonts/Vazirmatn.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/fonts/Vazirmatn-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2015 The Vazirmatn Project Authors (https://github.com/rastikerdar/vazirmatn)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.