@ibis-design/svelte 0.2.0 → 0.6.0

package/dist/components/inputs/textInput.css

@@ -0,0 +1,152 @@
+.ibis-input {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	width: 100%;
+	max-width: 300px;
+	max-height: 4rem;
+}
+
+.ibis-input__label {
+	font-size: var(--font-size-normal-text-default);
+	color: var(--color-neutral-700);
+}
+
+.ibis-input__label-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.ibis-input__description {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-input__wrapper {
+	display: flex;
+	align-items: stretch;
+	border-radius: var(--border-radius-lg);
+	overflow: hidden;
+	background-color: var(--color-neutral-100);
+}
+
+.ibis-input__prepend {
+	display: flex;
+	align-items: center;
+	padding: 0 var(--spacing-3);
+	border: var(--border-width-default) solid var(--color-neutral-200);
+	border-right: none;
+	border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+	position: relative;
+	white-space: nowrap;
+}
+
+.ibis-input__field-wrapper {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	border: var(--border-width-default) solid var(--color-neutral-200);
+	/* border-left: none; */
+	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+
+.ibis-input__wrapper--with-prepend .ibis-input__field-wrapper {
+	border-left: none;
+	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+
+.ibis-input__wrapper:not(.ibis-input__wrapper--with-prepend) .ibis-input__field-wrapper {
+	border-radius: var(--border-radius-lg);
+}
+
+.ibis-input__prepend::after {
+	content: '';
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	background-color: var(--color-neutral-200);
+}
+
+.ibis-input__field {
+	flex: 1;
+	width: 100%;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+}
+
+.ibis-input__prefix,
+.ibis-input__suffix {
+	display: inline-flex;
+	align-items: center;
+	padding: 0 var(--spacing-2);
+}
+
+.ibis-input__help {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-input__error {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-status-error);
+}
+
+/* sizes */
+.ibis-input--sm .ibis-input__field-wrapper {
+	padding: var(--spacing-1) var(--spacing-2);
+}
+
+.ibis-input--md .ibis-input__field-wrapper {
+	padding: var(--spacing-2);
+}
+
+.ibis-input--lg .ibis-input__field-wrapper {
+	padding: var(--spacing-3) var(--spacing-4);
+}
+
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+	.ibis-input__field-wrapper:not(:focus-within):hover {
+	border-color: var(--color-neutral-300);
+}
+
+.ibis-input__field-wrapper:focus-within {
+	border-color: var(--color-primary-400);
+}
+
+.ibis-input--invalid .ibis-input__field-wrapper {
+	border-color: var(--color-status-error);
+	border-width: var(--border-width-thin);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within)
+	.ibis-input__field-wrapper:hover {
+	border-width: var(--border-width-default);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
+	border-width: var(--border-width-default);
+}
+
+.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
+	background-color: var(--color-neutral-300);
+}
+
+.ibis-input__wrapper:focus-within .ibis-input__prepend::after {
+	background-color: var(--color-primary-400);
+}
+
+.ibis-input--invalid .ibis-input__prepend::after {
+	background-color: var(--color-status-error);
+}
+
+/* disabled */
+.ibis-input--disabled .ibis-input__prepend,
+.ibis-input--disabled .ibis-input__field-wrapper {
+	background-color: var(--color-neutral-400);
+	opacity: 0.5;
+}

package/dist/components/inputs/textarea.css

@@ -0,0 +1,91 @@
+.ibis-input {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	width: 100%;
+	max-width: 400px;
+}
+
+.ibis-input__label {
+	font-size: var(--font-size-normal-text-default);
+	color: var(--color-neutral-700);
+}
+
+.ibis-input__wrapper {
+	display: flex;
+	flex-direction: column0;
+	border-radius: var(--border-radius-lg);
+	overflow: hidden;
+	background-color: var(--color-neutral-100);
+	border: var(--border-width-default) solid var(--color-neutral-200);
+}
+
+.ibis-input__field {
+	flex: 1;
+	width: 100%;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+	font-family: var(--font-family-sans);
+	font-size: inherit;
+	resize: vertical;
+	/* min-height: 80px; */
+	line-height: 1.4;
+	display: block;
+	box-sizing: border-box;
+}
+
+.ibis-input__help {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-input__error {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-status-error);
+}
+
+/* Sizes */
+.ibis-input--sm .ibis-input__field {
+	padding: var(--spacing-1) var(--spacing-2);
+}
+
+.ibis-input--md .ibis-input__field {
+	padding: var(--spacing-2);
+}
+
+.ibis-input--lg .ibis-input__field {
+	padding: var(--spacing-3) var(--spacing-4);
+}
+
+/* Hover */
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+	.ibis-input__wrapper:not(:focus-within):hover {
+	border-color: var(--color-neutral-300);
+}
+
+/* Focus */
+.ibis-input__wrapper:focus-within {
+	border-color: var(--color-primary-400);
+}
+
+/* Invalid */
+.ibis-input--invalid .ibis-input__wrapper {
+	border-color: var(--color-status-error);
+	border-width: var(--border-width-thin);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within) .ibis-input__wrapper:hover {
+	border-width: var(--border-width-default);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:focus-within {
+	border-width: var(--border-width-default);
+}
+
+/* Disabled */
+.ibis-input--disabled .ibis-input__wrapper {
+	background-color: var(--color-neutral-400);
+	opacity: 0.5;
+}

package/dist/components/inputs/textlink.css

@@ -0,0 +1,163 @@
+.ibis-link {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-1);
+
+	color: #522398; /*hardcoded*/
+	text-decoration: none;
+	cursor: pointer;
+
+	transition:
+		color var(--transition-duration-fast) var(--transition-timing-default),
+		opacity var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+/* content */
+.ibis-link__content {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-1);
+}
+
+.ibis-link__content--hidden {
+	visibility: hidden;
+}
+
+/* sizes */
+.ibis-link--sm {
+	font-size: var(--font-size-normal-text-sm);
+}
+
+.ibis-link--md {
+	font-size: var(--font-size-normal-text-default);
+}
+
+.ibis-link--lg {
+	font-size: var(--font-size-normal-text-lg);
+}
+
+/* underline */
+.ibis-link--underline-always {
+	text-decoration: underline;
+}
+
+.ibis-link--underline-hover:hover {
+	text-decoration: underline;
+}
+
+.ibis-link--underline-none {
+	text-decoration: none;
+}
+
+/* states */
+.ibis-link:hover {
+	color: #522398; /*hardcoded*/
+}
+
+.ibis-link:active {
+	color: var(--color-primary-600);
+}
+
+.ibis-link:focus-visible {
+	outline: 2px solid #522398; /*hardcoded*/
+	outline-offset: 2px;
+}
+
+/* disabled */
+.ibis-link--disabled {
+	color: #8d8d8e; /*hardcoded*/
+	cursor: not-allowed;
+	pointer-events: none;
+	text-decoration: none;
+}
+
+/* loading */
+.ibis-link--loading {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.ibis-link__loader {
+	position: absolute;
+	width: 1em;
+	height: 1em;
+	border: var(--border-width-default) solid currentColor;
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: ibis-spin 0.8s linear infinite;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+@keyframes ibis-spin {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+/* skeleton */
+.ibis-link--skeleton {
+	position: relative;
+	overflow: hidden;
+	color: transparent;
+	cursor: default;
+	pointer-events: none;
+}
+
+.ibis-link__content--skeleton {
+	position: relative;
+	color: transparent;
+	overflow: hidden;
+}
+
+.ibis-link__content--skeleton::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background-color: var(--color-neutral-400);
+	z-index: 1;
+}
+
+.ibis-link__content--skeleton::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		90deg,
+		rgba(255, 255, 255, 0.25) 0%,
+		rgba(255, 255, 255, 0.6) 50%,
+		rgba(255, 255, 255, 0.25) 100%
+	);
+	transform: translateX(-100%);
+	animation: ibis-shimmer 2s infinite;
+	z-index: 2;
+}
+
+@keyframes ibis-shimmer {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+/* Icons */
+.ibis-link__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 0.75em;
+	height: 0.75em;
+}
+
+.ibis-link__icon :global(svg) {
+	width: 100%;
+	height: 100%;
+}

package/dist/index.d.ts

@@ -13,11 +13,24 @@
  *
  * @packageDocumentation
  */
-export { default as Button } from './lib/components/buttons/Button.svelte';
-export { default as Button2 } from './lib/components/buttons/Button.svelte';
-export { default as DropdownButton } from './lib/components/buttons/DropdownButton.svelte';
-export { default as Card } from './lib/components/containers/Card.svelte';
-export { default as AuthLayout } from './lib/layouts/AuthLayout.svelte';
-export { default as AppLayout } from './lib/layouts/AppLayout.svelte';
-export { default as DashboardLayout } from './lib/layouts/DashboardLayout.svelte';
-export * from './types/index';
+export { default as Button } from "./components/buttons/Button.svelte";
+export { default as DropdownButton } from "./components/buttons/DropdownButton.svelte";
+export { default as Card } from "./components/containers/Card.svelte";
+export { default as AuthLayout } from "./layouts/AuthLayout.svelte";
+export { default as AppLayout } from "./layouts/AppLayout.svelte";
+export { default as DashboardLayout } from "./layouts/DashboardLayout.svelte";
+export { default as Dropdown } from "./components/inputs/Dropdown.svelte";
+export { default as Chips } from "./components/inputs/Chips.svelte";
+export { default as TextInput } from "./components/inputs/TextInput.svelte";
+export { default as TextArea } from "./components/inputs/TextArea.svelte";
+export { default as Checkbox } from "./components/inputs/Checkbox.svelte";
+export { default as Radio } from "./components/inputs/Radio.svelte";
+export { default as Switch } from "./components/inputs/Switch.svelte";
+export { default as Banner } from "./components/containers/Banner.svelte";
+export { default as PillTab } from "./components/buttons/PillTab.svelte";
+export { default as Toaster } from "./components/containers/Toaster.svelte";
+export { default as TextLink } from "./components/inputs/TextLink.svelte";
+export { default as TipIndicator } from "./components/containers/TipIndicator.svelte";
+export { default as PillTabs } from "./components/containers/PillTabs.svelte";
+export { default as Tooltip } from "./components/containers/Tooltip.svelte";
+export * from "./types/index";