mosuk-ui 1.0.1

package/styles/utilities/inputs/textarea.css

@@ -0,0 +1,475 @@
+@reference "tailwindcss";
+
+/* ! Sizes */
+@utility textarea-xs {
+    width: 100%;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: var(--radius-2xl, 1rem);
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+ 
+@utility textarea-sm {
+    width: 100%;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.875rem;
+    border-radius: var(--radius-2xl, 1rem);
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+
+@utility textarea-base {
+    width: 100%;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: var(--radius-2xl, 1rem);
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+
+@utility textarea-md {
+    width: 100%;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: var(--radius-2xl, 1rem);
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+
+@utility textarea-lg {
+    width: 100%;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: var(--radius-2xl, 1rem);
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+
+/* ! Styles */
+@utility textarea-transparent-black {
+    background-color: transparent;
+    color: var(--color-black);    
+}
+
+@utility textarea-transparent-red-500 {
+    background-color: transparent;
+    color: var(--color-red-500);    
+}
+
+@utility textarea-transparent-orange-500 {
+    background-color: transparent;
+    color: var(--color-orange-500);    
+}
+
+@utility textarea-transparent-yellow-500 {
+    background-color: transparent;
+    color: var(--color-yellow-500);    
+}
+
+@utility textarea-transparent-green-500 {
+    background-color: transparent;
+    color: var(--color-green-500);    
+}
+
+@utility textarea-transparent-primary-500 {
+    background-color: transparent;
+    color: var(--color-primary-500);    
+}
+
+@utility textarea-outline-gray-100 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-100);    
+}
+
+@utility textarea-outline-gray-200 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-200);    
+}
+
+@utility textarea-outline-gray-300 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-300);    
+}
+
+@utility textarea-outline-gray-400 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-400);    
+}
+
+@utility textarea-outline-gray-500 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-500);    
+}
+
+@utility textarea-outline-gray-600 {
+    background-color: white;
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-600);    
+}
+
+@utility textarea-outline-red-100 {
+    background-color: white;
+    color: var(--color-red-500);
+    border: 1px solid var(--color-red-100);    
+}
+
+@utility textarea-outline-red-200 {
+    background-color: white;
+    color: var(--color-red-500);
+    border: 1px solid var(--color-red-200);    
+}
+
+@utility textarea-outline-red-300 {
+    background-color: white;
+    color: var(--color-red-500);
+    border: 1px solid var(--color-red-300);    
+}
+
+@utility textarea-outline-red-400 {
+    background-color: white;
+    color: var(--color-red-500);
+    border: 1px solid var(--color-red-400);    
+}
+
+@utility textarea-outline-red-500 {
+    background-color: white;
+    color: var(--color-red-500);
+    border: 1px solid var(--color-red-500);    
+}
+
+@utility textarea-outline-red-600 {
+    background-color: white;
+    color: var(--color-red-600);
+    border: 1px solid var(--color-red-600);    
+}
+
+@utility textarea-outline-orange-100 {
+    background-color: white;
+    color: var(--color-orange-500);
+    border: 1px solid var(--color-orange-100);    
+}
+
+@utility textarea-outline-orange-200 {
+    background-color: white;
+    color: var(--color-orange-500);
+    border: 1px solid var(--color-orange-200);    
+}
+
+@utility textarea-outline-orange-300 {
+    background-color: white;
+    color: var(--color-orange-500);
+    border: 1px solid var(--color-orange-300);    
+}
+
+@utility textarea-outline-orange-400 {
+    background-color: white;
+    color: var(--color-orange-500);
+    border: 1px solid var(--color-orange-400);    
+}
+
+@utility textarea-outline-orange-500 {
+    background-color: white;
+    color: var(--color-orange-500);
+    border: 1px solid var(--color-orange-500);    
+}
+
+@utility textarea-outline-orange-600 {
+    background-color: white;
+    color: var(--color-orange-600);
+    border: 1px solid var(--color-orange-600);    
+}
+
+@utility textarea-outline-yellow-100 {
+    background-color: white;
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-100);    
+}
+
+@utility textarea-outline-yellow-200 {
+    background-color: white;
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-200);    
+}
+
+@utility textarea-outline-yellow-300 {
+    background-color: white;
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-300);    
+}
+
+@utility textarea-outline-yellow-400 {
+    background-color: white;
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-400);    
+}
+
+@utility textarea-outline-yellow-500 {
+    background-color: white;
+    color: var(--color-yellow-500);
+    border: 1px solid var(--color-yellow-500);    
+}
+
+@utility textarea-outline-yellow-600 {
+    background-color: white;
+    color: var(--color-yellow-600);
+    border: 1px solid var(--color-yellow-600);    
+}
+
+@utility textarea-outline-green-100 {
+    background-color: white;
+    color: var(--color-green-500);
+    border: 1px solid var(--color-green-100);    
+}
+
+@utility textarea-outline-green-200 {
+    background-color: white;
+    color: var(--color-green-500);
+    border: 1px solid var(--color-green-200);    
+}
+
+@utility textarea-outline-green-300 {
+    background-color: white;
+    color: var(--color-green-500);
+    border: 1px solid var(--color-green-300);    
+}
+
+@utility textarea-outline-green-400 {
+    background-color: white;
+    color: var(--color-green-500);
+    border: 1px solid var(--color-green-400);    
+}
+
+@utility textarea-outline-green-500 {
+    background-color: white;
+    color: var(--color-green-500);
+    border: 1px solid var(--color-green-500);    
+}
+
+@utility textarea-outline-green-600 {
+    background-color: white;
+    color: var(--color-green-600);
+    border: 1px solid var(--color-green-600);    
+}
+
+@utility textarea-outline-primary-100 {
+    background-color: white;
+    color: var(--color-primary-500);
+    border: 1px solid var(--color-primary-100);    
+}
+
+@utility textarea-outline-primary-200 {
+    background-color: white;
+    color: var(--color-primary-500);
+    border: 1px solid var(--color-primary-200);    
+}
+
+@utility textarea-outline-primary-300 {
+    background-color: white;
+    color: var(--color-primary-500);
+    border: 1px solid var(--color-primary-300);    
+}
+
+@utility textarea-outline-primary-400 {
+    background-color: white;
+    color: var(--color-primary-500);
+    border: 1px solid var(--color-primary-400);    
+}
+
+@utility textarea-outline-primary-500 {
+    background-color: white;
+    color: var(--color-primary-500);
+    border: 1px solid var(--color-primary-500);    
+}
+
+@utility textarea-outline-primary-600 {
+    background-color: white;
+    color: var(--color-primary-600);
+    border: 1px solid var(--color-primary-600);    
+}
+
+@utility textarea-fill-gray-100 {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-700);    
+}
+
+@utility textarea-fill-gray-200 {
+    background-color: var(--color-gray-200);
+    color: var(--color-gray-900);    
+}
+
+@utility textarea-fill-gray-300 {
+    background-color: var(--color-gray-300);
+    color: var(--color-black);    
+}
+
+@utility textarea-fill-gray-400 {
+    background-color: var(--color-gray-400);
+    color: white;    
+}
+
+@utility textarea-fill-gray-500 {
+    background-color: var(--color-gray-500);
+    color: white;    
+}
+
+@utility textarea-fill-gray-600 {
+    background-color: var(--color-gray-600);
+    color: white;    
+}
+
+@utility textarea-fill-red-100 {
+    background-color: var(--color-red-100);
+    color: var(--color-red-500);    
+}
+
+@utility textarea-fill-red-200 {
+    background-color: var(--color-red-200);
+    color: var(--color-red-700);    
+}
+
+@utility textarea-fill-red-300 {
+    background-color: var(--color-red-300);
+    color: var(--color-red-900);    
+}
+
+@utility textarea-fill-red-400 {
+    background-color: var(--color-red-400);
+    color: white;    
+}
+
+@utility textarea-fill-red-500 {
+    background-color: var(--color-red-500);
+    color: white;    
+}
+
+@utility textarea-fill-red-600 {
+    background-color: var(--color-red-600);
+    color: white;    
+}
+
+@utility textarea-fill-orange-100 {
+    background-color: var(--color-orange-100);
+    color: var(--color-orange-500);
+}
+
+@utility textarea-fill-orange-200 {
+    background-color: var(--color-orange-200);
+    color: var(--color-orange-700);
+}
+
+@utility textarea-fill-orange-300 {
+    background-color: var(--color-orange-300);
+    color: var(--color-orange-900);
+}
+
+@utility textarea-fill-orange-400 {
+    background-color: var(--color-orange-400);
+    color: white;
+}
+
+@utility textarea-fill-orange-500 {
+    background-color: var(--color-orange-500);
+    color: white;
+}
+
+@utility textarea-fill-orange-600 {
+    background-color: var(--color-orange-600);
+    color: white;
+}
+
+@utility textarea-fill-yellow-100 {
+    background-color: var(--color-yellow-100);
+    color: var(--color-yellow-500);
+}
+
+@utility textarea-fill-yellow-200 {
+    background-color: var(--color-yellow-200);
+    color: var(--color-yellow-700);
+}
+
+@utility textarea-fill-yellow-300 {
+    background-color: var(--color-yellow-300);
+    color: var(--color-yellow-900);
+}
+
+@utility textarea-fill-yellow-400 {
+    background-color: var(--color-yellow-400);
+    color: white;
+}
+
+@utility textarea-fill-yellow-500 {
+    background-color: var(--color-yellow-500);
+    color: white;
+}
+
+@utility textarea-fill-yellow-600 {
+    background-color: var(--color-yellow-600);
+    color: white;
+}
+
+@utility textarea-fill-green-100 {
+    background-color: var(--color-green-100);
+    color: var(--color-green-500);
+}
+
+@utility textarea-fill-green-200 {
+    background-color: var(--color-green-200);
+    color: var(--color-green-700);
+}
+
+@utility textarea-fill-green-300 {
+    background-color: var(--color-green-300);
+    color: var(--color-green-900);
+}
+
+@utility textarea-fill-green-400 {
+    background-color: var(--color-green-400);
+    color: white;
+}
+
+@utility textarea-fill-green-500 {
+    background-color: var(--color-green-500);
+    color: white;
+}
+
+@utility textarea-fill-green-600 {
+    background-color: var(--color-green-600);
+    color: white;
+}
+
+@utility textarea-fill-primary-100 {
+    background-color: var(--color-primary-100);
+    color: var(--color-primary-500);
+}
+
+@utility textarea-fill-primary-200 {
+    background-color: var(--color-primary-200);
+    color: var(--color-primary-700);
+}
+
+@utility textarea-fill-primary-300 {
+    background-color: var(--color-primary-300);
+    color: var(--color-primary-900);
+}
+
+@utility textarea-fill-primary-400 {
+    background-color: var(--color-primary-400);
+    color: white;
+}
+
+@utility textarea-fill-primary-500 {
+    background-color: var(--color-primary-500);
+    color: white;
+}
+
+@utility textarea-fill-primary-600 {
+    background-color: var(--color-primary-600);
+    color: white;
+}

package/styles/utilities/scrollbars/scrollbar.css

@@ -0,0 +1,32 @@
+/* ! Scrollbar */
+@utility scrollbar-0 {
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+}
+
+@utility scrollbar-1 {
+    &::-webkit-scrollbar {
+        width: calc(var(--spacing, .25rem) * 1);
+    }
+}
+
+@utility scrollbar-2 {
+    &::-webkit-scrollbar {
+        width: calc(var(--spacing, .25rem) * 2);
+    }
+}
+
+@utility scrollbar-3 {
+    &::-webkit-scrollbar {
+        width: calc(var(--spacing, .25rem) * 3);
+    }
+}
+
+@utility scrollbar-4 {
+    &::-webkit-scrollbar {
+        width: calc(var(--spacing, .25rem) * 4);
+    }
+}

package/utilities/date/date/util.d.ts

@@ -0,0 +1,7 @@
+interface FormatDateOptions {
+    days?: boolean;
+    months?: boolean;
+    years?: boolean;
+}
+export declare function date(date: string, options?: FormatDateOptions): string | null;
+export {};

package/utilities/date/date/util.js

@@ -0,0 +1,18 @@
+import { format, isValid, parseISO } from 'date-fns';
+import { ru } from 'date-fns/locale';
+export function date(date, options) {
+    if (options === void 0) { options = {}; }
+    try {
+        if (!date)
+            return null;
+        var parsedDate = parseISO(date);
+        if (!isValid(parsedDate))
+            return null;
+        var _a = options.days, days = _a === void 0 ? true : _a, _b = options.months, months = _b === void 0 ? true : _b, _c = options.years, years = _c === void 0 ? true : _c;
+        var formatTemplate = "".concat(days ? 'd' : '').concat(days && months ? ' ' : '').concat(months ? 'MMMM' : '').concat((months && years) || (!months && years) ? ' ' : '').concat(years ? 'yyyy' : '');
+        return format(parsedDate, formatTemplate.trim(), { locale: ru });
+    }
+    catch (_d) {
+        return null;
+    }
+}

package/utilities/date/full/util.d.ts

@@ -0,0 +1,7 @@
+interface FormatDateTimeOptions {
+    days?: boolean;
+    months?: boolean;
+    years?: boolean;
+}
+export declare function full(date: string, options?: FormatDateTimeOptions): string | null;
+export {};

package/utilities/date/full/util.js

@@ -0,0 +1,18 @@
+import { format, isValid, parseISO } from 'date-fns';
+import { ru } from 'date-fns/locale';
+export function full(date, options) {
+    if (options === void 0) { options = {}; }
+    try {
+        if (!date)
+            return null;
+        var parsedDate = parseISO(date);
+        if (!isValid(parsedDate))
+            return null;
+        var _a = options.days, days = _a === void 0 ? true : _a, _b = options.months, months = _b === void 0 ? true : _b, _c = options.years, years = _c === void 0 ? true : _c;
+        var formatTemplate = "".concat(days ? 'd' : '').concat(days && months ? ' ' : '').concat(months ? 'MMMM' : '').concat((months && years) || (!months && years) ? ' ' : '').concat(years ? 'yyyy' : '', " \u0432 HH:mm");
+        return format(parsedDate, formatTemplate.trim(), { locale: ru });
+    }
+    catch (_d) {
+        return null;
+    }
+}

package/utilities/date/index.d.ts

@@ -0,0 +1,8 @@
+import { date as dateUtil } from './date/util';
+import { full } from './full/util';
+import { time } from './time/util';
+export declare const date: {
+    time: typeof time;
+    date: typeof dateUtil;
+    full: typeof full;
+};

package/utilities/date/index.js

@@ -0,0 +1,8 @@
+import { date as dateUtil } from './date/util';
+import { full } from './full/util';
+import { time } from './time/util';
+export var date = {
+    time: time,
+    date: dateUtil,
+    full: full
+};

package/utilities/date/time/util.d.ts

@@ -0,0 +1 @@
+export declare function time(date: string): string | null;

package/utilities/date/time/util.js

@@ -0,0 +1,15 @@
+import { format, isValid, parseISO } from 'date-fns';
+import { ru } from 'date-fns/locale';
+export function time(date) {
+    try {
+        if (!date)
+            return null;
+        var parsedDate = parseISO(date);
+        if (!isValid(parsedDate))
+            return null;
+        return format(parsedDate, 'HH:mm', { locale: ru });
+    }
+    catch (_a) {
+        return null;
+    }
+}

package/utilities/email/format/util.d.ts

@@ -0,0 +1 @@
+export declare function format(email: string): string | null;

package/utilities/email/format/util.js

@@ -0,0 +1,13 @@
+export function format(email) {
+    try {
+        if (!email)
+            return null;
+        var cleaned = email.trim().toLowerCase();
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(cleaned))
+            return null;
+        return cleaned;
+    }
+    catch (_a) {
+        return null;
+    }
+}

package/utilities/email/index.d.ts

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export declare const email: {
+    format: typeof format;
+};

package/utilities/email/index.js

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export var email = {
+    format: format,
+};

package/utilities/phone/format/util.d.ts

@@ -0,0 +1 @@
+export declare function format(phone: string | number): string | null;

package/utilities/phone/format/util.js

@@ -0,0 +1,27 @@
+export function format(phone) {
+    try {
+        if (!phone)
+            return null;
+        var cleaned = String(phone).replace(/\D/g, '');
+        var normalizedNumber = void 0;
+        if (cleaned.length === 11) {
+            normalizedNumber = cleaned.startsWith('8')
+                ? '7' + cleaned.slice(1)
+                : cleaned;
+        }
+        else if (cleaned.length === 10) {
+            normalizedNumber = '7' + cleaned;
+        }
+        else {
+            return null;
+        }
+        var match = normalizedNumber.match(/^(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})$/);
+        if (match) {
+            return "+".concat(match[1], " (").concat(match[2], ") ").concat(match[3], "-").concat(match[4], "-").concat(match[5]);
+        }
+        return null;
+    }
+    catch (_a) {
+        return null;
+    }
+}

package/utilities/phone/index.d.ts

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export declare const phone: {
+    format: typeof format;
+};

package/utilities/phone/index.js

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export var phone = {
+    format: format,
+};

package/utilities/price/format/util.d.ts

@@ -0,0 +1 @@
+export declare function format(price: number | null | undefined, currency: string, separator?: string): string;

package/utilities/price/format/util.js

@@ -0,0 +1,10 @@
+export function format(price, currency, separator) {
+    if (price === null || price === undefined || price <= 0) {
+        return 'Цена не указана';
+    }
+    var roundedPrice = Math.round(price);
+    var formattedPrice = roundedPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator || ' ') +
+        ' ' +
+        (currency || '₽');
+    return formattedPrice;
+}

package/utilities/price/index.d.ts

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export declare const price: {
+    format: typeof format;
+};

package/utilities/price/index.js

@@ -0,0 +1,4 @@
+import { format } from './format/util';
+export var price = {
+    format: format,
+};